【SwiftUI】NavigationViewでのボタン配置(toolbar)

(2021/05/13 更新)

NavigationViewでのボタン配置を制御するtoolbarモディファイアについて解説します。
toolbarはiOS14から使えるようになったModifierです。
それ以前でのボタン配置方法はこちらの記事を参照してください。

(アーカイブ)【SwiftUI】ナビゲーションバーのボタン配置
本記事で使用しているnavigationBarItems()はiOS14以降では非推奨となっています。 最新の情報はこちらの記事を御覧ください。 ナビゲーションバーにボタンを配置する方法を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.1
スポンサーリンク

基本的な使い方

NavigationViewでボタンを配置可能なツールバーには、上部のナビゲーションバーと、下部のボトムバーの2種類あります。

基本的な使い方

ボタンの配置には、次のコードのようにtoolbarモディファアとToolbarItemを組み合わせて使用します。
toolbarモディファイアは他のNavigationViewに関するModifierと同様にNavigationViewそのものではなく、Navigation配下のViewに適用します。

ToolbarItemでは個々のアイテムと配置位置を指定します。

アイテムにLabelを使った場合は、表示エリアサイズの関係上アイコンのみの表示となります。

スポンサーリンク

配置場所の指定

各アイテムの配置場所はToolbarItemのplacement引数で指定します。

placementに指定できる配置場所には、2つのタイプがあります。

位置的な配置場所タイプ(Positional placements)
配置場所を具体的な位置で指定します。
一般的なiOSアプリ開発であればこちらのタイプだけでよいかと思われます。

意味合い的な配置場所タイプ(Semantic placements)
プラットフォーム、サイズクラス、または他のアイテムの存在を含む多くの要因に応じて、アイテムが自動的に配置されます。
MacOSやWatchOSなど、複数のプラットフォームで動くようなアプリ開発にはこちらを使います。

位置的な配置場所(Positional placements)

プロパティ 説明
.bottomBar ボトムバー
.navigationBarLeading ナビゲーションバーの左端
.navigationBarTrailing ナビゲーションバーの右端

意味合い的な配置場所(Semantic placements)

プロパティ 説明
.automatic アイテムが自動的に配置されます。
.cancellationAction キャンセルアクションの配置。
iOSではナビゲーションバーの左端。
.confirmationAction 確認アクションの配置。
iOSでは.primaryActionと同じ。
.destructiveAction 破壊的アクションの配置。
iOSではナビゲーションバーの右端。
.navigation ナビゲーションアクションの配置。
iOSではナビゲーションバーの左端または.primaryActionを指す。
.primaryAction 主要なアクションの配置。
iOSではナビゲーションバーの右端。
.principal 主要なアイテムの配置。
iOSではナビゲーションバーの中央。.navigationTitle()よりも優先される。
.status ステータス情報の表示位置。
iOSではボトムバーの中央。
スポンサーリンク

アイテムをまとめて配置する

複数アイテムをまとめて配置する場合は、ToolbarItemGroupを使用します。

個々のアイテムをToolbarItemで配置するのに比べてコード量を削減できます。

ToolbarItemとHStackを組み合わせても、同じような事ができますが、若干動きが変わりますので注意が必要です。

ToolbarItemGroupの例

ボトムバーでのレイアウト

ToolbarItem+HStackの例

こちらの例ではSpacer()が有効に機能しません。

ToolbarItem+HStackの例

スポンサーリンク

配置位置を指定しない場合

ToolbarItemを省略し配置位置を明示指定しない場合は、デフォルト位置(iOSではナビゲーションバーの右端)に配置されます。

配置位置を指定しない場合

スポンサーリンク

あわせて読みたい記事

(アーカイブ)【SwiftUI】NavigationViewの使い方
(2020/11/6 更新) 本記事で使用しているNavigationViewはiOS16以降では非推奨となっています。 最新の情報はこちらの記事を御覧ください。 階層的な画面遷移を管理するNavigationViewの使い方を解説します。
【SwiftUI】編集モードの取得に関する問題
(2022/02/06 更新) NavigationViewでの編集モード(editMode)取得に関する問題についてまとめました。
【SwiftUI】Buttonの使い方
(2021/10/19 更新) ラベルとアクションを持つButtonの使い方を解説します。