Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the height of UITabBar

Tags:

ios

tabbar

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.

like image 697
woutr_be Avatar asked May 21 '12 05:05

woutr_be


People also ask

How do I change the height of my tab bar?

But, the Height of TabBar can be changed by setting SizeFactor property of TabBarSplitterControl. When SizeFactor changed, TabBar Height will be changed with the new value by multiplying the SystemInformation. HorizontalScrollBarHeight with SizeFactor.

What is the height of tab bar iOS?

Update: Tab Bars Changed Too In iOS 12, iPad tab bars have also changed height from 49 to 50 points tall. This removes the height differences between toolbars and tab bars on iPad. On iPhone tab bars remain 49 points tall in portrait and 32 points tall in landscape.


1 Answers

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.
like image 197
DTs Avatar answered Oct 01 '22 22:10

DTs