Custom navigation bar

Cyril picture Cyril · Dec 17, 2011 · Viewed 21.4k times · Source

I was crawling Dribble and found the attached design. I was wondering how to do a custom navigation bar like this. I mean how create the navigation bar once and reuse it implicitly for every view controllers.

I was thinking about having a kind of root view controller and inherit for other view controllers, but I don't know how to do this.

Any idea or link will be appreachated!

Cheers.

Cyril

Nav bar image

Answer

Sebastien Peek picture Sebastien Peek · Feb 16, 2012

Thanks to iOS5 you are now able to customise the appearance of a UINavigationBar without having to subclass or create a category.

The following code block (put it in your applicationDidFinishLoading: method) will change the UINavigationBar for the whole application to whatever image you give it.

Note, this will ONLY work in iOS5

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

However, you are also able to change the appearance of a single UINavigationBar depending on what view controller you're in by using the following code in viewDidLoad.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

The above code is solely discussing the new ways to customise the UINavigationBar appearance thanks to iOS5. However, it does not discuss the way that the buttons have been implemented.

However, adding the buttons is a different game altogether. For this, I would recommend subclassing UINavigationBar, and then adding in the buttons where needed through that. You could probably even get away with just a standard UINavigationBar but custom UIBarButtonItems that run off a particular view.

For example:

UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];

UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];

I haven't tested that code so it isn't a copy/paste solution, but it gives you an idea of what needs to be done to accomplish "custom" looking UIBarButtonItems.

Good luck!