iOS

Always Needed Guide to Customize UINavigationBar

Customizing UINavigationBar remains a not-easy-to-remember topic.

When I need to change the looks of the nav bar – such as changing the Back arrow, or title, or making it transparent – I always need to google for the code.

Understanding Navigation Bar

The reason that nav bar is not easy, is because it is a pretty complicated component.

There are 3 classes associated with nav bar:

  1. UINavigationBar
  2. UINavigationItem
  3. UIBarButtonItem

UIBarButtonItem are the buttons on the UINavigationBar.

But it is actually the UINavigationItem that you will use to manage the buttons and views.

Specifically, eg you are on a view controller, then self.navigationItem will provide you the left button, right button, title, etc.

One of the most confusing thing is between self.navigationItem.backBarButtonItem and self.navigationItem.leftBarButtonItem.

Assuming you are now on your view controller, then leftBarButtonItem refers to the button on the left of the nav bar. backBarButtonItem is NOT shown (yet).

backBarButtonItem will be shown when you push another view controller (on top of it), as the left button of this topmost view controller (the “Back”).

Change the Back Arrow Image

You can change the default back arrow image by setting the appearance proxy.

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back-button-image"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back-button-image"]];

Change the Back Title

The default “Back Title” is the title of the view controller.

Sometimes, you want it to display literally “Back” (a shorter word if your title is too long), or you might want to not display a string at all (just the Back Arrow).

self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:nil action:nil];

Remember: The above has to be set whereby self is the parent view controller which the button will go back to.

Make the Background Transparent

For this, I have created UINavigationBar+Addition.

There are quite a number of things to set, some are not obvious.

[navBar setTranslucent:YES];
[navBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
navBar.backgroundColor = [UIColor clearColor];
navBar.shadowImage = [UIImage new];

Comments