Transparent UINavigationBar in Swift

Question

I am trying to make my UINavigationBar in UINavigationController transparent. I created a subclass of UINavigationController and liked it to a scene in my storyboard file. Here's a piece of my subclass:

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    let size = self.navigationBar.frame.size
    self.navigationBar.setBackgroundImage(imageWithColor(UIColor.blackColor(), size: size, alpha: 0.2), forBarMetrics: UIBarMetrics.Default)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func imageWithColor(color: UIColor, size: CGSize, alpha: CGFloat) -> UIImage {
    UIGraphicsBeginImageContext(size)
    let currentContext = UIGraphicsGetCurrentContext()
    let fillRect = CGRectMake(0, 0, size.width, size.height)
    CGContextSetFillColorWithColor(currentContext, color.CGColor)
    CGContextSetAlpha(currentContext, alpha)
    CGContextFillRect(currentContext, fillRect)
    let retval: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return retval
}

When I run my application a have a navigation bar transparent, but status bar is just black.

For example if I do such thing on UITabBar - it works.

Ashish Kakkad · Answer 1 · 2019-06-13T12:43:18.197

120

Hope it help you

Swift 2:

self.navigationController.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
self.navigationController.navigationBar.shadowImage = UIImage()
self.navigationController.navigationBar.isTranslucent = true
self.navigationController.view.backgroundColor = UIColor.clearColor()

Swift 4.2 to Swift 5.1

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = UIColor.clear

Or If you want to sublcass the navigation controller then refer this answer.

Change the status bar style via :

In your Info.plist you need to define View controller-based status bar appearance to any value.

enter image description here

UIApplication.shared.statusBarStyle = .lightContent

If you want to hide the status bar:

UIApplication.shared.isStatusBarHidden = true

Getting this output by light content and by transparent navigation. I have view background is gray. you can see the transparency.

enter image description here

iPhone XR - Swift 4.2 - Large Titles (Test Screenshot)

edited Jun 13 '19 at 12:43

answered May 30 '15 at 11:41

Ashish Kakkad

23,586
12
103
136

1

What do you mean by transparent then ? @NikitaZernov Transparent = clear color. you can see only titles and button. – Ashish Kakkad May 30 '15 at 12:02
He want to make his status bar transparent. – Dharmesh Kheni May 30 '15 at 12:10
@NikitaZernov see the updated answer. I could not understand actual issue. I have added code for status bar – Ashish Kakkad May 30 '15 at 12:23
Also make sure ViewController's "Under Top Bar" feature is checked – Ozgur Sahin Dec 28 '15 at 21:19
@NikitaZernov add opacity from color to 50% – Neeraj Joshi Apr 19 '17 at 07:13
Note that you should also add a `self.navigationController?.navigationBar.backgroundColor = UIColor.clear` line in order to make the navigation bar transparent. – Artem M Jun 30 '17 at 09:47
Not working properly with iOS 11 `prefersLargeTitles` set to true. – Tulleb Nov 26 '17 at 19:49
@3000 Tested in iOS 12.1 - Swift 4.2 - iPhone XR Working Fine. – Ashish Kakkad Feb 28 '19 at 06:54
@Tulleb Working fine in iOS 12. Please check screenshot with large titles. Let me know if you have any issues. – Ashish Kakkad Feb 28 '19 at 06:56
@AshishKakkad: I'm investigating, maybe this is something related to other things, eg. extended top edges, etc. – 3000 Feb 28 '19 at 07:27
Doesn't work for me... I don't know what I missed... – Shahabuddin Vansiwala Oct 07 '20 at 05:29

score 32 · Answer 2 · edited Sep 28 '16 at 18:54

If you're using Swift 2.0 uses the code block below:

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

For Swift 3.0 use:

navigationController?.setNavigationBarHidden(false, animated: true)
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true

Jeff Gu Kang · Answer 3 · 2016-11-08T13:12:53.553

6

Swift 3.0.1 with Xcode 8.1

In your UINavigationController

override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    self.navigationBar.shadowImage = UIImage()
    self.navigationBar.isTranslucent = true
    self.view.backgroundColor = UIColor.clear
}

edited Nov 08 '16 at 13:12

answered Nov 08 '16 at 12:12

Jeff Gu Kang

4,749
2
36
44

score 5 · Answer 4 · answered Dec 15 '16 at 07:43

Xcode 8.x : Swift 3: Extension for the same Write once use throughout

extension UINavigationBar {

    func transparentNavigationBar() {
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
    }
}

score 5 · Answer 5 · edited Jun 14 '17 at 21:14

Create an extension of UINavigationController and present or hide transparent navigation bar.

extension UINavigationController {

    public func presentTransparentNavigationBar() {
        navigationBar.setBackgroundImage(UIImage(), for:UIBarMetrics.default)
        navigationBar.isTranslucent = true
        navigationBar.shadowImage = UIImage()
        setNavigationBarHidden(false, animated:true)
    }

    public func hideTransparentNavigationBar() {
        setNavigationBarHidden(true, animated:false)
        navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImage(for: UIBarMetrics.default), for:UIBarMetrics.default)
        navigationBar.isTranslucent = UINavigationBar.appearance().isTranslucent
        navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
    }
}

This is not correct, calling `setNavigationBarHidden` will also hide back button and navigation item, that's not what OP wants — Adam, Aug 04 '20 at 08:39

score 0 · Answer 6 · edited Jan 07 '19 at 03:51

I tried all methods above and still got white space instead of content that supposed to be rendered through. If you want to draw regular subview (Google map f.e.), not UIScrollView content through navigation bar, then you need to set subview's frame in viewDidAppear. So step 1:

existingNavigationBar.setBackgroundImage(transparentImageFromAssets, for: .default)
existingNavigationBar.shadowImage = transparentImageFromAssets
existingNavigationBar.isTranslucent = true

step 2:

override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
      self.mapView.frame = UIScreen.main.bounds
  }

This worked for me.

Transparent UINavigationBar in Swift

6 Answers6

Linked