The default behavior of the Tab Bar in iOS is to show a blue gradient on the selected Tab image. This does not always go well with the rest of the UI design for your app. However, you can easily customize the Tab Bar.
Buttons in the Tab Bar
You can add UIButtons in the Tab Bar and provide different images for the Normal and Selected state for the buttons.
Here are the key methods in the custom class MokriyaUITabBarController that extends UITabBarController:
- (void)customizeTabBar
{
[self customizeTabBarImages];
[self customizeTabBarLabels];
[self didSelectTab:[tabBarButtonsArray objectAtIndex:0]];
}
- (void)customizeTabBarImages
{
tabBarButtonsArray = [[NSMutableArray alloc] initWithCapacity:0];
int tabItemsCount = [self.viewControllers count];
if (tabItemsCount!= [tabBarImagesArray count] || tabItemsCount != [tabBarSelectedStateImagesArray count]||tabItemsCount != [tabBarTitlesArray count]) {
NSLog(@"tabItemsCount!= [tabBarImagesArray count] || tabItemsCount != [tabBarSelectedStateImagesArray count] ||tabItemsCount != [tabBarTitlesArray count] ");
NSLog(@"Fix it");
return;
}
float tabWidth = self.tabBar.frame.size.width/tabItemsCount;
float tabHeight = self.tabBar.frame.size.height;
float tabXCenter=tabWidth/2;
float tabYCenter = self.tabBar.frame.size.height/2;
for (int i=0;i < [self.viewControllers count]; i++) {
UIButton *tabBarButton = [UIButton buttonWithType:UIButtonTypeCustom];
tabBarButton.tag = i;
[tabBarButton addTarget:self action:@selector(didSelectTab:) forControlEvents:UIControlEventTouchDown];
UIImage *buttonImage = [tabBarImagesArray objectAtIndex:i];
tabBarButton.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleTopMargin;
tabBarButton.frame = CGRectMake(0.0, 0.0, tabWidth,tabHeight);
[tabBarButton setImage:buttonImage forState:UIControlStateNormal];
[tabBarButton setImage:buttonImage forState:UIControlStateSelected];
[tabBarButton setImage:buttonImage forState:UIControlStateHighlighted];
[tabBarButton setImage:buttonImage forState:UIControlStateSelected|UIControlStateHighlighted];
tabBarButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
tabBarButton.imageView.image = buttonImage;
tabBarButton.selected = YES;
tabBarButton.center = CGPointMake(tabXCenter, tabYCenter);
tabXCenter += tabWidth;
[tabBarButtonsArray addObject:tabBarButton];
[self.tabBar addSubview:tabBarButton];
}
}
- (void)customizeTabBarLabels
{
tabBarLabelsArray = [[NSMutableArray alloc] initWithCapacity:0];
int tabItemsCount = [self.viewControllers count];
if (tabItemsCount!= [tabBarImagesArray count] || tabItemsCount != [tabBarSelectedStateImagesArray count]) {
NSLog(@"tabItemsCount!= [tabBarImagesArray count] || tabItemsCount != [tabBarSelectedStateImagesArray count]");
return;
}
float tabWidth = self.tabBar.frame.size.width/tabItemsCount;
float tabXCenter = tabWidth/2;
float tabYCenter = self.tabBar.frame.size.height-7;
for (int i=0;i < [self.viewControllers count]; i++) {
UILabel *tabBarLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0,tabWidth, 50)];
tabBarLabel.text = [tabBarTitlesArray objectAtIndex:i];
tabBarLabel.center = CGPointMake(tabXCenter, tabYCenter);
tabBarLabel.backgroundColor = [UIColor clearColor];
tabBarLabel.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:10];
tabBarLabel.textAlignment = UITextAlignmentCenter;
tabXCenter += tabWidth;
[self.tabBar addSubview:tabBarLabel];
[tabBarLabelsArray addObject:tabBarLabel];
[tabBarLabel release];
}
}
- (void)didSelectTab:(id)sender
{
UIButton *selectedButton = (UIButton *)sender;
self.selectedIndex = selectedButton.tag;
for (int i=0; i<[tabBarButtonsArray count]; i++) {
if (selectedButton.tag==i) {
UILabel *tabBarLabel = [tabBarLabelsArray objectAtIndex:i];
tabBarLabel.textColor = [UIColor whiteColor];
continue;
}
UIImage *buttonImage = [tabBarImagesArray objectAtIndex:i];
UIButton *button = [tabBarButtonsArray objectAtIndex:i];
[button setImage:buttonImage forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateSelected];
[button setImage:buttonImage forState:UIControlStateHighlighted];
[button setImage:buttonImage forState:UIControlStateSelected|UIControlStateHighlighted];
UILabel *tabBarLabel = [tabBarLabelsArray objectAtIndex:i];
tabBarLabel.textColor = [UIColor blackColor];
}
UIImage *buttonImage = [tabBarSelectedStateImagesArray objectAtIndex:selectedButton.tag];
[selectedButton setImage:buttonImage forState:UIControlStateNormal];
[selectedButton setImage:buttonImage forState:UIControlStateSelected];
[selectedButton setImage:buttonImage forState:UIControlStateHighlighted];
[selectedButton setImage:buttonImage forState:UIControlStateSelected|UIControlStateHighlighted];
}
And here is how you can use it in your project:
#import "MokriyaUITabBarController.h"
tabBarController = [[MokriyaUITabBarController alloc] init];
FirstViewController *firstView = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
SecondViewController *secondView = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
ThirdViewController *thirdView = [[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:nil];
FourthViewController *fourthView = [[FourthViewController alloc] initWithNibName:@"FourthViewController" bundle:nil];
FifthViewController *fifthView = [[FifthViewController alloc] initWithNibName:@"FifthViewController" bundle:nil];
tabBarController.viewControllers = [NSArray arrayWithObjects:firstView,secondView,thirdView,fourthView,fifthView,nil];
tabBarController.tabBarImagesArray = [NSMutableArray arrayWithObjects:
[UIImage imageNamed:@"m1.png"],
[UIImage imageNamed:@"m2.png"],
[UIImage imageNamed:@"m3.png"],
[UIImage imageNamed:@"m4.png"],
[UIImage imageNamed:@"m5.png"],
nil];
tabBarController.tabBarSelectedStateImagesArray = [NSMutableArray arrayWithObjects:
[UIImage imageNamed:@"am1.png"],
[UIImage imageNamed:@"am2.png"],
[UIImage imageNamed:@"am3.png"],
[UIImage imageNamed:@"am4.png"],
[UIImage imageNamed:@"am5.png"],
nil];
tabBarController.tabBarTitlesArray = [NSMutableArray arrayWithObjects:
@"Home",
@"About Us",
@"Services",
@"Portfolio",
@"Contact Us",
nil];
[firstView release];
[secondView release];
[thirdView release];
[fourthView release];
[fifthView release];
[tabBarController customizeTabBar];
self.window.rootViewController = self.tabBarController;
You can also tweak MokriyaUITabBarController.m to get desired Height/Width of TabBarItem
You can download the complete source code from our github here
PS::You can get updates of our work @mokriya and more sample projects from our github page
