[ACCEPTED]-Make UINavigationBar transparent-transparency

Accepted answer
Score: 651

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.

Score: 30

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];
Score: 23

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

Score: 17

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
        }
    }
}
Score: 14

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
Score: 10

This seems to work:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

0

Score: 9

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.

Score: 5

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];
Score: 5

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:

  1. The last 13 two coded lines of this code set transparency. I 12 borrowed that code from this thread and 11 it worked perfectly!

  2. 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).

  3. The "tintColor" line 5 (2nd coded line) set my back button to a 4 light grey

  4. 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()
    
Score: 4

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://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

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.

Score: 3

C# / Xamarin Solution

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;

0

Score: 3

for Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

0

Score: 2

Try the following piece of code:

self.navigationController.navigationBar.translucent = YES;

0

Score: 1

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
}}
Score: 1

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
Score: 1

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

Score: 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.

Score: 0

This works for Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true

0

Score: 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.

navigation bar tranparent

Score: 0
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