Transparent iOS Navigation Bar

Transparent iOS navigation bar

You can apply Navigation Bar Image like below for Translucent.

Objective-C:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

Swift 3:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear
    

Transparent navigation bar iOS 13

Works for me:

self.compactAppearance = appearance
self.standardAppearance = appearance
self.scrollEdgeAppearance = appearance
self.backgroundColor = appearance.backgroundColor

How to set a transparent navigation bar? iOS 11 swift 4 Xcode 9

Use following code:

navigationController?.navigationBar.isTranslucent = true

Hope it will help you.

Edit (UPDATE)

Use Below Code:

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

UPDATE 2

override func viewDidAppear(_ animated: Bool) {

        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.tintColor = .red
    }

It have to be work.

How can I make the Navigation Bar transparent?

Try this:

extension UIViewController {
    func blurNav(withAlpha alpha:CGFloat = 1.0 ) {
        let statusBarHeight = view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
        let rect = navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight)) ?? .zero
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blurView.frame = rect
        blurView.isUserInteractionEnabled = false
        blurView.alpha = alpha
        blurView.layer.zPosition = -1
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationController?.navigationBar.addSubview(blurView)
        navigationController?.navigationBar.sendSubviewToBack(blurView)
    }
}

Usage:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    blurNav(withAlpha: 0.8)
}

---

Related Topics