Make Uinavigationbar Transparent

Make UINavigationBar transparent

If anybody is wondering how to achieve this in iOS 7+, here's a solution (iOS 6 compatible too)

In Objective-C

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

In swift 3 (iOS 10)

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

In swift 2

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

---

Discussion

Setting translucent to YES on the navigation bar does the trick, due to a behavior discussed in the UINavigationBar documentation. I'll report here the relevant fragment:

If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image.

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
    

How to make UINavigationBar background transparent?

Okay, after struggling, I've solved the problem on my own. There was more than one problem. It wasn't about the extended edges, it was about the line self.navigationController.view.backgroundColor = [UIColor clearColor]; (which had to be self.navigationController.navigationBar.backgroundColor = [UIColor clearColor]; as Warif Akhand Rishi suggested) and also my table view's clip subviews property. I've changed that line and also turned off clipping of my table view and now it works as expected.

Changing UINavigationBar to transparent color

this is my OC code to make UINavigationBar to be completely transparent:

first set the VC to UINavigationControllerDelegate, then override - (void) navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated

    // change the backgroudcolor black
    self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:0.000 green:0.000 blue:0.000 alpha:1.000];
    // change the alpha 0.3
    self.navigationController.navigationBar.alpha = 0.300;
    // change the translucent YES
    self.navigationController.navigationBar.translucent = YES; 

mainwhile, check your code about the self.view.backgroudcolor, if any view under your UINavigationBar have a backgroudcolor, your UINavigationBar will display the view's color.

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