NavigationVIew で toolobar モディファイアを使用すると、画面上部にナビゲーションバーを、画面下部にはボトムバーを表示し、それぞれに任意のボタンを配置することができます。
例えば、ナビゲーションバーにゴミ箱のアイコンを表示してタップ時にアイテムを削除したり、ボトムバーに紙飛行機のアイコンを表示してメールの送信をするようなアプリの作成が可能です。
今回は、toolbar モディファイアについて説明します。
OS: macOS Big Sur 11.2.1
Xcode: 12.5
Swift: 5.2.4
toolbar モディファイアは、ToolBarItem と組み合わせて使用します。
toolbar モディファイアは、ToolBarItem のコンテナ（入れ物）としての役割をもち、ToolBarItem はツールバーをどこに配置するかと何（アイコンやテキストなど）を表示するかを設定します。
toolbar モディファイアと ToolBarItem を使用する基本構文を以下に示します。
NavigationView {
// List や Form など
.toolbar {
ToolbarItem(placement: 配置場所を示す値){
// Button などツールバーに配置する View
}
}
}
ToolBarItem の placement にはツールバーの配置場所を指定します。
ToolbarItem(placement: 配置場所を示す値){
// ツールバーに配置する View
}
配置場所を示す値は Positional placements と Semantic placements の２種類があります。Positional placements は位置的な配置場所を示し、Semantic placements は、その値が意味的な配置位置を示します。
Positional placements は位置的な配置場所を表します。
| 値 | 対象 OS | 説明 |
|---|---|---|
| .navigationBarLeading | iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ | ナビゲーションバーの左端に配置します |
| .navigationBarTrailing | iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ | ナビゲーションバーの右端に配置します |
| .bottomBar | iOS 14.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ | ボトムバー。NavigationView の下部に配置します。 |
Semantic placements は意味的な配置場所を示します。
| 値 | 対象 OS | 説明 |
|---|---|---|
| .automatic | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | アイテムを自動的に配置します |
| .cancellationAction | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | キャンセルアクションを配置します |
| .confirmationAction | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | 確認アクションを配置します |
| .destructiveAction | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | 破壊的アクションを配置します。「保存しない」のように確認アクションとは反対のアクション配置に使用します。 |
| .navigation | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | ナビゲーションアクションを配置します。Webブラウザの進むボタンや戻るボタンはナビゲーションアクションに相当します。 |
| .primaryAction | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ / watchOS 7.0+ | 主要なアクションを配置します。ユーザーがチャットアプリ等でメッセージを作成するようなボタンが相当します。 |
| .principal | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ / tvOS 14.0+ | 主要なアイテムを配置します。指定したタイトルよりも優先して配置されます。 |
| .status | iOS 14.0+ / macOS 11.0+ / Mac Catalyst 14.0+ | ステータス情報を配置します。ユーザーが実行できるアクションを示すのではなく、情報提供として使用します。 |
複数のアイテムをまとめるには ToolBarItemGroup を使用します。配置場所を示す値は、戦術説明したものを使用できます。
ToolbarItemGroup(placement: 配置場所を示す値){
}
上記をもとに、作成した使用例を示します。
なお、Image の systemname 引数に指定しているアイコンは SF Symbols（https://developer.apple.com/sf-symbols/）をダウンロードして使用しています。
struct ContentView: View {
var body: some View {
NavigationView {
List(0 ..< 100) { index in
Text("アイテム\(index)")
}
// NavigationView のタイトル
.navigationTitle("アイテム一覧")
// ツールバー
.toolbar {
// ナビゲーションバー左
ToolbarItem(placement: .navigationBarLeading){
Button(action: {}) {
Image(systemName: "magnifyingglass")
}
}
// ナビゲーションバー右
ToolbarItem(placement: .navigationBarTrailing){
Button(action: {}) {
Image(systemName: "ellipsis.circle")
}
}
// ボトムバー
ToolbarItemGroup(placement: .bottomBar){
Button(action: {}) {
Image(systemName: "checkmark.circle")
}
Spacer()
Button(action: {}) {
Image(systemName: "camera")
}
Spacer()
Button(action: {}) {
Image(systemName: "pencil.tip.crop.circle")
}
Spacer()
Button(action: {}) {
Image(systemName: "square.and.pencil")
}
}
}
}
}
}
ToolbarItem の色はデフォルトで青色です。これを変更するには、accentColor モディファイアを使用します。
ToolbarItem(placement: .navigationBarLeading){
// Button などの View
.accentColor(色)
}
または
NavigationView {
}
.accentColor(色)
以下は、先程の例で NavigationView 全体に accenctColor(.red) を適用して赤にしています。
struct ContentView: View {
var body: some View {
NavigationView {
List(0 ..< 100) { index in
Text("アイテム\(index)")
}
// NavigationView のタイトル
.navigationTitle("アイテム一覧")
// ツールバー
.toolbar {
// ナビゲーションバー左
ToolbarItem(placement: .navigationBarLeading){
Button(action: {}) {
Image(systemName: "magnifyingglass")
}
}
// ナビゲーションバー右
ToolbarItem(placement: .navigationBarTrailing){
Button(action: {}) {
Image(systemName: "ellipsis.circle")
}
}
// ボトムバー
ToolbarItemGroup(placement: .bottomBar){
Button(action: {}) {
Image(systemName: "checkmark.circle")
}
Spacer()
Button(action: {}) {
Image(systemName: "camera")
}
Spacer()
Button(action: {}) {
Image(systemName: "pencil.tip.crop.circle")
}
Spacer()
Button(action: {}) {
Image(systemName: "square.and.pencil")
}
}
}
}
.accentColor(.orange) // オレンジ色にする
}
}
