如何使UINavigationBar背景透明？

Question

First of all, I've seen all the answers at How to make UINavigationBar Transparent in IOS 8? Transparent UINavigationBar and Make UINavigationBar transparent .

They just don't seem to work for me.

My regular view controller (before trying to make the navigation bar transparent) doesn't have any issues:

I'm using (tried both in viewDidLoad and viewWillAppear: ):

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                              forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

I'm getting this:

Gray status bar background, completely white navigation bar which doesn't blend with the status bar, and then the view starts. All the 'solutions' at the other questions' answers' yield the same result for me.

I've also tried setting self.edgesForExtendedLayout = UIRectEdgeNone; or self.edgesForExtendedLayout = UIRectEdgeAll; but that also didn't have any impact.

How can I make my navigation bar transparent without messing up everything?

UPDATE: Following Warif Akhand Rishi's answer, I've changed self.navigationController.view.backgroundColor = [UIColor clearColor]; to self.navigationController.navigationBar.backgroundColor = [UIColor clearColor]; , now I'm getting a gray, unified status/navbar, but still not transparent:

UPDATE 2: I've hooked up the view debugger, and that gray background seems to come from deep down from the roots of view hierarchy, and my view's content is not extending up. I've tried self.edgesForExtendedLayout = UIRectEdgeAll; again with the latest code but still no avail:

Answer 1

swift 4 transparent nav bar: (be sure view extends behind nav bar to show through, otherwise will just be black)

navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage() //remove pesky 1 pixel line

or just match navbar color to color of your current vc, but keep it opaque. with translucent set to false child views will line up with navbar instead of going under it.

navigationController?.navigationBar.isTranslucent = false
navigationController?.navigationBar.barTintColor = UIColor.yourColor
navigationController?.navigationBar.shadowImage = UIImage() //remove pesky 1 pixel line

Answer 2

Change your

self.navigationController.view.backgroundColor = [UIColor clearColor];

to this

self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Answer 3

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.

Answer 4

For iOS 13 and the UINavigationBarAppearance API:

let navAppearance = UINavigationBarAppearance()
navAppearance.configureWithTransparentBackground()
self.navigationItem.standardAppearance = navAppearance

Eliminate 5+ lines of shadow/background/color code!

Answer 5

I'm a little late to the party, but I recently needed to do the same thing and I found the following actually works best (because it removes all shadows and bleed-throughs you may have from something lower in the stack):

guard let navBar = navigationController?.navigationBar else { return }
navBar.barStyle = .black
navBar.setBackgroundImage(UIImage(), for: .default)
navBar.shadowImage = UIImage()
navBar.isTranslucent = true
navBar.isHidden = false

Answer 6

1.Your NavigationBar is white,not black.So you must have a view (a white view) under NavigationBar,which is the superview of your greyView.The transparent setting works,but you cann't see it,because the fontcolor is white too.
2.So you have to update your greyView's constraints,so it can extends under navigationbar.And then you can see your white title.
3.Maybe you have to Change your statusBar's UIStatusBarStyle to default or lightcontent,I noticed the font color of statusBar is white too.

Answer 7

The below code works for me

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