[ACCEPTED]-Make UINavigationBar transparent-transparency
If anybody is wondering how to achieve this 10 in iOS 7+, here's a solution (iOS 6 compatible 9 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 8 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 7 does the trick, due to a behavior discussed 6 in the UINavigationBar
documentation. I'll report here 5 the relevant fragment:
If you set this property 4 to
YES
on a navigation bar with an opaque custom 3 background image, the navigation bar will 2 apply a system opacity less than 1.0 to 1 the image.
In iOS5 you can do this to make the navigation 1 bar transparent:
nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];
[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault];
[img release];
From IOS7 :
self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
0
If you build with the lastest beta iOS 13.4 5 and XCode 11.4, the accepted answer won't 4 work anymore. I've found another way, maybe 3 it's just a bug in the beta software, but 2 I'm writing it down there, just in case
(swift 1 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
}
}
}
For anyone who wants to do this in Swift 1 2.x:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true
or Swift 3.x:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
This seems to work:
@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end
navigationController.navigationBar.backgroundColor = [UIColor clearColor];
0
After doing what everyone else said above, i.e.:
navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true
... my navigation bar was still white. So 2 I added this line:
navigationController?.navigationBar.backgroundColor = .clear
... et voila! That seemed 1 to do the trick.
I know this topic is old, but if people 2 want to know how its done without overloading 1 the drawRect method.
This is what you need:
self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
The below code expands upon the top answer 15 chosen for this thread, to get rid of the 14 bottom border and set text color:
The last 13 two coded lines of this code set transparency. I 12 borrowed that code from this thread and 11 it worked perfectly!
The "clipsToBounds" property 10 was code I found which got rid of the bottom 9 border line with OR without transparency 8 set (so if you decide to go with a solid 7 white/black/etc. background instead, there 6 will still be no border line).
The "tintColor" line 5 (2nd coded line) set my back button to a 4 light grey
I kept barTintColor as a backup. I 3 don't know why transparency would not work, but 2 if it doesn't, I want my bg white as I used 1 to have it
let navigationBarAppearace = UINavigationBar.appearance() navigationBarAppearace.tintColor = UIColor.lightGray navigationBarAppearace.barTintColor = UIColor.white navigationBarAppearace.clipsToBounds = true navigationBarAppearace.isTranslucent = true navigationBarAppearace.setBackgroundImage(UIImage(), for: .default) navigationBarAppearace.shadowImage = UIImage()
Solution - Swift 5 - iOS 13+
According to the documentation, in your UIViewController subclass:
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 6 bar button items are still visible and work 5 properly.
What didn't work
override func viewDidLoad()
{
super.viewDidLoad()
navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.isOpaque = false
//...
}
This made me realize I didn't actually 4 know the difference between transparent and translucent RIP.
References
https://www.lexico.com/en/definition/transparent
https://www.lexico.com/en/definition/translucent
Update 08/10/2021
Changing 3 the navigationItem
bar buttons after setting the appearance 2 in the way I provided will reset the appearance 1 and you'll have to do it again.
C# / Xamarin Solution
NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;
0
for Swift 3.0:
override func viewDidLoad() {
super.viewDidLoad()
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true
}
0
Try the following piece of code:
self.navigationController.navigationBar.translucent = YES;
0
Another Way That worked for me is to Subclass 2 UINavigationBar And leave the drawRect Method 1 empty !!
@IBDesignable class MONavigationBar: UINavigationBar {
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
// Drawing code
}}
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 1 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
0
Do you mean entirely transparent, or using 8 the translucent-black style seen in the 7 Photos app? The latter you can accomplish 6 by setting its barStyle
property to UIBarStyleBlackTranslucent
. The former... I'm 5 not sure about. If you want the items on 4 it to still be visible, you might have to 3 do some digging around in the bar's view 2 hierarchy and remove the view containing 1 its background.
This works for Swift 2.0.
navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true
0
Check RRViewControllerExtension, which is dedicated on UINavigation 3 bar appearance management.
with RRViewControllerExtension 2 in your project, you just need to override
-(BOOL)prefersNavigationBarTransparent;
in 1 you viewcontroller.
extension UINavigationBar {
var isTransperent: Bool {
get {
return false // Just to satisfy property
}
set {
if newValue == true {
self.shadowImage = UIImage()
self.isTranslucent = true
self.setBackgroundImage(UIImage(), for: .default)
}else{
self.shadowImage = UIImage()
self.isTranslucent = false
self.setBackgroundImage(nil, for: .default)
}
}
}
}
0
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.