I’ve created a simple demo app to show the two techniques. Feel free to follow along with the source code.
Getting Started
First off, let’s talk a bit about how a UINavigationBar is constructed. Normally you have an XIB (perhaps in your MainWindow.xib file) that contains your Navigation Controller. Often the default behavior will suffice (though you can always subclass UINavigationController and implement your own behavior if you need to).
In the following example, I have a tab-based layout with three separate Navigation Controllers. The first one, called “Default”, has its own UINavigationBar and the associated view controller (which, in turn, contains a UINavigationItem).
Once you have the basic setup, build and run your app to make sure things look about right. You’ll have a plain vanilla blue navigation bar with a text string for a title. This will form the basis of the next two techniques.
Technique 1: Embedded View
In many cases, leaving the actual UINavigationBar alone and instead customizing the UINavigationItem (the title part) is what we’re looking for. This can be done by embedding a UIView and adding components to that as we see fit. For instance, in this example, we have a single UIView positioned in the center of the title area, which contains a UILabel and a UIImageView.
This technique is fairly straightforward and can be done entirely within the XIB. You don’t need to subclass anything, and you can change the appearance of these custom titles easily in the future. Let’s walk through how to do it.
First, make sure you have a working Navigation Controller setup with a default UINavigationBar as discussed in the Getting Started section. Once that’s working properly, start by dragging a new UIView onto the Navigation Bar item in your XIB. As you drag the UIView over the Navigation Bar, it should give you a drop area to place it. Drop it there.
Next, add elements and customize this view as you like. I added a UILabel and a UIImageView, carefully aligning them to fit properly. When you like how it looks, be sure to click on the View and set it’s background color to Clear Color, and (under Drawing) make sure the Opaque checkbox is unchecked.
Note that there was a bug in Interface Builder (prior to Xcode 4) which wouldn’t redraw the UINavigationBar with the clear background color in the title UIView until you re-opened the XIB. If you set the background color to Clear Color and turn off the Opaque checkbox, then try rebuilding your app. Chances are it will work properly, even if it doesn’t quite look right in IB.
One
catch: when you’re using an embedded view as a title, you need to be careful to setup the Back Button property for the Navigation Item the view belongs to. In this case, I set it to “Simple is good!”. If you don’t set this, then when you call pushViewController,
the next view won’t have a back button. Normally, the UINavigationController can determine what the back button text should be based on the previous view controller’s title. But since our title isn’t a UILabel, we need to be explicit about this text.
Technique 2: Subclass & Override
The other way of customizing the UINavigationBar is to subclass the UINavigationBar class and override the drawRect: method. It’s very easy to do, and gives you the most control over how your UINavigationBar will appear. However, it requires a bit of code.
First, again, make sure you have a basic Navigation Controller with a default UINavigationBar setup in your XIB (as shown in the Getting Started section). When that’s working, you next want to setup your UINavigationBar subclass.
In Xcode, create a new Objective-C class, and make it inherit from UINavigationBar:
#import <UIKit/UIKit.h>
@interface MyCustomNavigationBar : UINavigationBar
@endNext, in the implementation file, override drawRect: (and nothing else!) with whatever you’d like. In this example, I’m just loading an image an image as a new background, but you could do just about anything here.
@implementation MyCustomNavigationBar
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed:@"Custom-Nav-Bar-BG.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end
Once
your custom UINavigationBar is ready to go, you next need to update your XIB to use it instead of the default UINavigationBar class. Click on the Navigation Bar item in your XIB and set Class to your custom class (in this case, MyCustomNavigationBar).
Rebuild your app and, if everything was done correctly, you should now have a custom UINavigationBar as you set it up in the drawRect: code! If not, be sure to double check that your custom UINavigationBar is being called and that only the drawRect: method is being overridden.