ToolbarItemGroupの使い方を紹介【配置の決め方など】

ToolbarItemGroupは、ツールバー内に複数のアイテムをグループ化するためのビュー修飾子です。

これにより、ツールバーのアイテムを論理的にまとめて管理できます。ToolbarItemGroupは、ツールバーの特定の位置に複数のアイテムを配置する際に便利です。

iOS：14.0以上
XCode（当サイトの環境）：15.0.1

基本的な使い方
1. サンプルコードの解説
配置オプション
まとめ

基本的な使い方

ToolbarItemGroupの基本的な使い方です。まず、基本的なレイアウトを設定し、その中にツールバーを追加します。

import SwiftUI

struct ToolbarItemGroupSmp: View {
    var body: some View {
        NavigationStack {
            Text("Hello, SwiftUI!")
                .navigationTitle("Toolbar Example")
                .toolbar {
                    ToolbarItemGroup(placement: .topBarTrailing) {
                        Button(action: {
                            print("Button 1 tapped")
                        }) {
                            Image(systemName: "star")
                        }
                        Button(action: {
                            print("Button 2 tapped")
                        }) {
                            Image(systemName: "heart")
                        }
                    }
                }
        }
    }
}

サンプルコードの解説

toolbar修飾子:

toolbar修飾子を使って、ツールバーアイテムを追加します。

ToolbarItemGroup:

ToolbarItemGroupを使って、ツールバーの特定の位置に複数のアイテムを配置します。この例では、placementに.topBarTrailingを指定し、ツールバーの右側にアイテムを配置しています。

Button:

ツールバー内に配置するアイテムは、ボタンやその他のビューで構成されます。この例では、2つのボタンを追加し、それぞれにアクションを設定しています。

配置オプション

ToolbarItemGroupには、さまざまな配置オプションがあります。種類には大きく分けて３種類あり「意図に基づいた配置」または「アクションに対応した配置」、「明示的な配置」があります。

意図に基づいた配置

principal：目立たせたい重要な機能に適用します。iOSでは、ナビゲーションバーの中央に配置されます。
status：statusは情報提供を目的とした配置であり、本質的にはボタンなどユーザーが実行できるアクションを表すものではありませんが、使用することは可能です。

アクションに対応した配置

primaryAction：頻繁に使用されるアクションに適用します。例えば、チャットアプリで新しいメッセージを作成するためにユーザーがクリックまたはタップするボタンなどです。iOSでは、プライマリアクションの位置はツールバーの後端になります。
secondaryAction：頻繁に使用されるアクションですが、現在のコンテキストが機能するために必須ではアクションに適用します。
confirmationAction：特定のアクションに対するユーザーの確認を受け取ります。確認アクションの例としては、カレンダーに新しいイベントを追加するための「追加」というラベルの付いたアクションが挙げられます。iOSでは、primaryAction配置と同じ場所にアイテムを配置します。
cancellationAction：ボタンをタップまたはクリックして、アクションを実行せずにモーダルインターフェイスを閉じるようなアクションに適用します。iOSではツールバーの前端に配置されます。
destructiveAction：confirmationActionの対となるアクションです。例えば、「保存しない」というラベルの付いたボタンは、ユーザーが終了する前にドキュメントへ保存されていない変更を破棄できるようにします。iOSでは、ツールバーの後端に配置します。
navigation：ユーザーはコンテキスト間を移動するボタンなどに適用します。例えば、Web ブラウザーの進むボタンと戻るボタンがナビゲーションアクションです。iOSでは、ツールバーの先端に表示されます。戻るボタンなどのシステムによるナビゲーション項目が既に存在する場合は、代わりにprimaryActionの位置に表示されます。