[SwiftUI] NavigationView の toolbar モディファイアの使用方法

NavigationVIew で toolobar モディファイアを使用すると、画面上部にナビゲーションバーを、画面下部にはボトムバーを表示し、それぞれに任意のボタンを配置することができます。
例えば、ナビゲーションバーにゴミ箱のアイコンを表示してタップ時にアイテムを削除したり、ボトムバーに紙飛行機のアイコンを表示してメールの送信をするようなアプリの作成が可能です。
今回は、toolbar モディファイアについて説明します。

toolbar モディファイアの使用例

環境
toolbar モディファイアの基本使用方法
ToolBarItem の配置位置について
1. Positional placements
2. Semantic placements
ToolBarItemGroup でアイテムをまとめる
.toolbar モディファイアの使用例
ToolbarItem の色を変更する

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.5
Swift: 5.2.4

toolbar モディファイアの基本使用方法

toolbar モディファイアは、ToolBarItem と組み合わせて使用します。
toolbar モディファイアは、ToolBarItem のコンテナ（入れ物）としての役割をもち、ToolBarItem はツールバーをどこに配置するかと何（アイコンやテキストなど）を表示するかを設定します。
toolbar モディファイアと ToolBarItem を使用する基本構文を以下に示します。

NavigationView {
    // List や Form など
    .toolbar {
        ToolbarItem(placement: 配置場所を示す値){
            // Button などツールバーに配置する View
        }
    }
}

ToolBarItem の配置位置について

ToolBarItem の placement にはツールバーの配置場所を指定します。

ToolbarItem(placement: 配置場所を示す値){
    // ツールバーに配置する View
}

配置場所を示す値は Positional placements と Semantic placements の２種類があります。Positional placements は位置的な配置場所を示し、Semantic placements は、その値が意味的な配置位置を示します。

Positional placements

Positional placements は位置的な配置場所を表します。

値	対象 OS	説明
.navigationBarLeading	iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+	ナビゲーションバーの左端に配置します
.navigationBarTrailing	iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+	ナビゲーションバーの右端に配置します
.bottomBar	iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+	ボトムバー。NavigationView の下部に配置します。

Semantic placements

Semantic placements は意味的な配置場所を示します。

値	対象 OS	説明
.automatic	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	アイテムを自動的に配置します
.cancellationAction	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	キャンセルアクションを配置します
.confirmationAction	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	確認アクションを配置します
.destructiveAction	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	破壊的アクションを配置します。「保存しない」のように確認アクションとは反対のアクション配置に使用します。
.navigation	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	ナビゲーションアクションを配置します。Webブラウザの進むボタンや戻るボタンはナビゲーションアクションに相当します。
.primaryAction	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+	主要なアクションを配置します。ユーザーがチャットアプリ等でメッセージを作成するようなボタンが相当します。
.principal	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+	主要なアイテムを配置します。指定したタイトルよりも優先して配置されます。
.status	iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+	ステータス情報を配置します。ユーザーが実行できるアクションを示すのではなく、情報提供として使用します。

ToolBarItemGroup でアイテムをまとめる

複数のアイテムをまとめるには ToolBarItemGroup を使用します。配置場所を示す値は、戦術説明したものを使用できます。

ToolbarItemGroup(placement: 配置場所を示す値){ }

.toolbar モディファイアの使用例

上記をもとに、作成した使用例を示します。
なお、Image の systemname 引数に指定しているアイコンは SF Symbols（https://developer.apple.com/sf-symbols/）をダウンロードして使用しています。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 100) { index in
                Text("アイテム\(index)")
            }
            // NavigationView のタイトル
            .navigationTitle("アイテム一覧")
            // ツールバー
            .toolbar {
                // ナビゲーションバー左
                ToolbarItem(placement: .navigationBarLeading){
                    Button(action: {}) {
                        Image(systemName: "magnifyingglass")
                    }
                }
                // ナビゲーションバー右
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: {}) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
                // ボトムバー
                ToolbarItemGroup(placement: .bottomBar){
                    Button(action: {}) {
                        Image(systemName: "checkmark.circle")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "camera")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "pencil.tip.crop.circle")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "square.and.pencil")
                    }
                }
            }
        }
    }
}

toolbar モディファイアの使用例

ToolbarItem の色を変更する

ToolbarItem の色はデフォルトで青色です。これを変更するには、accentColor モディファイアを使用します。

ToolbarItem(placement: .navigationBarLeading){
    // Button などの View
    .accentColor(色)
}

または
NavigationView {
}
.accentColor(色)

以下は、先程の例で NavigationView 全体に accenctColor(.red) を適用して赤にしています。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 100) { index in
                Text("アイテム\(index)")
            }
            // NavigationView のタイトル
            .navigationTitle("アイテム一覧")
            // ツールバー
            .toolbar {
                // ナビゲーションバー左
                ToolbarItem(placement: .navigationBarLeading){
                    Button(action: {}) {
                        Image(systemName: "magnifyingglass")
                    }
                }
                // ナビゲーションバー右
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: {}) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
                // ボトムバー
                ToolbarItemGroup(placement: .bottomBar){
                    Button(action: {}) {
                        Image(systemName: "checkmark.circle")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "camera")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "pencil.tip.crop.circle")
                    }
                    Spacer()
                    Button(action: {}) {
                        Image(systemName: "square.and.pencil")
                    }
                }
            }
        }
        .accentColor(.orange)  // オレンジ色にする
    }
}

ツールバーアイテムの色変更