toolbar の使い方

ナビゲーションバーにボタンやアイコンを追加するには toolbar モディファイアを使用します。編集ボタンや追加ボタンなど、画面に関連するアクションを配置できます。

toolbar の基本

toolbar モディファイアの中に ToolbarItem を配置してボタンを追加します。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("コンテンツ")
                .navigationTitle("ホーム")
                .toolbar {
                    Button("追加") {
                        // 追加処理
                    }
                }
        }
    }
}

単一のボタンであれば、ToolbarItem を省略してそのまま Button を配置できます。

ToolbarItem で配置を指定

ToolbarItem を使うと、ボタンの配置位置を明示的に指定できます。

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button {
            // 処理
        } label: {
            Image(systemName: "plus")
        }
    }
    
    ToolbarItem(placement: .topBarLeading) {
        Button("編集") {
            // 処理
        }
    }
}

.topBarLeading

ナビゲーションバーの左側

.topBarTrailing

ナビゲーションバーの右側

.bottomBar

画面下部のツールバー

.principal

ナビゲーションバーの中央（タイトル位置）

複数のボタンを配置

struct ContentView: View {
    @State private var isEditing = false
    
    var body: some View {
        NavigationStack {
            List {
                Text("項目1")
                Text("項目2")
            }
            .navigationTitle("リスト")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        isEditing.toggle()
                    } label: {
                        Text(isEditing ? "完了" : "編集")
                    }
                }
                
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        // 追加処理
                    } label: {
                        Image(systemName: "plus")
                    }
                }
            }
        }
    }
}

Menu をツールバーに配置

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Menu {
            Button("オプション1") { }
            Button("オプション2") { }
            Divider()
            Button("削除", role: .destructive) { }
        } label: {
            Image(systemName: "ellipsis.circle")
        }
    }
}

ボトムバー

placement: .bottomBar で画面下部にツールバーを配置できます。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("コンテンツ")
                .navigationTitle("ホーム")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button {
                            // 共有
                        } label: {
                            Image(systemName: "square.and.arrow.up")
                        }
                    }
                    
                    ToolbarItem(placement: .bottomBar) {
                        Spacer()
                    }
                    
                    ToolbarItem(placement: .bottomBar) {
                        Button {
                            // 削除
                        } label: {
                            Image(systemName: "trash")
                        }
                    }
                }
        }
    }
}

ツールバーの表示/非表示

.toolbar(.hidden, for: .navigationBar)  // ナビゲーションバーを非表示
.toolbar(.hidden, for: .bottomBar)      // ボトムバーを非表示

.topBarTrailing

右上に配置。追加ボタンや設定ボタンに使用されることが多い。

.bottomBar

画面下部に配置。写真アプリのような操作パネルに適している。

toolbar はナビゲーションバーをカスタマイズする標準的な方法です。次の記事では ToolbarItem の配置オプションについてより詳しく解説します。