[初心者向け]SwiftUIでナビゲーションを作ろう！NavigationViewの使い方を学ぶ

「　SwiftUIで画面遷移を実装したい… 」

「　ボタンタップで違う画面にジャンプさせたい…　」

そんな時に役立つのが、SwiftUIの機能「NavigationView」です。

今回は、アプリの画面構築において重要な役割を持つNavigationViewを学んでいきましょう。

CodeCandyが公開しているYouTubeライブでは、今回の内容を講師がさらに詳しく解説してくれており、より理解が深まるでしょう。本記事の最後に紹介していますので、ぜひそちらもご覧になってください

※注意

NavigationViewは2022年7月現在で非推奨となっていて、iOS13〜iOS16までのサポートです。

iOS16からは、NavigationStack、NavigationSplitViewをご利用ください。

環境・バージョン

　> Swift 5.7.2

　> Xcode 14.2

　> macOS 12.5 Monterey

1 NavigationViewとは
2 NavigationViewの機能
3 iPadデザインにおける注意点
- 3.1 シミュレータでiPadを起動
- 3.2 NavigationViewの表示スタイルを指定
4 まとめ
- 4.1 本記事の動画紹介

NavigationViewとは

NavigationViewは、アプリの画面を構築していく上で重要な役割を持ちます。

NavigationViewを活用することで、アプリケーション内での階層的な画面遷移を管理することができます。

NavigationView内に記述されたViewは、ナビゲーション管理下となります。

				
					struct ContentView: View {
    var body: some View {

        NavigationView {

            // このブロック内に記述されたコードは、ナビゲーション管理下となる

        } // NavigationView ここまで

    } // bady
} // View

NavigationViewの機能

タップしたら遷移する

ナビゲーションするリンクの作成と、遷移先を指定することができます。

NavigationViewの基本機能となります。

NavigationViewの中に「NavigationLink」を作成することで実装します。

NavigationLinkによって、ページ遷移先へのリンクを作成することができます。

NavigationLinkの引数には「destination」を指定します。destination引数で遷移先を指定します。

実装例では、遷移先を絵文字の”“で指定しています。

※補足

記事内のコードブロックにて、NavigationLinkに「Text(“”)」と空文字で記述されていますが、””の中にはフルーツの絵文字が入力されています。

「Text(““)」と記述していただくよう、よろしくお願い致します。

				
					struct ContentView: View {
    var body: some View {

        NavigationView {

            // 引数「destination」で遷移先を指定
            NavigationLink(destination: Text("🍊")) { // ⬅︎

                Text("オレンジ") // リンクのデザインを指定

            } // NavigationLink

        } // NavigationView

    } // bady
} // View

リンクの装飾

前項で作成した”オレンジ”のようなリンクには装飾を加えることができます。

「リンクボタン」と「遷移先のアイテム」の二つのサイズを装飾した実装例です。

.font : 対象のフォントサイズを指定

.fontWeight : 対象のフォントの太さを指定

				
					struct ContentView: View {

    var body: some View {

        NavigationView {

            // 引数「destination」で遷移先を指定

            NavigationLink(destination: Text("🍊").font(.system(size: 200))) { // ⬅︎

                Text("オレンジ") // リンクのデザインを指定
                    .font(.largeTitle)  // ⬅︎
                    .fontWeight(.bold) // ⬅︎

            } // NavigationLink

        } // NavigationView

    } // bady
} // View

設定アプリのようなメニューを作る

NavigationView内に複数のリンクを作成することで、設定アプリのような複数の項目が並べられたメニューを作ることができます。

SwiftUIのView機能である「List(リスト)」をNavigationView内に配置することで実装します。

