18 Jun 2021
1 min read

Tinting navigation bars and tab bars in iOS 15

It was never really simple to set the background colour of UINavigationBar or UITabBar. The most common way is to set the colour on their appearance proxies at startup time, e.g. in application(_:didFinishLaunchingWithOptions:).

UITabBar.appearance().barTintColor = UIColor.red
UINavigationBar.appearance().barTintColor = UIColor.red

Even with the arrival of SwiftUI this did not get any better. Even though there are "new" views NavigationView and TabView, they are backed up by UINavigationBar and UITabBar and there is no API to set their background colour, so you still need to set the colour on the appearance proxy.

However in iOS 15 this hack no longer works! You now have to use the UIBarAppearance introduced in iOS 13, and its subclasses UINavigationBarAppearance and UITabBarAppearance.

Here is an example for setting the background colour of the navigation bar.

let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithOpaqueBackground()
navigationBarAppearance.backgroundColor = UIColor.red
UINavigationBar.appearance().standardAppearance = navigationBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance

Let's hope Apple exposes a nice SwiftUI API to do this soon.

Source

I hope you enjoyed this article

If you notice any mistakes or issues in this article, please let me know at dev@janagrill.io.
Tagged with: