Toolbarにコンテンツを追加し配置をカスタマイズするには？【ToolbarItemの使い方】

この記事では、SwiftUIでのToolbarItemの使い方を初学者向けに解説します。ToolbarItemを使うことで、アプリにツールバーを追加し、さまざまなアクションやビューをナビゲーションバーに組み込むことができます。

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

基本的な使い方
ToolbarItemのカスタマイズ
1. 配置方法
注意点
まとめ

基本的な使い方

SwiftUIのToolbarItemは、ビューのツールバーにアイテムを追加するために使用します。まずは、最も基本的なToolbarItemの追加方法から見ていきましょう。

ToolbarItemのクロージャ内にコンテンツを記述することで画面上のツールバーの位置にコンテンツを配置することができます。

import SwiftUI

struct ToolbarItemSmp: View {
    var body: some View {
        NavigationStack {
            Text("メインコンテンツ")
                .navigationTitle("ホーム")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("アクション実行")
                        }) {
                            Image(systemName: "plus")
                        }
                    }
                }
        }
    }
}

このコードは、ナビゲーションバーの右側にプラス記号のボタンを追加します。
このボタンをタップすると、コンソールに「アクション実行」と表示されます。

ToolbarItemのカスタマイズ

ToolbarItemの配置、ラベル、アイコンなど、さまざまなカスタマイズが可能です。
配置には.navigationBarLeading、.navigationBarTrailing、.bottomBarなどがあります。アイコンやテキストだけでなく、カスタムビューを使用することもできます。

配置方法

ToolbarItemの配置にはいくつもの引数で指定することができ、配置方法に分類があります。

明示的に位置を指定

アクションに合わせた位置を指定

主要なアクション

二次的なアクション

確認など肯定的なアクション

キャンセルなど否定的なアクション

削除など破壊的なアクション

ナビゲーション

意味合いに合わせて位置を指定

主要な項目

ステータス情報など

注意点

以下の配置については14.0以降非推奨となっていますのでご注意ください。
代わりに”topBarTrailing”や”topBarLeading”を使用するようにしましょう。

navigationBarLeading
navigationBarTrailing

ToolbarItemPlacement | Apple Developer Documentation

A structure that defines the placement of a toolbar item.

まとめ

ToolbarItemを使用することで、SwiftUIアプリケーションのユーザーインターフェースをより直感的でアクセスしやすくすることができます。
明示的な配置の他に、アクションなど役割に応じて配置することで、複数のViewで統一したインタフェースを作成しやすくなりますので、活用してみてください。