【SwiftUI】ナビゲーションバーの実装方法

注意事項

本記事はエンジニア歴の浅い初心者が備忘録としてまとめたものです。
細かい部分に誤りがあるかもしれませんが、ご容赦ください。
※認識に間違いがありましたら、コメントで指摘頂けますと幸いです！

1.はじめに

SwiftUIを学習する中で、ナビゲーションバーを実装したいが、NavigationStackやNavigationView、toolbarという文言が出てきて、その違いや使い方がわからなかった。

2.環境

Xcode:15.2
Swift:5.9.2

3.ナビゲーションコンテナについて

ナビゲーションバーを設置するには、そもそも”ナビゲーションコンテナ”というものを用意する必要があります。
イメージとしては、ナビゲーションバーを実装するための”大きな箱”を準備すると捉えていただければいいかなと思います。
（ナビゲーションバーに限らず、ナビゲーションに関わる機能を実装したい場合も使用しますが、ひとまず、ナビゲーションバーの実装で必要となるものだとご理解いただければ良いかと思います！）

現時点での記載方法は以下のいずれかになるかと思います。

①
struct ContentView: View {
    var body: some View {
        NavigationStack{
         //4.ナビゲーションバーの実装に詳細を記載
        }
    }
}

②
struct ContentView: View {
    var body: some View {
        NavigationView{
         //4.ナビゲーションバーの実装に詳細を記載
        }
    }
}

①と②に機能的な差異はありませんが、推奨されるOSが異なります。
①：iOS16以降で推奨される比較的新しい実装方法
②：iOS13からある実装方法（iOS16以降は非推奨）

4.ナビゲーションバーの実装

ナビゲーションコンテナを実装できたので、いよいよナビゲーションバーの実装に移ります。
NavigationStackやNavigationViewの中に色々と記載していきますが、
ここからは個人個人の実装したい内容によって異なるので、よく使用される”タイトル”と”戻るボタン”を例として実装します。

struct ContentView: View {
    var body: some View {
        NavigationView　もしくは NavigationStack{
            .navigationBarTitle("タイトル")
            .navigationBarItems(leading: Button("戻る") {
            　　　　//Action
            })
        }
    }
}

ちなみに、iOS14以降ではこんな書き方もできるみたいです。（←冒頭で出てきた”toolbar”とはこれのことだった様子。。）

struct ContentView: View {
    var body: some View {
        NavigationStack{
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("戻る") {
                     // Action
                    }
                }
            }
        }
    }
}

+α

ナビゲーションバーについて調べているともう1つ気になるワードが出てきたので、そちらも合わせて記載しておきます。
それは”タブバー”です。
これはアプリでよくある、画面下部に設置されているView間を移動するためのものです。
こんな風に実装できるみたいです。

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Home")
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
    
            Text("Settings")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
        }
    }
}

最後に

ここまで見ていただきありがとうございます。
少しでも参考になれば幸いです。

補足：ChatGPTに聞いた”ナビゲーションバー”と”タブバー”の違いを載せておきます笑

ナビゲーションバー:
    ・ビューの上部に表示。
    ・階層的なビューの遷移をサポート。
    ・各ビューごとにタイトルやボタンをカスタマイズ可能。
タブバー:
    ・アプリの下部に固定表示。
    ・アプリの主要セクション間のナビゲーションをサポート。
    ・各タブにアイコンとラベルを設定可能。