SwiftUIでナビゲーションバー（NavigationView）の色を変更する

f:id:bamboohero:20210520091836p:plain 現状のSwiftUIではナビゲーションバー（NavigationView）の色を変更するModifierが提供されていません。

しかし、ナビゲーションバーの色を変更したいモチベーションは多々あると思います。

本記事では、ViewModifierを使ってナビゲーションバーのスタイルを変更する方法についてご紹介します。

ナビゲーションバーのスタイルを変更するViewModifierを実装する
- コードの解説
ステータスバーの文字色を変更する
参考記事

ナビゲーションバーのスタイルを変更するViewModifierを実装する

ViewModifierというのは、複数のModifierを一つにまとめてスタイリングの処理を共通化するための仕組みです。

https://developer.apple.com/documentation/swiftui/reducing-view-modifier-maintenance

以下のようにカスタムModifierを実装します。

struct NavigationBarModifier: ViewModifier {
    let backgroundColor: UIColor

    init(backgroundColor: UIColor) {
        self.backgroundColor = backgroundColor

        // [1]
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

        // [2]
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        UINavigationBar.appearance().tintColor = .white
    }

    func body(content: Content) -> some View {
        // [3]
        content
//        ZStack{
//            content
//            VStack {
//                GeometryReader { geometry in
//                    Color(backgroundColor)
//                        .frame(height: geometry.safeAreaInsets.top)
//                        .edgesIgnoringSafeArea(.top)
//                    Spacer()
//                }
//            }
//        }
    }
}

extension View {
    func navigationBarColor(_ backgroundColor: UIColor) -> some View {
        modifier(NavigationBarModifier(backgroundColor: backgroundColor))
    }
}

ナビゲーションバーの色を変更したいときは以下のように実装します。

NavigationView {
    Text("Hello")
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarColor(.blue)
}

f:id:bamboohero:20210520011853p:plain:w300

コードの解説

[1]
SwiftUIではナビゲーションバーの色を変更する手段が用意されていないので、UIKitの仕組みを使います。UINavigationBarAppearanceはiOS13で追加された、ナビゲーションバー周りの見た目を変更するためのオブジェクトです。ここでbackgroundColorに引数で渡された色を指定しておきます。

[2]
UINavigationBar.appearance()に対して先に作成したUINavigationBarAppearanceオブジェクトを適用します。なお、UINavigationBar.appearance()に対して変更をあてると全てのナビゲーションバーに反映されてしまいます。画面によってナビゲーションバーの色が異なる場合、常に色の指定をしておく必要があります。

[3]
参考記事ではコメントアウトしている部分の実装がされているのですが、実際動かしてみたところこのコードがなくてもナビゲーションバーの色は変更されました。いまいち必要性がわかっていないのですが、今後何か判明したら追記しようと思います。