SwiftUIでツールバーを使用する方法は、アプリのナビゲーションやアクションをユーザーに提供する手段です。
SwiftUI 2.0以降、.toolbarモディファイアを使用して、ビューにツールバーを追加できます。ツールバーには、ボタン、テキスト、ピッカーなど、さまざまな種類のアイテムを配置できます。
toolbarについて
toolbarモディファイアを使用することで簡単に実装することができます。
なお、類似のモディファイアであるnavigationBarItemsは、iOS13.0以降非推奨となり、toolbarで代替するようappleデベロッパーより案内されています。https://developer.apple.com/documentation/swiftui/view/navigationbaritems(leading:trailing:)
基本的なツールバーの追加
toolbarの最もシンプルな使い方は以下のような使い方です。
NavigationView以下のコンテンツにtoolbarを適用し、ツールバーに配置したいコンテンツをtoolbar{}内に記述していきます。
下記のコード例では、見た目のみ整えたものですが、ボタンやナビゲーションリンクの動作を定義すれば通常のボタンのように動作させることができます。
import SwiftUI
struct ToolBarSample: View {
var body: some View {
NavigationView {
Text("Hello World!")
//Navigation以下のコンテンツにtoolbarを適用できる
.toolbar {
// 以下のような基本的なViewはtoolbar内で使用することができる
HStack {
Text("テキスト")
Button("ボタン") { }
NavigationLink("ナビゲーションリンク") {}
}
}
}
}
}
複数のツールバーアイテムの追加
複数のツールバーアイテムを追加するには、複数のToolbarItemを.toolbarモディファイア内に配置します。
ツールバーにアイテムを配置する際は、HStackなども使用可能ですが、ToolbarItemを使用して配置するのが一般的なようです。
import SwiftUI
struct ToolBarSample: View {
var body: some View {
NavigationView {
Text("Hello World!")
//Navigation以下のコンテンツにtoolbarを適用できる
.toolbar {
//場所の指定をせずにアイテムを配置
ToolbarItem() {//placement: .navigationBarLeading) {
Text("テキスト")
}
//アイテムをキャンセルアクションの位置に配置
ToolbarItem(placement: .cancellationAction) {
Button("ボタン") { }
}
//アイテムを確認アクションの位置に配置
ToolbarItem(placement: .confirmationAction) {
NavigationLink("ナビゲーション") {}
}
//複数のツールバーのアイテムをグループとする
//画面した部分に配置する
ToolbarItemGroup(placement: .bottomBar) {
Button(action: {}) {
Image(systemName: "doc.badge.plus")
.resizable()
.scaledToFit()
.frame(width: 50, height: 50)
}
Button(action: {}) {
Image(systemName: "calendar")
.resizable()
.scaledToFit()
.frame(width: 50, height: 50)
}
}
}
}
}
}
配置方法について
ToolbarItemのplacementプロパティを使用して、ツールバーアイテムの配置を指定できます。
利用可能な配置には
などがあります。
ToolbarItemやToolbarItemGroupのパラメータにおけるplacementで配置を指定することができます。placementに指定する値は以下のページが参考になります。
ツールバーのカスタマイズ
プログラム例にも記載のとおり、ツールバーアイテムには、Buttonの他にもText、Image、Pickerなど、さまざまなビューを使用できます。これにより、アプリの機能やデザインに合わせたツールバーを作成できます。
