May 27th, 2011

Custom UINavigationBar, part 1

iPad, iPhone, by BigSprocket.

A very common thing people want to do when writing the next killer app for the iPhone is to customize the look of a UINavigationBar. The standard blue and black are sufficient for run-of-the-mill apps, but a killer app simply needs more “pop”, right? There are several approaches to doing this, so let’s look at a few.


Create a new project in XCode, selecting the “Navigation-based Application” template.

ss1.PNG

First, let’s see what we get out of the box. Inside the viewDidLoad method of RootViewController, I’ve added this line of code:

self.title = @"Basic Blue";

and the result, when I build and run, is this:

ss2.PNG

One more tweak to viewDidLoad …

    
[self.navigationController.navigationBar setBarStyle:UIBarStyleBlackOpaque];
self.title = @"Basic Black";

… gives us the black version of the standard UINavigationBar:

ss3.PNG

In addition to these two out-of-the-box colors, we can set up a custom color, using a single line of code. Doing it this way still gives us the glossy look of the blue and black, just with a color of our choosing.

[self.navigationController.navigationBar setTintColor:[UIColor orangeColor]];
self.title = @"Orange is easy too";

ss4.PNG

One way to separate yourself from the crowd is to simply use a custom color like this, combined with graphics instead of text in the title portion. The Facebook app, for example, uses a custom blue, and their custom graphic.

ss5.PNG

So, how is that done? Each UINavigationItem, when displayed as the current item in the UINavigationBar, has three elements you can customize. The left button (where “Back” usually goes), the right button, and the titleView, which can be any UIView, or subclass of UIView. Unless you override it with something, this titleView will contain a UILabel whose text property is set to the title of the UIViewController. In the code above, we have been setting self.title to some text, and the system has created a UILabel containing that text, and set the UINavigationItem’s titleView to that UILabel for us.

If, instead of relying on that behavior, we were to supply a UIImageView of our logo, that image would appear in its place. To see it in action, you need an image. I just happen to have one here. (NOTE: UINavigationBar on a portrait screen is 44 pixels points tall, but only 34 pixels points tall when rotated to landscape. If you go this custom image route, and you intend for your UINavigationBar to be visible in landscape mode, make sure your image is sized appropriately.) Add it to the project, then make the following code change:

UIImage *logo = [UIImage imageNamed:@"cocoatouchrules"];
[self.navigationItem setTitleView:[[UIImageView alloc] initWithImage:logo]];
[self.navigationController.navigationBar setTintColor:[UIColor orangeColor]];

ss6.PNG

As I mentioned, The titleView property on your UINavigationItem can be any view you like. Since all the standard controls supplied by Apple are derived from UIView, you could set titleView to a label, a button, an image, or any of your own custom UIView subclasses. The sky is the limit. But, making it something surprising and confusing, like a UISlider, will technically work, but will be odd enough that you’ll probably get rejected by Apple for being a nonstandard use of a control that is confusing to the user. Best to stick to labels and images.

ss7

That’s about as far as we can go with UINavigationBar customization using the standard methods provided on the object itself. In part 2, we’ll look at some more sophisticated, and more invasive, ways to customize the view.

Back Top

Responses to “Custom UINavigationBar, part 1”

  1. No comments yet.

Leave a Reply

You must be logged in to post a comment.