Show Menu

Do you have a job opening?

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)
@end
@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];
}
@end

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.

Comments

There are currently: 10 Responses to “App design tip – Custom UINavigationBar”. Leave your comment!

This will not work in iOS 5 unless you loop through the subviews and hide the UINavigationBarBackground.


This is wrong way to customize navigation bar, this will also change standard navigation bars in system controls like MPMoviePlayerViewController or when playing youtube from webview etc.

For correct and simple solution that works in both iOS 5 and bellow, check out my blog post:
http://www.merowing.info/2012/02/custom-navigation-bar-ios/


Jasper Pol, where to drop that code?


iOS 5.x:

UINavigationBar *navBar = [[self navigationController] navigationBar];
UIImage *backgroundImage = [UIImage imageNamed:@”xxx.png”];
[navBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];


What if you want the background image (for the navbar) to change depending on which view controller is pushed onto the stack?

I suppose you could do a check on the pushed view controller and do an if/else in drawRect. Any other ideas for iOS 4 & below?


Since we are under NDA I cant tell you right away.. But you should definitely check out the documentation for iOS 5 Beta 😉 There is more cool stuff like this


    I haven’t really played with iOS 5 because I have only one phone and can’t risk any broken apps but I’ll have a look and update this as soon as iOS 5 is out. Thanks for the warning!


This is very bad hacky way! in iOS 5 is custom drawRect: in UINavigation bar and UIToolbar ignored..


Bear in mind that this method is known to work on iOS 4.x and below, but you will need to test on newer iOS versions to determine if it’s been broken by those updates.

PS: *hint, hint*