Question 174369 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to change the color of the navigation bar (navBar) in IOS 15

How do I change the navBar color to red in SwiftUI using an extension I want to apply to my view?

My extensions

    func createToolbarSettings(dismissAction: (() -> Void)?, title: LocalizedStringKey, tag: String) -> some View {
        self.toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    dismissAction?()
                }, label: {
                    Image.arrowBack
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: .genericFrame, height: .genericFrame)
                })
                .tag(tag)
            }
            ToolbarItem(placement: .principal) {
                Text(title)
                    .font(.montserratFontMapping(ofSize: .genericFrame, weight: .medium))
                    .foregroundColor(.white)
            }
        })
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    struct NavigationBarModifier: ViewModifier {
    
    var backgroundColor: UIColor?
    var titleColor: UIColor?
    
    init(backgroundColor: UIColor?, titleColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor ?? .white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor ?? .white]
        
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    }
    
    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}

extension View {
    
    func navigationBarColor(backgroundColor: UIColor?, titleColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, titleColor: titleColor))
    }
    
}

    this work


  2. 0

    For this you can create a custom modifier that applies the desired appearance to the navigation bar.You can do this by

        extension View {
func redNavigationBar() -> some View {
    self.modifier(RedNavigationBarModifier())
}}


    struct RedNavigationBarModifier: ViewModifier {
func body(content: Content) -> some View {
    content
        .navigationBarColor(.red)
}}

    You can then use the redNavigationBar() modifier on any view to apply the red navigation bar color.I have updated your code

        func createToolbarSettings(dismissAction: (() -> Void)?, title: LocalizedStringKey, tag: String) -> some View {
self.toolbar(content: {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {
            dismissAction?()
        }, label: {
            Image.arrowBack
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: .genericFrame, height: .genericFrame)
        })
        .tag(tag)
    }
    ToolbarItem(placement: .principal) {
        Text(title)
            .font(.montserratFontMapping(ofSize: .genericFrame, weight: .medium))
            .foregroundColor(.white)
    }
})
.redNavigationBar() } // Apply the red navigation bar color
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search