NavigationLinkを「List」で囲むことで実装例のような遷移リストが作成できます。

				
					struct ContentView: View {

    var body: some View {

        NavigationView {

            List { // ⬅︎ リストでリンクアイテムを管理

                NavigationLink(destination: Text("🍊").font(.system(size: 200))) {

                    Text("オレンジ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // オレンジ

                NavigationLink(destination: Text("🍎").font(.system(size: 200))) {

                    Text("リンゴ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // リンゴ

            } // List ここまで

        } // NavigationView ここまで
    } // body
} // View

NavigationLinkの数を増やせば、その分リスト項目も増やすことができます。

“Listの処理ブロック内にリンクを配置する”のがポイントです。

✅Check!!!

コードが多くなってくることで、それぞれの機能の処理範囲の見通しが悪くなってきます。

処理ブロックの終わりにコメントを残しておく(Link ここまで )ことで、

それぞれの要素の処理ブロックがどこからどこまでなのか、確認しながらコードを記述していきましょう。

タイトルと「戻る」ボタン

NavigationViewにタイトルの配置や、「戻る」ボタンの装飾をすることができます。

“フルーツを選ぶ”タイトルを追加した実装例です。
リスト上部にタイトルが追加されたことに加えて、戻るボタンにも指定した文字が反映されていることがわかります。

実装方法はシンプルで、NavigationView内に「.navigationTitle」モディファイアを追加することで機能を実装することができます。

ここで指定したテキストは、タイトルだけでなく、戻るボタンのテキストにも自動で反映されます。

NavigationViewの処理ブロック内で指定するのがポイントです。ブロック外で指定すると反映されませんので、注意しましょう。

				
					struct ContentView: View {

    var body: some View {

        NavigationView {

            List { 

                NavigationLink(destination: Text("🍊").font(.system(size: 200))) {

                    Text("オレンジ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // オレンジ

                NavigationLink(destination: Text("🍎").font(.system(size: 200))) {

                    Text("リンゴ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // リンゴ

            } // List ここまで

            .navigationTitle("フルーツを選ぶ")   // ⬅︎ タイトルを指定

        } // NavigationView ここまで
    } // body
} // View

iPadデザインにおける注意点

iPhoneとiPadでは、同じ実装コードでもNavigationViewの画面デザインに違いがあります。

iPadのような画面が広いデザインの場合は、あらかじめスタイルを指定することを検討する必要があります。それぞれの違いについてみていきましょう。

シミュレータでiPadを起動

まずはiPadでの挙動を確認するためにシミュレータでiPadを指定します。

Xcode上部からシミュレータデバイスの選択でiPadを指定します。

iPadの選択ができたら、「Command + R」でシュミレータを起動します。

iPadのシミュレータが表示されたら成功です。

この時点で、iPhoneとは起動時の画面が異なることがわかります。

iPad画面左上のアイコンを選択すると、左からメニュー画面が出てきます。
メニュー画面の中に、先ほど作成したフルーツのリンクが配置されていますね。

これがiPadにおけるデフォルトのNavigationViewの挙動です。

NavigationViewの表示スタイルを指定

NavigationViewは、表示スタイルをあらかじめ指定することができます。

表示スタイルを指定しておくことで、iPhoneとiPadで同じ表示スタイルに統一します。

モディファイア「.navigationViewStyle」を加えていきます。

NavigationViewブロックの外で指定します。記述箇所に注意しましょう。

				
					struct ContentView: View {

    var body: some View {

        NavigationView {

            List {

                NavigationLink(destination: Text("🍊").font(.system(size: 200))) {

                    Text("オレンジ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // オレンジ

                NavigationLink(destination: Text("🍎").font(.system(size: 200))) {

                    Text("リンゴ")
                        .font(.largeTitle)
                        .fontWeight(.bold)

                } // リンゴ

            } // List ここまで
            .navigationTitle("フルーツを選ぶ")

        } // NavigationView ここまで
        .navigationViewStyle(.stack) // ⬅︎ NavigationViewの表示スタイルを指定
    }
}

スタイルを指定したことで、iPhoneと同じNavigationView表示デザインになりました！