Changing colors of UINavigationBarButtons

November 5, 2009 by Skylar
Filed under: Quick Tip, iPhone Development 

Alright, here’s another quick tip. “How to change the colors of a button on a toolbar.” Of course, this can be applied to any toolbar but I am going to demonstrate the procedure on a UINavigationBar.

The above image only shows a couple of colors. In truth, you can make the button any color that you want. Fantastic! The code is really simple to do this as well. The first thing that we want to do is open the header file for whichever object will be turning a nav bar button a different color and declare the forward class UINavigationButton. You can get this class by either iterating through the subviews of the UINavigationBar, reading its subviews class names, or by class-dumping UIKit if you have a jailbroken device.

Place the following line before your interface declaration:



@class UINavigationButton;

Now, declare a new method in the header that we will use to actually change the button’s color.



- (void)changeNavigationButtonColorToColor:(UIColor *)newColor

Or something similar to the above line of code.

Now, open up your object’s implementation file and implement the above method. Anywhere in your file, add the following method:



- (void)changeNavigationButtonColorToColor:(UIColor *)newColor {
        for (UIView *view in self.navigationController.navigationBar.subviews) {
                NSLog(@"%@", [[view class] description]);
                if ([[[view class] description] isEqualToString:@"UINavigationButton"]) {
                        [(UINavigationButton *)view setTintColor:newColor];
                }
        }       
}

As you can see above, this is actually a lot easier than it first appears to be. What we first do is set up a for loop to iterate through the subviews of the UINavigationBar using NSFastEnumeration. We then output the class name of the subview, for future reference. IF the class name is UINavigationButton, then we’ve got our view. All we do is set the tintColor property if the UINavigationButton.

That’s it, we’re done!

Alternatively, if you want a wider scope, I’d suggest creating a new UINavigationBar category and placing the button color changing method in there. This was your method can be performed by any class that uses a UINavigationBar without having to recreate the same method over and over.

Remember, a back button and a navigation button are not the same thing. You will have to color the back button separately.

And as usual, here’s a link to a sample app that demonstrates this code: NavButtonColor.zip

Tags: , ,

Comments

5 Comments on Changing colors of UINavigationBarButtons

  1. Ben Dodson on Sat, 16th Apr 2011 3:36 pm

    2. Thanks for the tip – I was trying to recreate the page curl within the Maps app and the way in which the button becomes darker when the curl is in effect. I managed to do this by using the code above but changing UINavigationButton for UIToolbarButton.

    Thanks!

  2. Ross Kimes on Sun, 17th Apr 2011 6:30 pm

    3. Is there anyway to get the text to change color? I want to have a white button, but that does not look very good with white text.

  3. Bill Lee on Sun, 5th Jun 2011 4:52 pm

    4. Rather than the check you use:

    if ([[[view class] description] isEqualToString:@”UINavigationButton”]) …

    I use:

    if ([view isKindOfClass:[UINavigationButton class]]) …

    (Thanks for all your tips and info on your blog!)

  4. Jay Poston on Fri, 8th Jul 2011 6:52 am

    5. So…How do you change the tint color of the back button then? I have searched and was unable to find any solution to just change the background color of the back button.

  5. bob on Mon, 10th Oct 2011 8:14 pm

    6. @Bill Lee: “UINavigationButton” is a private API and if you link to it directly Apple will reject your app.

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





Powered by WP Hashcash