Transparent UINavigationBar in Swift

Question

I am trying to make my UINavigationBar in UINavigationController transparent. I created a subclass of UINavigationController and liked

Answer 1

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.

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.

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

Answer 2

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
    }
} 

Answer 3

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
}

Answer 4

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

Answer 5

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
    }
}

Answer 6

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.