How can I make my UINavigationBar totally transparent on iOS7?

Question

I'm working on making an application iOS7-compatible, and I'm encountering a problem with UINavigationBar that's driving me crazy:

I want to make my navigationBar totally transparent, without any blur or backgroundPicture, but containing and displaying navigationItem buttons.

In iOS6, I used to make that this way:

UIImage *maskedImage = [UIImage imageNamed:@"transparent_image.png"]
[navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault];

But it doesn't work anymore on iOS7.

Any suggestions ?

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Perhaps this will answer your question? If you select your view controller and then uncheck the box next to "extend edges under top bars", the background image won't bleed underneath it.

edited May 23 '17 at 12:28

Community

1
1

answered Sep 19 '13 at 23:31

Kyle Bachan

1,053
2
15
33

If I understand what you mean, I should use storyboard to try your suggestion, and unfortunately I use Xib files... Would you have any other suggestion compatible with that ? – Taku Sep 20 '13 at 00:03
From the same link, you could paste this code in the viewDidLoad method: if ([self respondsToSelector:@selector(edgesForExtendedLayout)]) self.edgesForExtendedLayout = UIRectEdgeNone; – Kyle Bachan Sep 20 '13 at 00:09

score 0 · Answer 2 · answered Oct 08 '13 at 09:18

@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

How can I make my UINavigationBar totally transparent on iOS7?

2 Answers2