Zenn
Open6

[SwiftUI] ナビゲーションバーの外観をカスタマイズする

iOS
SwiftUI
Yusuke AriyoshiYusuke Ariyoshi

参考記事の方法だと、全く動かないか、largeTitle 表示の時に細かい所のカスタマイズが上手く行かなかった。バージョンの問題？

Yusuke AriyoshiYusuke Ariyoshi

やりたかったことは実現できた。

ついでに戻るボタンの文字も空にした。

遷移元

    var body: some View {
        NavigationView {
            ZStack {
                NavigationLink(destination:  YourView().navigationBarColor(.blue), isActive: $isActiveEditView) {
                    EmptyView()
                }

遷移先

    func navigationBarColor(_ backgroundColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor))
    }
    
    var body: some View {
        NavigationView {
            VStack {}
        }
        .navigationBarItems(
            leading:
                HStack {
                    Button(action: { didTapGoBackButton() }, label: {
                        Image(systemName: "chevron.left")
                            .resizable()
                            .frame(width: 12, height: 19)
                    })
                }
        }
        .navigationTitle("Foo")
        .navigationBarBackButtonHidden(true)
        .navigationBarTitleDisplayMode(.inline)

import SwiftUI

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?
    
    init( backgroundColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = .clear
        coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        UINavigationBar.appearance().tintColor = .white

    }
    
    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}