89

I would like an entirely transparent UIToolbar and/or UINavigationBar. I have tried the various incantations suggested for pre- and post-iOS 5 but none seem to work any more.

How might this be accomplished in iOS 7?

1
  • For posterity - I was mistakenly using self.edgesForExtendedLayout = UIRectEdgeNone, which prevents the view extending under the toolbar. Sep 24, 2013 at 1:04

5 Answers 5

307

Swift 3 (iOS 10)

Transparent UIToolbar

self.toolbar.setBackgroundImage(UIImage(),
                                forToolbarPosition: .any,
                                barMetrics: .default)
self.toolbar.setShadowImage(UIImage(), forToolbarPosition: .any)

Transparent UINavigationBar

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

Swift < 3

Transparent UIToolbar

self.toolbar.setBackgroundImage(UIImage(),
                                forToolbarPosition: UIBarPosition.Any,
                                barMetrics: UIBarMetrics.Default)
self.toolbar.setShadowImage(UIImage(),
                            forToolbarPosition: UIBarPosition.Any)

Transparent UINavigationBar

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

Objective-C

Transparent UIToolbar

[self.toolbar setBackgroundImage:[UIImage new]
              forToolbarPosition:UIBarPositionAny
                      barMetrics:UIBarMetricsDefault];
[self.toolbar setShadowImage:[UIImage new]
          forToolbarPosition:UIBarPositionAny];

Transparent UINavigationBar

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

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.


Final result

final result

17
  • 1
    Have you confirmed the toolbar version works on iOS7? I get a dark toolbar and a strange flickering on presentation. Sep 23, 2013 at 23:23
  • 2
    The screenshot is from the iOS 7 simulator Sep 23, 2013 at 23:25
  • Also I just run a test app on my iPhone 5 with iOS 7 and it works as expected. Sep 23, 2013 at 23:27
  • 1
    Nicely done, so many wrong/bad ways to do this out there on SO
    – pfrank
    Sep 29, 2013 at 3:50
  • 2
    If using edgesForExtendedLayout = UIRectEdgeNone, you'll probably want to implement custom transitions. Because otherwise, when pushing views, the default transition will create a dark flicker under the transparent bar during animation. FYI, here's a quick resource for a basic sliding transition: gist.github.com/ArtFeel/7690431
    – anna
    Dec 14, 2013 at 16:21
8

If you want to do it through the entire app you should use the UIAppearance proxy (iOS5+):

UINavigationBar *navigationBarAppearance = [UINavigationBar appearance]; navigationBarAppearance.backgroundColor = [UIColor clearColor]; [navigationBarAppearance setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]; navigationBarAppearance.shadowImage = [[UIImage alloc] init];

Docs: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html

Article: http://nshipster.com/uiappearance/

2
  • Just a note for people looking at this - put this code in your AppDelegate didFinishLaunchingWithOptions for a quick and dirty way to get this applied.
    – Shaun
    Dec 4, 2014 at 5:02
  • You can also set this appearance proxy to only work with specific UINavigationController subclasses—i.e., the ones that you want this behavior applied to.
    – Evan R
    Aug 20, 2020 at 3:51
2

Try:

[navBar setBackgroundImage:[UIImage alloc] forBarMetrics:UIBarMetricsDefault];
1
@implementation MyCustomNavigationBar

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    [self setupBackground];
}

- (void)setupBackground {
    self.backgroundColor = [UIColor clearColor];
    self.tintColor = [UIColor clearColor];

    // make navigation bar overlap the content
    self.translucent = YES; 
    self.opaque = NO;

    // remove the default background image by replacing it with a clear image
    [self setBackgroundImage:[self.class maskedImage] forBarMetrics:UIBarMetricsDefault];

    // remove defualt bottom shadow
    [self setShadowImage: [UIImage new]]; 
}

+ (UIImage *)maskedImage {
    const float colorMask[6] = {222, 255, 222, 255, 222, 255};
    UIImage *img = [UIImage imageNamed:@"nav-white-pixel-bg.jpg"];
    return [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];
}

@end
0

Something I stumbled upon is that if I created a subclassed UINavigationBar and then created an empty -(void)drawRect: method, I would get a transparent navigation bar. I only tested this in iOS 7.*, but it seemed to work!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.