Customizing UITabBar items

Question

I have a simple design for each TabBar item :

• a background color:

  firstTab width = 1/3 of the screen(left) height = tabBarHeight secondTab width = 1/3 of the screen(in the middle) height = tabBarHeight thirdTab width = 1/3 of the screen(right) height = tabBarHeight

• a title centered horizontal and vertical of the tabbaritem

I found different articles about how to change the entire tabbar background like this :

UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];

And I found selected images per tabbaritem but that doesn't fill the entire tab :

[[tabBarController.tabBar.items objectAtIndex:0] setFinishedSelectedImage:[UIImage imageNamed:@"tabbaritem.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"tabbaritem.png"]];

Answer 1

UITabBarItem *tab1 = [[UITabBarItem alloc] init];
tab1.image = [[UIImage imageNamed:@"home_icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab1.selectedImage = [[UIImage imageNamed:@"home_icon_selected.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Answer 2

Better way is create a subClass of UITabBarController

To changeBackGround Color ,

 self.tabBar.backgroundColor = [UIColor redColor];

for tintColor

self.tabBar.barTintColor = [UIColor greenColor];

in ' init ' method itself.

For seetTitle

create an array

//title

titleArray = [[NSMutableArray alloc]initWithObjects:@"Title 1",@"Title 2",@"Title 3", nil];

//image array

NSArray *imageArray = @[image1,image2,image3];



for (int i = 0; i< imageArray.count; i++)
  {
   UINavigationController *nav = [self.viewControllers objectAtIndex:i];
   [nav.tabBarItem setTitle:[titleArray objectAtIndex:i]];

   //You can adjust title position by adjust `titlePositionAdjustment`
   nav.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, -15);

  //for add image on tabbr item for ios 7
  nav.tabBarItem.image = [[imageArray objectAtIndex:i]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

  }

To add image on ios 6

nav.tabBarItem.image = [imageArray objectAtIndex:i];

To cahnge selected image in ios 7

nav.tabBarItem.image = [imageArray objectAtIndex:i];

for ios 6

nav.tabBarItem.selectedImage = [imageArraySelected objectAtIndex:i];

Adjust Image EdgeInset

nav.tabBarItem.imageInsets = UIEdgeInsetsMake(14,0.0, -14,-2);

For add title Attibutes

[nav.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],NSForegroundColorAttributeName,[UIFont fontWithName:@"Helvetica-Bold" size:14.0f],NSFontAttributeName, nil] forState:UIControlStateNormal];

Answer 3

You can do like this

 UIImage *tabBackground = [[UIImage imageNamed:@"tabbg.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

 [[UITabBar appearance] setBackgroundImage:tabBackground];


 UITabBarItem *tabBarItem1 = [tabbar.items objectAtIndex:0];
 UITabBarItem *tabBarItem2 = [tabbar.items objectAtIndex:1];
 UITabBarItem *tabBarItem3 = [tabbar.items objectAtIndex:2];

 tabBarItem1.title = @"one";
 tabBarItem2.title = @"Two";
 tabBarItem3.title = @"Three";

 [tabbar setSelectedItem:[tabbar.items objectAtIndex:0]];
 [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"one.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"one_active.png"]];
 [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"Two".png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Two_active.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"Three.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Three_active.png"]];