Set Image Underlay of Transparent Navigation Bar and Status Bar in Swift iOS 8

Question

I am new in iOS swift development and I am facing a problem. I want to set transparent navigation bar and make image underlay of transparent navigation bar and status bar like image below,

enter image description here

But after I implemented the following code,

self.navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController!.navigationBar.shadowImage = UIImage()
self.navigationController!.navigationBar.translucent = true

The result is image still below navigation bar and status bar even though I set the navigation bar to transparent.

enter image description here

possible duplicate of [Make UINavigationBar transparent](http://stackoverflow.com/questions/2315862/make-uinavigationbar-transparent) — Yuyutsu, Jul 14 '15 at 06:53

score 12 · Answer 1 · edited Feb 18 '19 at 15:26

12

If you are not using the default navigation bar, then shift your background image view (which is going to visible below the status bar) 20px up from the top constraint, then clear your status bar background color using:

 override func viewDidLoad() {
    super.viewDidLoad()

    let statusBar = UIApplication.shared.value(forKeyPath: "statusBarWindow.statusBar") as? UIView
        statusBar?.backgroundColor = UIColor.clear
}

If you want to change the status bar item's color to white then use:

 override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

The output will be

edited Feb 18 '19 at 15:26

Matt Stobbs

611
2
8
21

answered Feb 19 '17 at 06:23

bikram sapkota

1,106
1
13
18

I am using tableview controller with static cells. and the imageview is in the 0th header cell, overriding statusBarStyle makes it translucent but somehow the image starts below the status bar and i've also updated the top margin to be -20. any idea why's that so? – Usama bin Attique Jan 16 '18 at 07:21
@UsamabinAttique if you have to set a top margin to -20 you doing something wrong. Since the system bar has roughly 20 points in height. You probably connected to a safe area or to the system bar instead to the superview – Gustavo Baiocchi Costa Jan 08 '19 at 11:11

score 11 · Accepted Answer · answered Jul 14 '15 at 06:50

11

I have tried same code as you provided:

override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
    self.navigationController!.navigationBar.shadowImage = UIImage()
    self.navigationController!.navigationBar.translucent = true
}

And it is working fine and you can see result here:

enter image description here

Check my sample project and find out what are you missing.

Hope it will help.

answered Jul 14 '15 at 06:50

Dharmesh Kheni

71,228
33
160
165

3

1) The top constraint must be to `superview`, not `safe area`. 2) If you have a tableV and use ios11 add `tableV.contentInsetAdjustmentBehavior = .never` – Nike Kov Oct 05 '18 at 10:54

score 1 · Answer 3 · answered Jul 27 '16 at 14:36

1

I solved this by setting transparent UIColor for status bar background.

    guard  let statusBar = UIApplication.sharedApplication().valueForKey("statusBarWindow")?.valueForKey("statusBar") as? UIView else {
                return
            }
            statusBar.backgroundColor = UIColor(red: 2, green: 200.0, blue: 200, alpha: 0) // color value has no effect. Only alpha value is needed to make it transparent

answered Jul 27 '16 at 14:36

minhazur

4,928
3
25
27

1

Swift 5.1 iOS 13 guard let statusBar = (UIApplication.shared.value(forKey: "statusBarWindow")? as AnyObject).value("statusBar") as? UIView else { return } Cannot invoke 'value' with an argument list of type '(String)' – Marlhex Oct 30 '19 at 16:45

score 1 · Answer 4 · answered May 17 '18 at 07:18

As per Dharmesh's answer, but updated for Swift 4

    self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController!.navigationBar.shadowImage = UIImage()
    self.navigationController!.navigationBar.isTranslucent = true

Set Image Underlay of Transparent Navigation Bar and Status Bar in Swift iOS 8

4 Answers4

Linked