CODEWITHSUNDEEP
swiftuinavigationbaruistatusbar
Melchior
Melchior

Reputation: 259

Status bar and navigation bar does not seems to have the same color iOS Swift

I want to set the status bar color the same color as the navigation bar. when I try to set the navigation and status bar to the same color the navigation bar always appear in a lighter color than the status bar.

This is what I want:

enter image description here

My result:

enter image description here

Code in AppDelegate:

Status bar: 

UIApplication.sharedApplication().statusBarStyle = .Default
    let statusBar: UIView = UIApplication.sharedApplication().valueForKey("statusBar") as! UIView
    if statusBar.respondsToSelector(Selector("setBackgroundColor:")) 
{
      statusBar.backgroundColor = UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0)
      statusBar.tintColor = UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0)
}

Navigation bar:

UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]
        UINavigationBar.appearance().backgroundColor = UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0)
        UINavigationBar.appearance().tintColor = UIColor.whiteColor()
        UIApplication.sharedApplication().statusBarHidden = false
        UIApplication.sharedApplication().statusBarStyle = .Default

Could anyone give me any suggestion on how to solve this problem.

Thanks in advance!

Upvotes: 4

Views: 12216

Answers (6)

EagleBeagleBagel
EagleBeagleBagel

Reputation: 41

For anyone who ended up here a little later, like myself (Xcode 13.1, iOS 15.1), this may help:

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

It's all about defining the appearances for both standardAppearance and scrollEdgeAppearance and setting their respective background colors.

Personally, did not even need to solve this programmatically: Navigation Bar Attributes

Upvotes: 1

Sahana Kini
Sahana Kini

Reputation: 572

To achieve the desired result, set the status bar style to default and set the UINavigationBar.appearance().barTintColor to the required color.

UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]
UINavigationBar.appearance().barTintColor = UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0)
UIApplication.sharedApplication().statusBarStyle = .Default

Upvotes: 1

matt
matt

Reputation: 535989

Warning! Do not do any of this in iOS 13 or later, and definitely not in iOS 15 or later. This is outdated code from long ago!

I was able to get the desired result:

enter image description here

Here's the code I used (Swift 3):

let app = UINavigationBar.appearance()
// nav bar color => your color
app.barTintColor = UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0)
app.isTranslucent = false
// status bar text => white
app.barStyle = .black
// nav bar elements color => white
app.tintColor = .white
app.titleTextAttributes = [NSForegroundColorAttributeName:UIColor.white]

This line in your code is illegal and will likely get your app banned from the App Store:

let statusBar: UIView = UIApplication.sharedApplication().valueForKey("statusBar") as! UIView

For the status bar, its color in iOS these days is clear. There is no need to set its color, and you are not supposed to do so. The navigation bar is extended up behind the status bar, and thus they will always have the same color because what you are seeing is always the same interface object, the navigation bar.

As for setting the navigation bar's color, don't forget that it is translucent by default. You cannot set its color accurately without making it opaque. Also, you should not be setting its backgroundColor. You should either set its barTintColor or else give it a background image (that is the way to get the best control over its color).

Upvotes: 8

Collin Zhang
Collin Zhang

Reputation: 513

I have encountered the same problem and I have found that it is not the problem of the status bar but the navigation bar. If you set the background color of navigation bar and a simple UIView to the same, the real color shown will be different. To make the color of navigation bar same as another view:

Wrong Code 

navigationBar.backgroundColor = .blue
view.backgroundColor = .blue

Right Code 

navigationBar.isTranslucent = false
navigationBar.barTintColor = .blue
view.backgroundColor = .blue

In this case, their color will be the same.

Upvotes: 0

Hashem Aboonajmi
Hashem Aboonajmi

Reputation: 13900

based on @matt suggestion to extend navigationbar below status bar, navigation bar must be opaque:

    let navigationBar = navigationController?.navigationBar
    navigationBar?.isOpaque = true
    navigationBar?.setBackgroundImage(UIImage(color: UIColor(white: 0, alpha: 0.5)), for: .default)
    navigationBar?.shadowImage = UIImage()

extension UIImage {

    convenience init?(color: UIColor) {
        let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context?.setFillColor(color.cgColor)
        context?.fill(rect)

        let image: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        guard let cgImage = image?.cgImage else { return nil }
        self.init(cgImage: cgImage)
    }
}

Upvotes: 1

Renner Leite Lucena
Renner Leite Lucena

Reputation: 41

For me the key was to change the isTranslucent attribute:

navigationBar.isTranslucent = false
navigationBar.barTintColor = PlateColors.mainRed
navigationBar.backgroundColor = PlateColors.mainRed

Upvotes: 4

Related Questions