iOS 15 Navigation Bar Transparent

Question

My iOS app uses the storyboard for the UI and uses a custom tint for the background color of the navigation bar.

I have tested my app on the Xcode 13 beta 5 and the navigation bar is "white" and the text on the navigation bar is not visible.

In the apple developer forum at https://developer.apple.com/forums/thread/682420 it states that "In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background, to all navigation bars." To restore the old look, you must adopt the new UINavigationBar appearance APIs

I added the following code (from the link above) to the App Delegate "application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions":

        if #available(iOS 13, *) {
            let navigationController = UINavigationController(navigationBarClass: nil, toolbarClass: nil)
            let navigationBar = navigationController.navigationBar
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
            navigationBar.standardAppearance = appearance;
            navigationBar.scrollEdgeAppearance = navigationBar.standardAppearance
            navigationBar.isTranslucent = false
        }

This does not fix the problem. I still have the custom tint set in the storyboard editor for the navigation bar. Do I need to remove the custom tint or am I implementing the appearance API wrong?

Answer 1

To use your own colour scheme, use the following:

Swift

// White non-transucent navigatio bar, supports dark appearance if #available(iOS 15, *) {     let appearance = UINavigationBarAppearance()     appearance.configureWithOpaqueBackground()     UINavigationBar.appearance().standardAppearance = appearance     UINavigationBar.appearance().scrollEdgeAppearance = appearance } 

Objective-c

if (@available(iOS 15.0, *)) {     UINavigationBarAppearance *navBarAppearance = [[UINavigationBarAppearance alloc] init];   navBarAppearance.backgroundColor = [UIColor redColor];     [navBarAppearance configureWithOpaqueBackground];     [UINavigationBar appearance].standardAppearance = navBarAppearance;     [UINavigationBar appearance].scrollEdgeAppearance = navBarAppearance; } 

To get the default translucent behaviour, the way the default was before iOS 15, just set the scrollEdgeAppearance:

Swift

if #available(iOS 15, *) {     UINavigationBar.appearance().scrollEdgeAppearance = UINavigationBarAppearance() } 

Objective-C

if (@available(iOS 15.0, *)) {     [UINavigationBar appearance].scrollEdgeAppearance = [[UINavigationBarAppearance alloc] init];  } 

Answer 2

There is no need to change anything in the storyboard. Here is the solution that finally worked when added to the App Delegate application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:

//Fix Nav Bar tint issue in iOS 15.0 or later - is transparent w/o code below if #available(iOS 15, *) {     let appearance = UINavigationBarAppearance()     appearance.configureWithOpaqueBackground()     appearance.titleTextAttributes = [.foregroundColor: UIColor.white]     appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)     UINavigationBar.appearance().standardAppearance = appearance     UINavigationBar.appearance().scrollEdgeAppearance = appearance } 

Note that it was necessary to set the title text attribute to "white" as the title text defaulted to black if this attribute was not specified.

Also note that this should only apply to iOS version 15.0 or later. It does not work for earlier versions as the storyboard navigation bar custom tint is the default behavior.

Answer 3

If anyone needs the Objective C version of G. Steve's answer

if (@available(iOS 15, *)){
        UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
        [appearance configureWithOpaqueBackground];
        appearance.titleTextAttributes = @{NSForegroundColorAttributeName : UIColor.whiteColor};
        appearance.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:125/255.0 blue:0.0/255.0 alpha:1.0];
        [UINavigationBar appearance].standardAppearance = appearance;
        [UINavigationBar appearance].scrollEdgeAppearance = appearance;
    }

Answer 4

It get sorted for me in interface builder (xcode 13 - tested for iOS 13 and above) and did not need to check for iOS 15 availability (i.e. @available)

1. Choose standard and scroll edge appearances for the navigation bar.

2. Choose similar settings for both appearances

Good luck