How do you make a UINavigationBar transparent? Though I want its bar items to remain visible.
How do you make a UINavigationBar transparent? Though I want its bar items to remain visible.
If you build with the latest beta iOS 13.4 and Xcode 11.4, the accepted answer won't work anymore. I've found another way, maybe it's just a bug in the beta software, but I'm writing it down there, just in case
(swift 5)
import UIKit
class TransparentNavBar :UINavigationBar {
override func awakeFromNib() {
super.awakeFromNib()
self.setBackgroundImage(UIImage(), for: .default)
self.shadowImage = UIImage()
self.isTranslucent = true
self.backgroundColor = .clear
if #available(iOS 13.0, *) {
self.standardAppearance.backgroundColor = .clear
self.standardAppearance.backgroundEffect = .none
self.standardAppearance.shadowColor = .clear
}
}
}
This seems to work:
@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end
navigationController.navigationBar.backgroundColor = [UIColor clearColor];
override func viewDidLoad()
{
super.viewDidLoad()
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
//appearance.backgroundColor = UIColor.clear
navigationItem.compactAppearance = appearance
navigationItem.scrollEdgeAppearance = appearance
navigationItem.standardAppearance = appearance
//...
}
Just to be clear, this makes the UINavigationBar completely transparent. The bar button items are still visible and work properly.
override func viewDidLoad()
{
super.viewDidLoad()
navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.isOpaque = false
//...
}
This made me realize I didn't actually know the difference between transparent and translucent RIP.
https://www.lexico.com/en/definition/transparent
https://www.lexico.com/en/definition/translucent
Changing the navigationItem bar buttons after setting the appearance in the way I provided will reset the appearance and you'll have to do it again.
for Swift 3.0:
override func viewDidLoad() {
super.viewDidLoad()
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true
}
Try the following piece of code:
self.navigationController.navigationBar.translucent = YES;
In Swift 4.2
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
(in viewWillAppear), and then in viewWillDisappear, to undo it, put
self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
This worked with Swift 5.
// Clear the background image.
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
// Clear the shadow image.
navigationController?.navigationBar.shadowImage = UIImage()
// Ensure the navigation bar is translucent.
navigationController?.navigationBar.isTranslucent = true
Do you mean entirely transparent, or using the translucent-black style seen in the Photos app? The latter you can accomplish by setting its barStyle property to UIBarStyleBlackTranslucent. The former... I'm not sure about. If you want the items on it to still be visible, you might have to do some digging around in the bar's view hierarchy and remove the view containing its background.
Check RRViewControllerExtension, which is dedicated on UINavigation bar appearance management.
with RRViewControllerExtension in your project, you just need to override
-(BOOL)prefersNavigationBarTransparent;
in you viewcontroller.
extension UINavigationBar {
var isTransperent: Bool {
get {
return false // Just to satisfy property
}
set {
if newValue {
self.shadowImage = UIImage()
self.isTranslucent = true
self.setBackgroundImage(UIImage(), for: .default)
} else {
self.shadowImage = UIImage()
self.isTranslucent = false
self.setBackgroundImage(nil, for: .default)
}
}
}
}