NavigationSplitViewにおけるツールバーボタンの削除

この記事は約5分で読めます。
  • iOS:16.0以上
  • XCode(当サイトの環境):15.0.1

本記事ではNavigationSplitViewにおけるツールバーボタンを削除したりカスタマイズする方法を紹介します。

カスタマイズするには.toolbar(removing: .sidebarToggle)を使用します。デフォルトで追加されるツールバーボタンを削除することも可能です。

ツールバーボタンの削除

まずは、ツールバーボタンの削除方法です。以下のモディファイアをサイドバーに付与するとボタンが削除されます。

.toolbar(removing: .sidebarToggle)

削除した時の見た目

ツールバーボタンを新たに追加

先述のようにボタンを削除するだけでは、サイドバーが使用できなくなってしまうため、あまり実用性がありません。デフォルトのボタンを削除した上で新たにボタンを追加してみましょう。

サンプルコード

サンプルコードは、サイドバー、コンテンツビュー、ディテールビューの3カラムを表示するプログラムです。

デフォルトではサイドバーを展開、閉じるボタンが表示されます。この展開と閉じるボタンを独自のボタンに置き換えてみましょう。

プログラムのポイント

NavigationSplitViewのサイドバー部分に以下を付与しツールバーを削除します。

16行目:.toolbar(removing: .sidebarToggle)

さらに18行目付近でサイドバーを閉じるためのボタンとして新たにツールバーを追加しています。

18行目以降:.toolbar {...

32行目付近でサイドバーを展開するためのボタンをディテールビューに追加します。

32行目以降:.toolbar {...
import SwiftUI

struct NavigationSplitViewSmp4: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    let fruitsImg: [String] = ["🍎", "🍌", "🍊"]
    @State private var selected: String?
    @State private var selectedImg: String?
    @State private var columnVisibility =
    NavigationSplitViewVisibility.all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(fruits, id: \.self, selection: $selected) { fruit in
                Text(fruit)
            }
            // サイドバーボタンを削除できる
            .toolbar(removing: .sidebarToggle)
            // 新たにサイドバーボタンを追加
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("Close") {
                        columnVisibility = .detailOnly
                    }
                }
            }
        } content: {
            List(fruitsImg, id: \.self, selection: $selectedImg) { fruitImg in
                Text(fruitImg)
            }
        } detail: {
            Text("選択したフルーツ:" + (selected ?? "未選択") + (selectedImg ?? "未選択"))
                // サイドバーを展開するボタン
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Open") {
                            columnVisibility = .all
                        }
                    }
                }
        }
    }
}

ツールバーを置き換えた時の見た目

以下のようにCloseボタンとOpenボタンに置き換わりました。

まとめ

NavigationSplitViewのツールバーボタンをカスタマイズする方法を紹介しました。この機能を使うことで、ボタンの見た目や動作をカスタマイズし、独自のレイアウトや機能を実装することができるようになります。

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