[SwiftUI] NavigationView の toolbar モディファイアの使用方法 

スポンサーリンク
SwiftUI SwiftUI

NavigationVIew で toolobar モディファイアを使用すると、画面上部にナビゲーションバーを、画面下部にはボトムバーを表示し、それぞれに任意のボタンを配置することができます。
例えば、ナビゲーションバーにゴミ箱のアイコンを表示してタップ時にアイテムを削除したり、ボトムバーに紙飛行機のアイコンを表示してメールの送信をするようなアプリの作成が可能です。
今回は、toolbar モディファイアについて説明します。

toolbar モディファイアの使用例

toolbar モディファイアの使用例

スポンサーリンク

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.5
Swift: 5.2.4

スポンサーリンク

toolbar モディファイアの基本使用方法

toolbar モディファイアは、ToolBarItem と組み合わせて使用します。
toolbar モディファイアは、ToolBarItem のコンテナ(入れ物)としての役割をもち、ToolBarItem はツールバーをどこに配置するかと何(アイコンやテキストなど)を表示するかを設定します。
toolbar モディファイアと ToolBarItem を使用する基本構文を以下に示します。

NavigationView {
    // List や Form など
    .toolbar {
        ToolbarItem(placement: 配置場所を示す値){
            // Button などツールバーに配置する View
        }
    }
}
スポンサーリンク

ToolBarItem の配置位置について

ToolBarItem の placement にはツールバーの配置場所を指定します。

ToolbarItem(placement: 配置場所を示す値){
    // ツールバーに配置する View
}

配置場所を示す値は Positional placements と Semantic placements の2種類があります。Positional placements は位置的な配置場所を示し、Semantic placements は、その値が意味的な配置位置を示します。

Positional 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

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 を使用します。配置場所を示す値は、戦術説明したものを使用できます。

ToolbarItemGroup(placement: 配置場所を示す値){
}
スポンサーリンク

.toolbar モディファイアの使用例

上記をもとに、作成した使用例を示します。
なお、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")
                    }
                }
            }
        }
    }
}
toolbar モディファイアの使用例

toolbar モディファイアの使用例

スポンサーリンク

ToolbarItem の色を変更する

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)  // オレンジ色にする
    }
}
ツールバーアイテムの色変更

ツールバーアイテムの色変更

コメント

タイトルとURLをコピーしました