iOS: How To Easily Customize The Look Of Your UINavigationBar And UIBarButtonItem Across Your Whole App
Yesterday, I had the fun task of changing the look of the back button across the whole iOS app. In the process, I ended up learning A LOT about customizing the UINavigationBar in general.
The easiest solution I’ve found and learned a lot about is that you can actually do a lot of your customization in the AppDelegate using the general [UINavigationBar appearance] and [UIBarButton appearance] to affect all instances of UINavigationBar and UIBarButton in the app.
Just add the below code your need in your AppDelegate, and you’re good to go!
Setting a Custom Navigation Bar Image
Have a different background for your Navigation Bar? No problem! In your app delegate, simply change the image in the [UINavigation appearance]
[[UINavigationBar appearance] setBackgroundImage:YourBackgroundUIImage forBarMetrics:UIBarMetricsDefault];
Of course if your app goes landscape in some places, make sure to set a landscape image as well:
[[UINavigationBar appearance] setBackgroundImage:YourLandscapeUIImage forBarMetrics:UIBarMetricsLandscapePhone];
Styling Your Navigation Bar Title Text
You can actually customize what your navigation bar title text looks like, everything down to the shadows. First populate a text attributes dictionary with the text attributes you need for your styling, then pass those in!
// your shadow offset if your title needs it NSValue *shadowOffset = [NSValue valueWithUIOffset:UIOffsetMake(0, 0)]; // your text attributes dictionary NSDictionary *textAttributes = @{ UITextAttributeTextColor : [UIColor YourFunColor], UITextAttributeFont : [UIFont YourSpecialFont], UITextAttributeTextShadowColor : shadowOffset } [[UINavigationBar appearance] setTitleTextAttributes:textAttributes];
Setting a Custom Bar Button Image
It’s just as easy to set a custom Bar Button Image:
[[UIBarButtonItem appearance] setBackgroundImage:YourUIBarButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Don’t forget to add a pressed button image if you have one!
[[UIBarButtonItem appearance] setBackgroundImage:YourPressedUIBarButtonImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
Customizing Your Back Button Image
If you haven’t guessed it already, you can also customize what your back button looks like!
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:YourBackButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
And, of course, don’t forget to add the pressed state image if you have one:
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:YourBackButtonImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
If you need the text to move relative to the image, you can easily offset it:
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(5, 0) forBarMetrics:UIBarMetricsDefault];
Customizing Your Bar Button Fonts
Just like you can customize the font of your navigation bar title, you can also customize the font of your bar buttons. Keep in mind that all the bar buttons – the right and left and back button – will have this same font.
// your shadow offset if your title needs it NSValue *shadowOffset = [NSValue valueWithUIOffset:UIOffsetMake(0, 0)]; // your bar button text attributes dictionary NSDictionary *textAttributes = @{ UITextAttributeTextColor : [UIColor YourFunColor], UITextAttributeFont : [UIFont YourSpecialFont], UITextAttributeTextShadowColor : shadowOffset } [[UIBarButtonItem appearanceWhenContainedIn: [UINavigationController class],nil] setTitleTextAttributes:textAttributes forState:UIControlStateNormal];
Enjoy!