Show Menu

Need an iOS Developer?

Submit your 30 day Job Listing for FREE

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.

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly

Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.

Written by:

Dominik is a student developer who's making iPhone apps. Coming from the Czech Republic but studying in London, he writes about tips, tricks, tutorials and opinions he learns along his way as a dev. He is really passionate about both coding and writing. Original articles and tutorials can be found on the Authors website, check it out using the link below if you wish.