Visible buttons with transparent navigation bar

Question

I've seen several apps that have completely transparent navigation bars but with visible buttons, I cant seem to find anything that wont make the button invisible as well. I'm sure they were using UINavigationController for the navbar because it had the same animations with fade and what not.

Im currently using this code in ViewDidLoad and ViewDidAppear to either hide or show the nav bar because it's not supposed to be on the first page-

[self.navigationController setNavigationBarHidden:NO animated:YES];

and this code for its transparency:

[self.navigationController.navigationBar setAlpha:0.0];

I'm having a hard time visualizing how an invisible navigation bar with visible buttons would not look really weird. Can you give an example of an app that had the behaviour that you want? — Darren, Nov 17 '12 at 15:43
The game 'Plague' is the only one I can remember off the top of my head. The weirdness all depends on how you design your interface. — PappaSmalls, Nov 17 '12 at 16:19

Metabble · Accepted Answer · 2012-11-17T21:27:28.543

Create a subclass of UINavigationBar containing no methods except drawRect:. Put custom drawing code there if you need to, otherwise leave it empty (but implement it).

Next, set the UINavigationController's navigation bar to this subclass. Use initWithNavigationBarClass:toolBarClass: in code, or just change it in the Interface Builder if you're using storyboards/nibs (it's a subclass of your UINavigationController in the hierarchy at the side).

Finally, get a reference to your navigation bar so we can configure it using self.navigationController.navigationBar in the loadView of the contained view controller. Set the navigation bar's translucent to YES and backgroundColor to [UIColor clearColor]. Example below.

//CustomNavigationBar.h
#import <UIKit/UIKit.h>

@interface CustomNavigationBar : UINavigationBar
@end

//CustomNavigationBar.m
#import "CustomNavigationBar.h"

@implementation CustomNavigationBar

- (void)drawRect:(CGRect)rect {}

@end

//Put this in the implementation of the view controller displayed by the navigation controller
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationController.navigationBar.translucent = YES;
    [self navigationController].navigationBar.backgroundColor = [UIColor clearColor];
}

Here's a screen shot of the result, mimicking Plague.

enter image description here

The blue border was drawn in drawRect: to show you that a UINavigationBar is there and not just a button and a label. I implemented sizeThatFits: in the subclass to make the bar taller. Both the button and label are UIView's containing the correct UI element that were placed in the bar as UIBarButtonItems. I embedded them in views first so that I could change their vertical alignment (otherwise they "stuck" to the bottom when I implemented sizeThatFits:).

If you app runs 5.0 and later use `UIAppearance`. `drawRect` will not work on iOS 5 or later versions. — nswamy, Nov 17 '12 at 17:27
Are you sure about that? `drawRect:` gets called in iOS 5 as long as you implement it in a *subclass* (if you swizzle it, it won't) so this should be fine for custom drawing, shouldn't it? I'm using one in the iOS 5.1 simulator right now and it works fine. `drawRect:` is called and the bar is completely transparent. — Metabble, Nov 17 '12 at 17:46
@nanjunda I just implemented `drawRect:`for custom drawing in the navigation bar and it worked perfectly fine in iOS 5. It's fine unless the documentation says not to do it. Apple even tells us to subclass `UINavigationBar` to use `drawRect:` and that swizzling it no longer works in iOS 5. Why not tell us it doesn't work? Regardless of whether or not you draw you have to implement `drawRect:` for this to work, otherwise setting the `UINavigationBar`'s background color to clear produces either a black or semitransparent gray bar, depending on whether or not `translucent` has been set. — Metabble, Nov 17 '12 at 17:57
Could something like this get an app rejected or is it close enough to apples guidelines? — user1923975, Aug 04 '13 at 18:56

score 1 · Answer 2 · edited Jan 10 '18 at 15:38

To make the Navigation Bar transparent, use the below code:

self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.translucent = YES;

After this set the background image of the Navigation Bar the same as the view behind it using the below property:

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"SAMPLE.jpg"] forBarMetrics:UIBarMetricsDefault];

score 1 · Answer 3 · answered Sep 12 '13 at 04:33

self.navigationController.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)];

[self.navigationController.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault];
//remove shadow
    [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];

Visible buttons with transparent navigation bar

3 Answers3

Linked