Post-A-Day #1 – Custom UINavigationbar background

The idea of the iphone is that it has a nice universal feel across applications, that’s a benefit to everyone involved.
For example, if Apple later decided they’re tired of blue gradients – and your app uses doesn’t try to circumvent the built in look and feel – your app is 100% future proof.

It will look nice on iPhone3G as well as iPhone20 (also called eyePhone based on early leaked prototypes – it will attach directly to your retina).
You don’t have to do anything, as UIKit will automatically take care of that for you: sliders, navigation controllers, buttons the works.
-

However sometimes you just want to do what you want to do, maybe due to branding a client will insist on modifying the look of particular aspects of the interface to match their branding.

In this example we will be adding a background to UINavigationBar:

So how do you turn this:

Into this:


Firstly, you cannot do it in InterfaceBuilder.
There is no background image property for UINavigationBar, so that’s out.

Fortunately it’s quite easy, what you have to is create your own Category of UINavigationBar and override the:
- (void)drawRect:(CGRect)rect method.

A Category is something like an extension of a existing class. It allows you to override methods of that class, without having to subclass it.

Here is the full snippet to add the background texture to UINavigationBar:

// This goes at the top of the file by convention
@implementation UINavigationBar (CustomImage)// CustomImage is some name i made up
- (void)drawRect:(CGRect)rect
{
	UIImage *image = [UIImage imageNamed: @"BrowseMode_navbarbackground"];
	[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end // <- Notice
 
// Now I continue my class as implementation I would 
@implementation RootViewController
// ...
@end

Tags: cross-post, post-a-day, snippet, uikit