When adding more than 5 view controllers to your UITabBarController, a “More” tab is automatically setup for you, which includes a view controller and even a modal view for letting the user edit the app’s tabs in the order they want.
By default, the navigation bars for both the moreNavigationController and the modal view (edit) are the Default blue, but changing these colours isn’t exactly straightforward.
Here’s an example of what we want to achieve:
I use an orange colour in one of my apps for the navigation bars and it just looks wrong when the more tab’s navigation bars are blue.
Changing the colour of the moreNavigationController is quite easy. After you alloc the UITabBarController, set the colour of the moreNavigationController:
You can also use the barStyle property if you like:
That wasn’t so hard. But the navigation bar for the modal view that pops up when the user taps “Edit” is still the default blue. So let’s change that as well:
First, if you haven’t already, make sure your AppDelegate implements the UITabBarControllerDelegate. Then add the optional delegate method willBeginCustomizingViewControllers: in your AppDelegate’s implementation file, and add the following lines of code:
UIView *editView = [controller.view.subviews objectAtIndex:1];
UINavigationBar *modalNavBar = [editView.subviews objectAtIndex:0];
modalNavBar.tintColor = [UIColor orangeColor];
}
Again, it’s possible to set the barStyle property instead of the tintColor, but barStyle won’t give you all the colour options, of course.
Now that you have gained control of the modal view, you change more properties. By default, the navigation bar title says “Configure”, but you can change that as well, or how about the background colour? Here’s how:
UIView *editView = [controller.view.subviews objectAtIndex:1];
editView.backgroundColor = [UIColor grayColor];
UINavigationBar *modalNavBar = [editView.subviews objectAtIndex:0];
modalNavBar.tintColor = [UIColor orangeColor];
modalNavBar.topItem.title = @"Edit Tabs";
}
Regarding the HIG… I am not sure if all this is allowed. I will be submitting an update with an orange coloured navigation bar for both those views, and I believe other apps have it (NY Times) so I don’t think it goes against the HIG.
However, I don’t think it’s a good idea to change the backgroundColor property of the “editView”. I tried with a grey colour and it doesn’t look right. It might also get your app rejected, because it’s such a big change. That your navigation bars are the same colour throughout your app only makes it look better in my opinion, rather than having a blue navigation bar clash with the rest of your beautifully designed app :)
Thanks for this great little tip! I’ll be adding it my very next app.
Hi, thank you very much for such nice tutorial.
i am just trying to customize the “EDIT BUTTON” by adding the background image to that button.
Can you please guide me for that ?
Hey, I’m really starting out.
How do you implement the UITabBarControllerDelegate in your App Delegate so that you can then add code to change the edit bar to orange?
Thanks
A quick Google search found this: http://stackoverflow.com/questions/2214613/how-to-conform-to-uitabbarcontrollerdelegate
I think I’m missing something obvious
my .h looks like this
@interface AppDelegate_iPhone : NSObject {
UIWindow *window;
UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@end
and my .m looks like this pieces
@synthesize tabBarController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// …
tabBarController = [[UITabBarController alloc] init];
tabBarController.viewControllers = [NSArray arrayWithObjects:
navController1,
navController2,
navController3, nil];
[window addSubview:[tabBarController view]];
// …
}
- (void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray *)viewControllers {
UIView *editView = [tabBarController.view.subviews objectAtIndex:1];
UINavigationBar *modalNavBar = [editView.subviews objectAtIndex:0];
modalNavBar.tintColor = [UIColor orangeColor];
}
But it’s still blue instead of orange.
Everything I’ve read says this should work and it’s not crashing the app.
Thanks for all the help :) Can you see anything obvious?
You need to make your Application Delegate class adhere to the UITabBarController delegate methods. In your .h file write:
I’ve included the other ones, since these are good to have.
Then in your .m file:
tabBarController.delegate = self;
Now that method is called. If you’re ever in doubt why a delegate method isn’t working, try setting a break point at it, and if there’s no break when you think it should have been called, you’ll know for sure that you have forgotten to make your class adhere to whatever object’s delegate methods.
Hope that helps.
Hi Rune!
Great tutorial. One question though:
I’ve managed to change the background color of the tableview, but I can’t figure out how to change the color of the text in the cells. Any ideas?
Thanks, your tutorial is very clear.