18.4 C
New York
Monday, March 10, 2025

ios – Totally different Nav Bar Appearances for various tabs in TabView in SwiftUI


I’ve received a TabView which hosts 3 tabs (Liabilities, In/Out, and Property). Every tab has a NavigationView in it. I wish to have a unique Nav Bar Look for every (purple themed for Liabilities, white for In/Out, and green-themed for Property).

I’m able to set the background colours of the nav bars with none problem, utilizing one thing like this:

.navigationBarTitleDisplayMode(.inline)
.toolbarBackground(.seen, for: .navigationBar)
.toolbarBackground(Coloration.liabilitiesnav, for: .navigationBar)

This solely lets me set the colour of the background although, however I would like to have the ability to change the colours of the opposite parts within the nav bar. The buttons that I add to the toolbar I can management by explicitly setting their colours, in order that’s no downside. However the nav title and the again button textual content and icon are solely controllable utilizing the worldwide UINavigationBar.look() performance. However I do not desire a world look, I wish to configure the completely different tabs with completely different appearances. That is actually essential as a result of my AccentColor is a darkish inexperienced and whereas that inexperienced appears to be like good on the again button and toolbar objects on the Property tab… it’s a horrible inexperienced on purple on the Liabilities tab. That is why I would like to have the ability to management them individually.

screenshots of the nav bar and tab bar for 3 screens

I’ve tried utilizing an .onAppear { } mechanic to attempt to change the worldwide look to match the present tab every time that tab seems. For instance, on the Liabilities tab, I’ve:

NavigationView {
    Listing {
        // stuff
    }
    .onAppear {
        // tried it right here...
        NavHelper.useRedAppearance()
    }
} 
.onAppear {
    // and tried it right here as effectively
    NavHelper.useRedAppearance()
}

Nevertheless, it appears to get out of sync. It’ll begin off accurately (Liabilities = purple and Property = inexperienced) however after I click on backwards and forwards between the Liabilities and Property tabs, the updates appear to get out of sync and typically the Liabilities exhibits up inexperienced and typically the Property exhibits up purple. I added some print statements to the onAppear code and I might see that the useRedAppearance() was getting known as after I clicked on the Liabilities tab and the useGreenAppearance() was getting known as after I clicked on the Property tab… however the colours would not essentially replace each time… and thus, received out of sync.

Here’s a partial paste of NavHelper simply in case I am doing one thing incorrect in there:

class NavHelper {   

    static func useRedAppearance() {
        let textcolor = UIColor.moneyred
        let backgroundcolor = UIColor.liabilitiesnav
        
        let look = UINavigationBarAppearance()
        look.configureWithOpaqueBackground()
        look.backgroundColor = backgroundcolor
        look.titleTextAttributes = [.foregroundColor: textcolor]
        look.largeTitleTextAttributes = [.foregroundColor: textcolor]
        
        let buttonAppearance = UIBarButtonItemAppearance()
        buttonAppearance.regular.titleTextAttributes = [.foregroundColor: textcolor]
        
        let picture = UIImage(systemName: "chevron.backward")!.withTintColor(textcolor, renderingMode: .alwaysOriginal)
        look.setBackIndicatorImage(picture, transitionMaskImage: picture)
        
        look.buttonAppearance = buttonAppearance
        look.backButtonAppearance = buttonAppearance
        
        UINavigationBar.look().standardAppearance = look
        UINavigationBar.look().scrollEdgeAppearance = look
        UINavigationBar.look().compactAppearance = look
        UINavigationBar.look().compactScrollEdgeAppearance = look
        
    }

}

How can I both (a) reliably swap the worldwide look backwards and forwards with out getting out of sync, or (b) individually configure the views within the completely different tabs so they only have a set colour theme?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles