【SwiftUI】NavigationView

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

# コードで解説
## １，ナビゲーションエリアを表示
```swift
struct ContentView: View {
    var body: some View {
        NavigationView {

        // コード

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

## ２，ナビゲーションエリアにタイトルを表示し、スタイルを変更
```swift
struct ContentView: View {
    var body: some View {
        NavigationView {

        // コード

        .navigationTitle("タイトル")
        .navigationBarTitleDisplayMode(.large)
        }
    }
}
```
スタイルの種類は以下。
| スタイル | 意味 |
| --- | --- |
| .large（デフォルト） | 大きなタイトルで表示 |
| .inline | 小さなタイトル固定 |
| .automatic | 前のナビゲーション項目の表示モードを継承。前に画面がなければ .large と同じ |

また以下のようにタイトルとスタイルを1行にできる。
```swift
  .navigationBarTitle(”タイトル”, displayMode:  .inline)
```
## ３，ナビゲーションエリアにボタンを表示する
```swift
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の背景色は白色です。
```swift
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
```swift
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()
    }
}
```