ToolbarItemGroup

複数のツールバーアイテムをまとめて管理したい場合は ToolbarItemGroup を使用します。同じ配置位置に複数のボタンを効率的に配置できます。

ToolbarItemGroup の基本

ToolbarItemGroup を使うと、同じ placement の複数アイテムをまとめて記述できます。

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button {
            // 検索
        } label: {
            Image(systemName: "magnifyingglass")
        }
        
        Button {
            // 追加
        } label: {
            Image(systemName: "plus")
        }
    }
}

これは以下と同等ですが、より簡潔に書けます：

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button { } label: { Image(systemName: "magnifyingglass") }
    }
    ToolbarItem(placement: .topBarTrailing) {
        Button { } label: { Image(systemName: "plus") }
    }
}

ボトムバーでの活用

特にボトムバーでは複数のボタンを並べることが多いため、ToolbarItemGroup が便利です。

struct PhotoDetailView: View {
    var body: some View {
        NavigationStack {
            Image(systemName: "photo")
                .font(.system(size: 100))
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button { } label: { Image(systemName: "square.and.arrow.up") }
                        Spacer()
                        Button { } label: { Image(systemName: "heart") }
                        Spacer()
                        Button { } label: { Image(systemName: "trash") }
                    }
                }
        }
    }
}

キーボードツールバー

テキスト入力時にキーボードの上部にツールバーを表示するには、.keyboard placement を使います。

struct FormView: View {
    @State private var text = ""
    @FocusState private var isFocused: Bool
    
    var body: some View {
        NavigationStack {
            TextField("入力してください", text: $text)
                .focused($isFocused)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        Button("完了") {
                            isFocused = false
                        }
                    }
                }
        }
    }
}

.keyboard

キーボードの上部に表示されるツールバー。テキスト入力時の補助ボタンに使用。

Spacer の活用

ToolbarItemGroup 内で Spacer を使うことで、ボタンを左右に分散配置できる。

条件付き表示

ToolbarItemGroup 内でも条件分岐が使えます。

struct ContentView: View {
    @State private var isEditing = false
    @State private var selectedItems: Set<String> = []
    
    var body: some View {
        NavigationStack {
            List { /* ... */ }
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                        if isEditing {
                            Button("すべて選択") {
                                // 全選択
                            }
                            Spacer()
                            Button("削除") {
                                // 削除
                            }
                            .disabled(selectedItems.isEmpty)
                        }
                    }
                }
        }
    }
}

複数の ToolbarItemGroup

異なる配置位置に対して、複数の ToolbarItemGroup を使用できます。

.toolbar {
    ToolbarItemGroup(placement: .topBarLeading) {
        Button("キャンセル") { }
    }
    
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button { } label: { Image(systemName: "square.and.arrow.up") }
        Button("保存") { }
    }
    
    ToolbarItemGroup(placement: .bottomBar) {
        Text("3項目選択中")
        Spacer()
    }
}

ToolbarItem

個別のアイテムを1つずつ配置。異なる placement を指定する場合に使用。

ToolbarItemGroup

同じ placement の複数アイテムをグループ化。コードが簡潔になる。

ToolbarItemGroup を活用することで、ツールバーの構成を整理し、読みやすいコードを書くことができます。