ツールバーの背景色のカスタマイズtoolbarBackgroundの活用方法

toolbarBackgroundは、SwiftUIでツールバーの背景色をカスタマイズするためのモディファイアです。このモディファイアを使用すると、ツールバーの見た目をカスタマイズできます。

iOS：16.0以上
XCode（当サイトの環境）：15.0.1

以下では、基本的な使い方から応用例までを解説します。

toolbarBackgroundのパラメータについて
ツールバーの背景色の変更
1. 基本的な変更方法
2. 不透明度の設定
ツールバー上部とタブバーの背景色を変更したい
注意点まとめ
まとめ

toolbarBackgroundのパラメータについて

toolbarBackgroundには2つのパラメータがあります。

style: 背景として使用するスタイル（色、グラデーション、カスタムビューなど）
bars: 背景を適用するツールバーの種類（navigationBar、tabBarなど）

ツールバーの背景色の変更

基本的な変更方法

まずはnavigationBarに色（サンプルではグリーン）を指定してみます。

import SwiftUI

struct ToolbarBackground: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(1..<50) { item in
                    Text("ITEM \(item)")
                }
            }
            .navigationTitle("HOME")
            
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    Button(action: {
                        print("Confirm")
                    }) {
                        Text("確定")
                    }
                }
            }
            // toolbarの背景色を変更
            .toolbarBackground(.green, for: .navigationBar)
        }
    }
}

適用した時の画面

左の画像のように画面上部のツールバーがグリーンに変更されました。

右側の画像はリストを上部までスクロールした時の表示です。背景色が外れる仕様のようです。

スクロールした時も背景色を適用したい

リスト上部までスクロールした時に背景色が外れてしまう仕様に対応したい時は、以下のように.visibleを適用してください。

// toolbarの背景色を変更
.toolbarBackground(.green, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)

不透明度の設定

背景の不透明度を調整する場合は、opacityメソッドを使います。

// toolbarの背景色を変更
.toolbarBackground(.green.opacity(0.5), for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)

ツールバー上部とタブバーの背景色を変更したい

以下は、画面下部に”ホーム”と”設定”タブを表示して、タップすると画面を切り替えられるビューです。

toolbarBackgroundを使うと、タブバーの背景色を変更することもできます。

以下のように背景色を変更する対象を指定するbarsパラメータに、”.tabBar”を指定します。このパラメータは複数指定することが可能です。

// toolbarの背景色を変更
.toolbarBackground(.green, for: .navigationBar, .tabBar)

struct ToolbarBackground: View {
    var body: some View {
        TabView {
            Group {
                HomeTab()
                    .tabItem {
                        Label("HOME", systemImage: "house")
                    }
                    
                SettingTab()
                    .tabItem {
                        Label("SETTING", systemImage: "gearshape")
                    }
            }
        }
    }
    
    struct HomeTab: View {
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<50) { item in
                        Text("ITEM \(item)")
                    }
                }
                .navigationTitle("HOME")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button(action: {
                            print("Confirm")
                        }) {
                            Text("確定")
                        }
                    }
                }
                // toolbarの背景色を変更
                .toolbarBackground(.green, for: .navigationBar, .tabBar)
            }
        }
    }
    struct SettingTab: View {
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<50) { item in
                        Text("ITEM \(item)")
                    }
                }
                .navigationTitle("SETTING")
            }
        }
    }
}