第５回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI 入門 画面遷移について

　今回は画面遷移についてご紹介します。画面遷移には大きく分けて2つの遷移方法があります。それは「NavigationLink（ナビゲーション リンク）」遷移 と 「sheet(シート)」遷移というものです。
※個人的には「sheet」遷移の方が優秀なのですが両方紹介します。

　NavigationLinkというのはNavigationViewの中でしか使用することができません。ですので、Navigation Link を説明する前に、最初に NavigationView についてご紹介します。NavigationView は簡単にいうとアプリに「案内バー」を設定できるものです。実際に確認してみましょう。
このように書きます。

struct ContentView: View {
    var body: some View {        
        NavigationView {
						Text(“WATSON CAMPへようこそ”)
        }
	  .navigationTitle(“タイトル”)
    }
}

　この . (ドット)というのは、日本語で置き換えると「の」と置き換えるとイメージしやすいと思います。中括弧の終わりを確認するとNavigationViewに紐づいていることが確認できます。つまり、これはNavigationView(ナビゲーション ビュー) の navigationTitle(“タイトル”)を 「タイトル」としますという意味です。実際に実行してみます。このように「案内バー」のところに「タイトル」と書かれていることが確認できます。

　次に画面遷移するNavigationLinkについて説明します。NavigationLinkというのはNavigationViewの中で書けるボタン機能になります。ボタンを押すと設定した画面に遷移します。実際に遷移できるかを確認するため、まずは遷移先の画面を作成します。今回は「SecondView(セカンド ビュー)」という名前で遷移先の画面を作成します。

★まずは、わかりやすいしやすいようにSecondView(セカンド ビュー)管理専用のファイルを作成しましょう。
　新しいファイルを作成します。「ナビゲータエリア」の「アプリ名」のプロジェクトファイルを 2本指でクリックしてください。そしたら「New File」を選択してクリックしてください。

次に「SwiftUI View」を選択してください。

Fileの名前はわかりやすい名前にするのがおすすめです。
※私の場合は「SecondView(セカンド ビュー)」にします。

　SecondView(セカンド ビュー)のFileが作成できたら、このText(“Hello, World”)のところに「セカンドビューに遷移できました。」と書きます。
このように書きます。

struct SecondView: View {
    var body: some View {        
        Text(“セカンドビューに遷移できました。”)
    }
}

　次に遷移前の画面にNavigationViewとNavigationLinkを書きます。このように書きます。

struct ContentView: View {
    var body: some View {        
        NavigationView {
		
            Text(“WATSON CAMPへようこそ”)
            NavigationLink(destination: SecondView(),label : {Text("画面遷移します")})
        }
	      .navigationTitle(“タイトル”)
    }
}

destinationのところに遷移したい画面を書きます。今回は「SecondView()」ボタンの名前を label の のところに書きます。今回は「画面遷移します」と書きます。試しに、これで実行します。

　このように「画面遷移します」のボタンを押下すると「SecondView」に遷移できたことが確認できます。NavigationLink の 優秀なところは「戻るボタン」を遷移先で表示してくれるところです。ですので、SecondView()に何もプログラムを書かなくても自動で「戻るボタン」を表示してくれます。「戻るボタン」を押下すると遷移元の画面に遷移します。

　次にNavigationLinkの弱点を説明します。例えば画面を３つ遷移したい場合にはおすすめしません。どいうことかと言いますと、試しに今の状態のSecondView(セカンド ビュー)からThirdView(サード ビュー)に遷移してみましょう。先ほどと同じように、遷移先の画面を作成します。このように書きます。

struct ThirdView: View {
    var body: some View { 
        Text(“サードビューに遷移できました。”)
    }
}

　では次に、遷移元にSecondViewにNavigationLinkを書きます。SecondViewにはすでにNavigationViewが備わってますので、NavigationLink のみで大丈夫です。

struct SecondView: View {
    var body: some View { 
        Text(“セカンドビューに遷移できました。”)
        NavigationLink(destination: SecondView(),label : {Text(“サード”ビューに遷移します。)})       
    }
}

これで実行してみます。このようにサードビューに遷移した時にこのように Navigation が2つ重なってしまいます。

2022年 1月15日 著作者 西村太智