[SwiftUI] toolbar の使い方

SwiftUI に新しく導入された .toolbar modifier を説明します。
機能ボタン等の管理に役立ちます。

ボタン等のコントロールを個別に配置していると、その管理が大変になってきます。

複数のプラットフォームに対応しようとすると、個別の View を作ることになってしまいがちです。

SwiftUI2.0 からは、新しく toolbar という modifier が導入され、定義は同じ・表現はプラットフォーム依存 という書き方ができるようになっています。

順番に説明していきます。

toolbar modifier

名前の通り、ツールバー をコントロールするための modifier です。

Apple のドキュメントは、こちら

ToolbarItem/ToolbarItemGroup を複数持つことができる modifier です。

.toolbar を使用することで以下のように配置することができます。

.toolbar 例

Toolbar使用例

toolbar 使用例

ToolbarItem

.toolbar を使ってツールバー や、ナビゲーションバーに配置する要素を定義するものです。

Apple のドキュメントは、こちら

ToolbarItem を定義するときに、以下の2つの要素を指定する必要があります。

  • placement
  • content

placement 指定

どこに配置するかを指定するものです。

Semantic placement (意味的な配置場所) と positional placement (位置としての配置場所)の大きく2種類に分かれていて、以下のようなものを指定できます。

指定 semantic/positional iOS/iPadOS での配置箇所
.automatic NavigationBar の右端に追加されます
.principal semantic NavigationBar の中央に配置されます。NavigationView にタイトル指定されていても、こちらが優先されます
.navigation positional NavigationBar の左端に配置されます。back ボタンがあるケースでは、 .primaryAction の位置に配置されます
.primaryAction semantic NavigationBar の右端に配置されます
.status semantic bottom toolbar の中央に配置されます
.confirmationAction semantic(modal interface) .primaryAction の位置に配置されます
.cencellationactioen semantic(modal interface) NavigationBar の左端に配置されます
.destructiveAction semantic(modal interface) NavigationBar の右端に配置されます
.navigationBarLeading positional NavigationBar の左端に配置されます
.navigationBarTrailing positional NavigationBar の右端に配置されます
.bottomBar positional bottom bar に配置されます

semantic 的な意味については、Apple のドキュメント(こちら)を参照ください。

# 実際には、SwiftUI のコードを見るのがわかりやすかったです。

なお、NavigationBar と記載されている指定は、NavigationView 内で使われることが必要です。

content 指定

配置する要素を定義します。 Button 等の Control を配置することが多いと思います。

ToolbarItemGroup

様々な ToolbarItem を毎回定義して使用するのも大変です。

ToolbarItemGroup を使うことでまとめて、指定することができます。

ToolbarItemGroup 単位で、配置を指定します。

example code

Toolbar使用例

toolbar (ToolbarItemGroup) 使用例
絵的には、先のものと同じです。

ToolbarContent

ToolbarContent という Protocol を使うことで、配置が同じもの以外にもまとめることができます。

Apple のドキュメントは、こちら

ToolbarContent 例

(1), (2) のように ToolbarItem 毎に配置指定が可能なため、配置先が異なる ToolbarItem でもまとめて管理することができます。

まとめ

toolbar を使ったコントロール等の表示には、以下がポイントとなります

toolbar を使うときのポイント
  • .toolbar を使って指定する
  • ToolbarItem を使うことで、1要素を定義できる
  • ToolbarItemGroup を使うことで、複数要素をまとめて定義できる
  • ToolbarContent protocol を使うことで、様々な ToolbarItem をまとめて定義できる

SwiftUI本

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、超便利です。

SwiftUIViewsMastery

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です