Customizing UINavigationBar not working because of weird UINavigationBar view hierarchy

Question

My app has many ViewControllers that are pushed on navigation stack.

I have configured UINavigationBar appearance globally in AppDelegate as below.

let appearance = UINavigationBar.appearance()
appearance.barTintColor = myColor
appearance.tintColor = .white
appearance.isTranslucent = false
let textAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white,
                      NSAttributedString.Key.font: myFont, size: mySize)]
appearance.titleTextAttributes = textAttributes as [NSAttributedString.Key : Any]

All ViewControllers work as expected except only one ViewController.

Below is one of the VCs that works as expected. It shows color and font that I want.

And below is the ViewController that shows different look unlike others.

I can't understand the reason why only one navigationBar on this VC shows different appearance.

So I've done debugging view hierarchy.

Below is the view hierarchy of VCs that works as expected.

And below is the view hierarchy of VC that shows weird look.

As seen on the picture, the problematic NavigationBar has two more layers, UIVisualEffectView and UIVisualEffectBackdropView.

I am an experienced iOS developer and have no idea why this happens.

I carefully checked all the setting related to NavigationBar on the IB but found no difference from others.

I even removed the ViewController, embedding NavigationController completely and rebuilt them from scratch without luck.

Please somebody explain me why only this NavigationBar has different structure.

I'm working on iOS 13.3 & Xcode 11.3.1

score 1 · Answer 1 · edited Sep 30 '21 at 21:10

Working here on iOS15, I tried a lot of things to customize the nav bar appearance to achieve a simple opaque color, nothing worked except this:

In viewDidLoad

if (@available(iOS 13.0, *)) {
        UINavigationBarAppearance *appearance = [UINavigationBarAppearance new];
         appearance.backgroundColor = [UIColor orangeColor];
        self.navigationController.navigationBar.standardAppearance = appearance;
        self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
}

Swift version:

let appearance = UINavigationBarAppearance()
appearance.backgroundColor = .orange
navigationBar.standardAppearance = appearance;
navigationBar.scrollEdgeAppearance = navigationBar.standardAppearance

Finally if you only want to apply this on the current controller, and restore the default nav bar just do the same but with a fresh UINavigationBarAppearance() on viewWillDisappear.

Customizing UINavigationBar not working because of weird UINavigationBar view hierarchy

1 Answers1