Search code examples
iosswiftuinavigationcontrolleruikituitabbarcontroller

TabBar and NavigationBar do not change colors


I have run into some issues running xcode 14 and ios 16.

The navigation bar does not change colors, and the Tab Bar is the same color as the background (I think it should have a different tint).

class MainTabController: UITabBarController {
    
    // MARK: - Properties
    
    // MARK: - Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureViewControllers()
    }
    
    // MARK: - Helpers
    func configureViewControllers() {
        let feed = FeedController()
        let nav1 = templateNavigationController(image: UIImage(named: "home_unselected"), rootViewController: feed)
        
        let explore = ExploreController()
        let nav2 = templateNavigationController(image: UIImage(named: "search_unselected"), rootViewController: explore)
        
        let notifications = NotificationsController()
        let nav3 = templateNavigationController(image: UIImage(named: "search_unselected"), rootViewController: notifications)
        
        let conversations = ConversationsController()
        let nav4 = templateNavigationController(image: UIImage(named: "search_unselected"), rootViewController: conversations)
        
        viewControllers = [nav1, nav2, nav3, nav4]
    }
    
    func templateNavigationController(image: UIImage?, rootViewController: UIViewController) -> UINavigationController {
        
        let nav = UINavigationController(rootViewController: rootViewController)
        nav.tabBarItem.image = image
        nav.navigationBar.barTintColor = .white
        
        return nav
    }
}

How it looks How it should look like

I have tried setting the appearance of the navigation bar:

        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .white
        nav.navigationBar.standardAppearance = appearance
        nav.navigationBar.scrollEdgeAppearance = nav.navigationBar.standardAppearance

this seems a bit redundant, and do you have to do this everytime for each nav controller?


Solution

  • No, you don't have to do this for each Navigation Controller.

    You can make an extension of UINavigationBar.

    extension UINavigationBar {
        
        static func create() {
            let navBarAppearance = UINavigationBarAppearance()
            navBarAppearance.configureWithOpaqueBackground()
            navBarAppearance.backgroundColor = .white
            appearance().standardAppearance = navBarAppearance
            appearance().scrollEdgeAppearance = navBarAppearance
            appearance().compactAppearance = navBarAppearance
        }
    }
    

    and call UINavigationBar.create() from your application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool

    Similar approach can be done for the UITabBar