Setting the height of UITabBar

woutr_be picture woutr_be · May 21, 2012 · Viewed 11.4k times · Source

I've created a simple custom tabbar by setting the images of each item, as following:

UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"activity_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"activity.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"agenda_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"agenda.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"settings_active.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"settings.png"]];

While this works great, I noticed that there is a black blank space under my tabbar

enter image description here

My images are 44px in height, but I think I have to somehow change the height of my tabbar.

Answer

DTs picture DTs · Nov 22, 2012

The tabBar itself is 49px, and it is rendered in black color behind your images (perhaps in [UITabBar layoutSubviews]). Then your images are rendered on top. The reason of the offset is because the images you supply are too large, UITabBar expects 30x30px icons, not a picture of the entire UITabBarItem.

Here's a few things to try:

  1. Supply only a 30x30px icon, instead of the entire tab button
  2. After you set your images on the tab item, try this: [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)]; // play with insets until it renders correctly
  3. Subclass UITabBar and override layoutSubviews to first call super, then reposition your image as you like. Not recommended, it might break in future iOS versions.