この記事ではツールバーのカスタマイズについて紹介します。背景の変更やタイトルのフォントの変更が可能です。
ツールバー背景色の変更（toolbarBackground）
SwiftUIのtoolbarBackground修飾子は、ツールバーの背景をカスタマイズするために使用されます。
これにより、ツールバーの背景色などを簡単に設定でき、アプリケーションの外観をカスタマイズすることが可能になります。toolbarBackgroundを使用する際は、.toolbar修飾子と組み合わせて、対象のビューに適用します。
コード例
まずはツールバーを実装します。実装したツールバーに対して”toolbarBackground”を付与したものが以下のコードです。
import SwiftUI
struct ToolbarCustom: View {
var body: some View {
NavigationStack {
Text("メインコンテンツ")
.navigationTitle("ホーム")
.toolbar {
ToolbarItem(placement: .confirmationAction) {
Button(action: {
print("アクション実行")
}) {
Image(systemName: "plus")
}
}
ToolbarItem(placement: .destructiveAction) {
Button(action: {
print("アクション実行")
}) {
Image(systemName: "trash").foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
}
}
}
//常時背景色を適用
.toolbarBackground(.visible, for: .navigationBar)
//背景色をグリーンにする
.toolbarBackground(.green,for: .navigationBar)
}
}
}
注意点
以下「.visible」を付与して常時背景色を適用しないと、リストビューなどにおいて、画面をスクロールした時のみ背景色が適用されます。
toolbarBackground(.visible, for: .navigationBar)
さらに詳細は以下のページを参照してください
ツールバータイトルのフォントを変更（toolbarTitleDisplayMode）
次は“toolbarTitleDisplayMode”の機能を紹介します。この機能は、ツールバータイトルのフォントを変更することが可能です。
設定値は以下から選ぶことが可能です。
コード例
import SwiftUI
struct ToolbarTitle: View {
var body: some View {
NavigationStack {
Text("メインコンテンツ")
.navigationTitle("ホーム")
.toolbar {
ToolbarItem(placement: .confirmationAction) {
Button(action: {
print("アクション実行")
}) {
Image(systemName: "plus")
}
}
ToolbarItem(placement: .destructiveAction) {
Button(action: {
print("アクション実行")
}) {
Image(systemName: "trash").foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
}
}
}
// ツールバータイトルのフォントを変更
.toolbarTitleDisplayMode(.large)
}
}
}設定値ごとの見た目の変化
