The Analog Guy

When you’re working on an iphone app, more often than not, you’ll be working with the standard SDK elements and then customize those. For a recent project, I had to work with a navigation controller. And of course, the UINavigationBar needed to be customized with a proper image.

Now I had never done this before, and as usual when I don’t know how to do some task, I look in one of my two books. If the answer isn’t there, then Google comes to the rescue. So to customize the background of a UINavigationBar wouldn’t be too much of a problem I thought. And indeed it wasn’t, but I first implemented a wrong solution:

How to do it incorrectly

In the viewWillAppear:(BOOL)animated method of the ViewController, I wrote this:

[self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"title_bar.png"]] autorelease] atIndex:0];

Basically, it inserts an image with filename “title_bar.png” as a subView into the UINavigationBar. This works fine. In fact, I couldn’t see anything wrong with it. So I went ahead, and added it elsewhere in the code too.

So if this works, what is wrong with it? The behavior is unpredictable. In my title bar, I set the title of the current view, and I added a button on the right hand side. Sometimes the button wouldn’t render, sometimes the title wouldn’t render. Sometimes the behavior was correct only after I went to another view, and then came back to this one. So to keep it short: it is unpredictable, and you don’t want to do it this way.

How to do it correctly

To make this work, you don’t have to write a lot of code. All you need to do is subclass the UINavigationBar class, and implement the drawRect method yourself. This will override the default behavior with what you implement. So each time drawRect is called, we just make sure the “title_bar.png” image is added:

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
	UIImage *image = [UIImage imageNamed: @"title_bar.png"];
	[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

The drawRect method is automatically invoked when the UINavigationBar will be rendered. Each time this happens, the image will now be automatically drawn in the title bar. Beware though, this is for all UINavigationBar’s in your project.