ツールバーのカスタマイズや再利用にToolbarContentプロトコルを活用しよう

ToolbarContentプロトコルは、SwiftUIでツールバーの内容を定義するために使用されます。

このプロトコルを実装することで、カスタムツールバーの構成や管理が容易になります。
この記事では、ToolbarContentプロトコルの基本的な使い方と、実際のアプリケーションでの活用方法について解説します。

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

ToolbarContentを使用するメリット
基本的な使い方
1. カスタムツールバーの実装
実際の活用例
1. カスタムツールバーの呼び出し方法
まとめ
1. 参考リンク

ToolbarContentを使用するメリット

ToolbarContentプロトコルを使用することでツールバーの管理とカスタマイズが簡単になり、コードの再利用性や可読性が向上します。以下に、その具体的なメリットを解説します。

再利用性の向上：ToolbarContentを使用することで、共通のツールバーアイテムを複数のビューで簡単に再利用できます。たとえば、アプリ全体で一貫性のあるツールバーを提供したい場合、同じToolbarContent実装を各ビューに追加するだけで済みます。
コードの分離と管理：ツールバーアイテムの定義をToolbarContentに分離することで、ビュー部分のコードがすっきりし、可読性が向上します。ツールバーのロジックを独立した構造体にまとめることで、コードの保守が容易になります。
柔軟な配置とカスタマイズ：ToolbarItemのplacementプロパティを使用して、ツールバーアイテムの配置場所を柔軟に指定できます。これにより、ナビゲーションバーやツールバーの異なる位置にアイテムを配置しやすくなります。
コンパクトなコード：ToolbarContentを使用することで、ツールバーの内容を一か所にまとめることができ、コードがコンパクトになります。これにより、ビューごとに異なるツールバーアイテムを管理する負担が軽減されます。
テストの容易さ：ツールバーアイテムを別の構造体に分けることで、ユニットテストやUIテストが簡単になります。ツールバーの動作を独立してテストできるため、アプリケーション全体の信頼性が向上します。

基本的な使い方

ToolbarContentプロトコルを使用するには、まずカスタム構造体を定義し、その中でプロトコルの要件を満たす必要があります。以下に、基本的な使い方の例を示します。

struct CustomToolbarContent: ToolbarContent {
    var body: some ToolbarContent {
        ToolbarItem(placement: .confirmationAction) {
            Button(action: {
                print("confirmation button tapped")
            }) {
                Image(systemName: "star")
            }
        }
        ToolbarItem(placement: .cancellationAction) {
            Button(action: {
                print("cancellation button tapped")
            }) {
                Image(systemName: "heart")
            }
        }
    }
}

カスタムツールバーの実装

構造体の定義:

CustomToolbarContentという名前の構造体を定義し、ToolbarContentプロトコルに準拠させます。

bodyプロパティ:

bodyプロパティ内でToolbarItemを定義し、ツールバーのアイテムを配置します。ToolbarItemにはplacementパラメータを指定し、アイテムの配置場所を決定します。

ツールバーアイテムの追加:

ツールバーアイテムとして、ボタンを追加します。各ボタンにはactionとlabelを設定します。
上記のサンプルではそれぞれのボタンをタップするとconfirmationとcancellationのメッセージがコンソールに出力されます。

実際の活用例

ToolbarContentプロトコルを使用することで、アプリケーション全体で一貫性のあるツールバーを簡単に定義できます。
以下は、ビューでカスタムツールバーを使用する例です。

import SwiftUI

struct ToolbarContentSmp: View {
    var body: some View {
        NavigationStack{
            Text("Hello, SwiftUI!")
                .navigationTitle("Toolbar Example")
                .toolbar {
                    CustomToolbarContent()
                }
        }
    }
}