【SwiftUI】NavigationViewの使い方について解説~基本的な使い方からナビゲーションバーの色やスタイルまで~

この記事では、SwiftUIでNavigationViewを実装する方法について徹底解説していきたいと思います。

NavigationViewの基本的な実装方法

このように、上にスワイプすると、ナビゲーションエリアが表示されます。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
        }
    }
}

ただ、NavigationViewをつけるだけです。

タイトルをつける方法

基本的にNavigationViewにはタイトルをつけます。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("タイトル")
        }
    }
}

NavigationViewの見た目を変更する

Barの色を変更する

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 {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("アイテム一覧")
			.navigationBarTitleDisplayMode(.inline)
        }
    }
}

SwiftUIでは変えられないので、UINavigationBarで変更します。

NavigationViewのタイトルの色を変更する

こちらも、SwiftUIでは変えられず、ちょっと無理矢理変える感じでした。

NavigationViewに画像を配置する

NavigationViewにボタンを配置する

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("フルーツ")
            .navigationBarItems(
                leading: Button(action: {
                    print("左のボタンが押されたよ")
                }){
                    Image(systemName: "ellipsis.circle")
                },
                trailing: Button(action: {
                    print("右のボタンが押されたよ")
                }){
                    Image(systemName: "gearshape")
                }
            )
        }
    }
}

leading:が左で、trailing:が右です。Buttonだけではなく、Textなどもおくことができます。

画像と文字を入れる場合は、以下のようにVStackで囲って記述します。

trailing: Button(action: {
    print("右のボタンが押されたよ")
}){
    HStack {
        Image(systemName: "trash")
        Text("削除")
    }
}

あたらしい実装方法

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("フルーツ")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        print("左のボタンが押されたよ")
                    }) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        print("右のボタンが押されたよ")
                    }){
                        HStack {
                            Image(systemName: "trash")
                            Text("削除")
                        }
                    }
                }
            }
        }
    }
}

.navigationBarItemsから.toolBarに変更になりました。

NavigationViewのスタイルを変更する

navigationBarTitleDisplayMode

.large

基本的には、左上に大きくタイトルを表示し、スクロール時にタイトルが中央に配置されるスタイルです。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("フルーツ")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

.inline

基本的なナビゲーションバーですね。おしゃれ感は無くなりますが、こちらの方が使いやすそうです。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("りんご")
                Text("みかん")
                Text("スイカ")
            }
            .navigationTitle("フルーツ")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

navigationViewStyle

NavigationViewの境目の線を消す

.navigationViewStyle(DoubleColumnNavigationViewStyle())