では、さっそくボタンが押されたら、画面遷移するように書こう!とおもって、ハタと気付きました。どうやるの?UIKitなら、present(ViewController)みたいな感じで、画面遷移させられたのですが、SwiftUIでは??
遷移先の画面
どうやって遷移するかも大事だけど、遷移先も大事です。作ってませんでしたので、とりあえず、真ん中にテキストが置いてある画面をConfigViewなる名前で作成しました。
SwiftUIでの画面遷移
1 2 3 4 5 |
struct ConfigView: View { var body: some View{ Text("Config view") } } |
なので、ContentView_Previewsの中をちょっと書き換えて、Previewで確認しましょう。こんな感じです。
1 2 3 4 5 6 |
struct ContentView_Previews: PreviewProvider { static var previews: some View { // ContentView() ConfigView() } } |
いよいよ遷移!
ぜんかい、そのためにButtonを貼り付けておいたのですが、調べてみたところ、NavigationLinkというものを使うらしいです。(いつか、ボタンを使いたい時のための練習だったということで)
1 |
NavigationLink#init(_ titleKey: LocalizedStringKey, destination: Destination) |
上記のInitializerを使うのがシンプルで良さげ。引数的には、前回のButtonと似てますよね。最初は、表示されるテキストで、Buttonではactionだったところが、遷移先を書くようになってます。
Destinationて何?
UIKitでは、遷移先のViewControllerが全てでしたが、NavigationLinkで渡す、Destinationとはなんでしょうか?
Structureの説明をきちんと読んだら、Destination: Viewとなってました。つまり、Viewを渡せば良いはずです。さっき作ったConfigViewもViewなので、渡せば良いっぽいです。ラッキー!
渡してみました
1 2 3 4 5 6 7 8 9 10 |
var body: some View { VStack(){ Image(systemName: "pencil").resizable().scaledToFit() HStack() { AdBanner(adUnitId: "ca-app-pub-XXX/XXXX").expectedFrame() // test id NavigationLink.init("ConfigView", destination: ConfigView()) } } } |
慌てて、メインの方のビューをNavigationViewにしてみたのが、以下。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var body: some View { NavigationView{ VStack(){ Image(systemName: "pencil").resizable().scaledToFit() HStack() { // AdBanner(adUnitId: "ca-app-pub-7219436282372946/1269091045")// real id AdBanner(adUnitId: "ca-app-pub-3940256099942544/2934735716").expectedFrame() // test id NavigationLink.init("ConfigView", destination: ConfigView()) } }.navigationViewStyle(StackNavigationViewStyle()) } } |
こんなにコードを書いていないのに、イメージビューがあって、広告貼ってあって、ボタン(のように見えるもの)を押すことで別画面に遷移できるようになりました。
このバグを回避するために、Buttonを使って遷移させることになります。それは、次回に説明します。
LandscapeモードだとNavigationViewが非常に不安定というか、一部オプションに不具合があるらしく、NavigationViewにnavigationViewStyle(StackNavigationViewStyle())と追加しないと画面が白くなってしまいます。
上のコードは対応済みです。SwiftUI周りは、すこしBuggyですね。これは、大きな画面を持つ(私は、iPhone11 Pro Maxで試してました)ケースだとDetailViewを表示しようとして起こるみたいです。画面の小さい機種、例えば、iPhone8だと上記のmodifierを付加しなくて表示されます。もう少し調査が必要ですね。
Sponsor Link