Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS: Specify status bar text color when using UINavigationBarAppearance now barstyle is ignored

Problem

I have an app that has different colour navigation bars for different flows. Some navigation bars have a light background and require black status bar text. Others have a darker navigation bar and require white status bar text.

As part of the move to iOS15 I have updated an app I am working on to use the UINavigationBarAppearance approach to navigation bar styling. I am able to style everything as I could before other than the status bar color.

Previously I have been using the barStyle property on navigation bar to set the status bar text color.

navigationBar.barStyle = .black

This does not appear to work when using UINavigationBarAppearance.

Sample code

Old styling approach

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let navigationBar = navigationController?.navigationBar
        
        // Style using old approach
        navigationBar?.barTintColor = UIColor.purple
        navigationBar?.titleTextAttributes = [.foregroundColor: UIColor.white]
        
        // Use barStyle to set status bar text color to white
        // This only work when using the old styling approach
        navigationBar?.barStyle = .black
    }

enter image description here

New styling approach

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let navigationBar = navigationController?.navigationBar
        
        // Style nav bar using new Appearance API
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.backgroundColor = UIColor.purple
        navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]

        navigationBar?.standardAppearance = navBarAppearance
        navigationBar?.scrollEdgeAppearance = navBarAppearance
        
        // Use barStyle to set status bar text color to white
        // This only work when using the old styling approach
        navigationBar?.barStyle = .black
    }

enter image description here

Alternatives

Force dark/light mode on the navigation bar

It is possible to make the status bar text white using the property overrideUserInterfaceStyle. To make the status bar text white, set

navigationBar.overrideUserInterfaceStyle = dark

However, this results in menus from buttons in the nav bar in dark mode too which is not what I want.

enter image description here

Subclass UINavigationController

I imagine I could also subclass UINavigationController and explicitly override the preferredStatusBarStyle to force black or white text.

Having to use a subclass everywhere we make new navigation controllers just to specify the status bar text color seems a bit extreme.

Anything else?

I'm not sure if there is a better approach to this?

like image 922
bencallis Avatar asked Oct 01 '21 11:10

bencallis


People also ask

How do I change the color of my status bar on my Iphone?

Go to the Storyboard. Select the View and in the Attributes Inspector change the Background Color to Light Gray. Build and Run the Project. The default style of the status bar is dark content.

How do I change the color of my status bar in swift 5?

If you are using Storyboard , go to the NavigationController , select the navigationBar , click on the Attributes Inspector , then change the style . if you need light content (white status bar) set it anything except default lets say set style black And if you want dark content (black status bar) set it default .

How do I change the color of text in status bar in Objective C?

Go to Project -> Target , Then set Status Bar Style to Light . It makes status-bar white from the launch screen. Then set View controller-based status bar appearance equal to NO in Info.

How to change the status bar style with white content?

The default style of the status bar is dark content. The style of the status bar can be changed to a status bar with white content. Go to the ViewController.swift file and add the following lines of code. The preferredStatusBarStyle property is set to lightContent.

How do I change the status bar color in Swift?

Build and Run the Project. The default style of the status bar is dark content. The style of the status bar can be changed to a status bar with white content. Go to the ViewController.swift file and add the following lines of code. The preferredStatusBarStyle property is set to lightContent.

Why is the status bar dark in my iOS project?

Build and Run the project, The content of the status bar is dark again, which is the default. The reason for this is, iOS asked for the style of the status bar of the navigation controller instead of the contained view controller.

How to change the color of the status bar in Revit?

Select the Navigation Bar and in the Attribute Inspector set the Bar Tint color to red. The Storyboard will look like this. Build and Run the project, The content of the status bar is dark again, which is the default.


2 Answers

I was able to set the status bar text white using:

navController.navigationBar.overrideUserInterfaceStyle = .dark

Note that bencallis, the creator of this question, warns that this solution "results in menus from buttons in the nav bar in dark mode too which is not what I want". I don't use menus like this so that is not a problem for me. Maybe it's not for you too.

like image 162
pbm Avatar answered Oct 27 '22 02:10

pbm


I use both barStyle and overrideUserInterfaceStyle with UINavigationBarAppearance

// statusBarStyle is .black or .default
if case .black = statusBarStyle {
     navigationController?.navigationBar.overrideUserInterfaceStyle = .dark
} else {
    navigationController?.navigationBar.overrideUserInterfaceStyle = .light
}
navigationController?.navigationBar.barStyle = statusBarStyle

See how it works:

enter image description here enter image description here

like image 37
Chu Thin Avatar answered Oct 27 '22 02:10

Chu Thin