In iOS13 the status bar background colour is different from the navigation bar in large text mode

Question

Pre-conditions to reproduce the problem:

1. Xcode 11 beta + iOS 13 (latest version until Jun. 12 2019)
2. The navigation bar is in Large text mode
3. Specify the colour of navigation bar.

The status bar will remain in white in a real device, above the green navigation bar.

Solutions I tried:

1. Revert it back to iOS12 will solve it, but we will encounter iOS13 eventually...
2. disabling the large text mode will solve it...
3. hide the status bar will fix it, but it will cause status text overlapping with navigation bar item.

Any ideas? appreciate any help.

Answer 1

No hacks or funkiness required here. The key is defining the desired appearance and setting this value on BOTH the nav bar's standardAppearance AND its scrollEdgeAppearance. I have the following in the init for my base navigation controller subclass for my entire app:

if #available(iOS 13.0, *) {     let navBarAppearance = UINavigationBarAppearance()     navBarAppearance.configureWithOpaqueBackground()     navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]     navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]     navBarAppearance.backgroundColor = UIColor.Theme.primary     navigationBar.standardAppearance = navBarAppearance     navigationBar.scrollEdgeAppearance = navBarAppearance } 

Answer 2

If the problem is that you'd like to give the navigation bar a color when the large title is showing, use the new UINavigationBarAppearance class.

    let app = UINavigationBarAppearance()     app.backgroundColor = .blue     self.navigationController?.navigationBar.scrollEdgeAppearance = app 

Answer 3

On iOS 13, navigation bars using large title have a transparent color per Apple human interface guidelines. See more infos here:

In iOS 13 and later, a large title navigation bar doesn’t include a background material or shadow by default. Also, a large title transitions to a standard title as people begin scrolling the content

Answer 4

I've discovered that with storyboards you have to fake the nav bar (only really works with opaque nav bars, assuming your green is opaque). The best way I found was to create a placeholder view (purple) that fits the safe area insets, and then add a fake view behind the nav bar (cyan/blue) that is the height remaining. Works for my project, but yeah it's a bit of a hack.

Edit: This is mainly for LaunchScreen.storyboard where you can't use a custom view controller class.

Answer 5

Thanks to Mike and Hans's answer. My case is half transparent status bar and nav bar with alpha 0.5. iOS13 seems complicated. Below is my test result, will work if you want transparent for both.

if #available(iOS 13.0, *) {                 let navBarAppearance = UINavigationBarAppearance()                 // This only set top status bar as transparent, not the nav bar.                 navBarAppearance .configureWithTransparentBackground()                 // This set the color for both status bar and nav bar(alpha 1).                 navBarAppearance.backgroundColor = UIColor.red.withAlphaComponent(0.5)                 navigationController?.navigationBar.standardAppearance = navBarAppearance                 navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance                 // Nav bar need sets to translucent for both nav bar and status bar to be translucent.                 navigationController?.navigationBar.isTranslucent = true                 // // Need to reset nav bar's color to make it clear to display navBarAppearance's color                 navigationController?.navigationBar.backgroundColor = UIColor.clear                }