【SwiftUI】NavigationView

NavigationVieｗとは

SwiftUIのView構造体の1つ。
階層的なViewに対して簡単に画面遷移を実装できる。
NavigationViewで囲っている中の要素のデザインも自動で変更される。

コードで解説

１，ナビゲーションエリアを表示

struct ContentView: View {
    var body: some View {
        NavigationView {

        // コード

        }
    }
}

「NavigationView {} 」を「Var body: some View {} 」に入れるだけで実装される。

２，ナビゲーションエリアにタイトルを表示し、スタイルを変更

struct ContentView: View {
    var body: some View {
        NavigationView {

        // コード

        .navigationTitle("タイトル")
        .navigationBarTitleDisplayMode(.large)
        }
    }
}

スタイルの種類は以下。

スタイル	意味
.large（デフォルト）	大きなタイトルで表示
.inline	小さなタイトル固定
.automatic	前のナビゲーション項目の表示モードを継承。前に画面がなければ .large と同じ

また以下のようにタイトルとスタイルを1行にできる。

  .navigationBarTitle(”タイトル”, displayMode:  .inline)

３，ナビゲーションエリアにボタンを表示する

struct ContentView: View {
    var body: some View {
        NavigationView {

        // コード

        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    print("左のボタン")
                }) {
                    Image(systemName: "ellipsis.circle")
                }
            }

            ToolbarItem(placement: .navigationBarTrailing) {
                Button(action: {
                    print("右のボタン")
                }){
                    Image(systemName: "gearshape")
                }
            }
        }
    }
}

これで左右にボタンが表示される。
他に使いそうな「placement」は、

placement	意味
.principal	中央に配置
.keyboard	キーボードを開いたときにボタンを表示

「.keyboard」のみは「NavigationView」も不要。
iOSのソフトウェアキーボードは閉じる手段が少ないので、Closeボタンの設置に使う。

４，ナビゲーションバーの背景色を変更

デフォルトではNavigationBarの背景色は白色です。

struct ContentView: View {
// 背景色の設定
    init() {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor.blue
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }

    var body: some View {
        NavigationView {

        // コード

        }
    }
}

「appearance.backgroundColor = UIColor.blue」のところで背景色を指定。
SwiftUIではまだ実装できないので、「NavigationBader」で実装。

最後に

完成画面：https://github.com/Yuchi-SaitoYuya/SwiftUI_NavigationView/wiki

import SwiftUI
struct ContentView: View {
    
    // 背景色を設定
    init() {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor(red: 0.84, green: 0.19, blue: 0.19, alpha: 1.00)
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    
    var body: some View {
        NavigationView {
            List {
                Text("マイク")
                Text("ダスティン")
                Text("ルーカス")
            }
            .navigationTitle("ストレンジャー・シングス")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        print("左のボタン")
                    }) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        print("右のボタン")
                    }){
                        Image(systemName: "gearshape")
                    }
                }
                
                // キーボードに閉じるボタンを配置
                ToolbarItem(placement: .keyboard){
                    Text("閉じる")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}