Always wondered how to change the default UINavigationBar for something cooler? Maybe something like Instagram or SyncListen?

Instagram's navigation bar SyncListen's navigation bar

There is quite an easy way to do that. All you need to do is to override one method. You can either create a category (which is what I’ll show) or subclass UINavigationBar. To create a category just insert this snippet right before the @implementation in your AppDelegate.m.

@interface UINavigationBar (MyCustomNavBar)
@implementation UINavigationBar (MyCustomNavBar)
- (void) drawRect:(CGRect)rect {
    //matching the button color with the bar color
    [self setTintColor:[UIColor colorWithRed:0.85f green: 0 blue:0 alpha:1]];
    UIImage *barImage = [UIImage imageNamed:@"image.png"];
    [barImage drawInRect:rect];

The image.png you see in the code is the image you want to use. This image has to be 320x44px (or 640x88px for Retina) and good UI manners tell you that it should somehow resemble default look of the navigation bar. Now all of your UINavigationBars will have this image. If you want to add it only to specific ones (or you want to have different bars) you will need to subclass UINavigationBar instead.

Unfortunately there is one problem with this. The title will appear over you image. That is not a problem in case you want it to (like you can see in Instagram) but if the title is a part of your image you will have to set the title of the bar to a space (@” “) otherwise the back button won’t appear. This might be especially problematic in some situations (picking an image from Camera Roll is one I think) where the default title will always appear.

As usual the rule that “less is more” is true. Changing the default UINavigationBar can add a special touch to your app but if you don’t do it carefully it will ruin the whole thing.

Enjoyed this post?

Subscribe to our RSS Feed or Follow us on twitter to keep up to date with the latest from iOS-Blog. Remember, Sharing is caring so please click one of the following options: