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

2
votes

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!

5
swiftuinavigationbaruistatusbar
set colour of View with the same colour of navigation and this will do what you want – Hosny
Is it not as simple as the fact you're using whiteColor as the tint on UINavigationBar and UIColor(red: 43/255.0, green: 79/255.0, blue: 133/255.0, alpha: 1.0) on status bar – StudioTime
Update yourself to Swift 3, please. – matt
Yes that is the next step, the current version is in Swift 2.3. After upgrading to Swift 3.0 some feature does not work anymore that's the reason why I left it in Swift 2.3. But we already busy fixing the issues. Since we need to hands it in as soon as possible this was the only solution to leave it in Swift 2.3. – Melchior

5 Answers

1
votes

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

8
votes

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).

4
votes

For me the key was to change the isTranslucent attribute:

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

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)
    }
}
0
votes

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.