How do I get the width of a UITabBarItem?

Moshe picture Moshe · Apr 4, 2011 · Viewed 13.9k times · Source

The width of a UITabBarItem varies, depending on how many there are.

How do I determine how wide my tab bar items are?

I'm looking for a property if possible, as opposed to a mathematical formula, since on the iPad, there is also an issue of padding on either side of the tab bar. Consider these screenshots. Notice the padding on either side of the tab bar items on the iPad (highlighted with the red boxes). This padding does not exist on the iPhone.

The iPad:

enter image description here

The iPhone: enter image description here

Answer

Cameron Spickert picture Cameron Spickert · Apr 4, 2011

Edit: It has been noted in the comments below that this solution did not work in a beta version of iOS 5, so be prepared to modify it to meet your needs.

I think in order to do this the right way, you have to be able to get to the frame of each tab bar item. Fortunately, this is possible:

CGFloat tabBarTop = [[[self tabBarController] tabBar] frame].origin.y;
NSInteger index = [[self tabBarController] selectedIndex];
CGFloat tabMiddle = CGRectGetMidX([[[[[self tabBarController] tabBar] subviews] objectAtIndex:index] frame]);

The above code gives you the y coordinate of the top of the tab bar and the x coordinate of the middle of the selected tab item. From here, you can add your indicator view to the tab bar controller's view relative to this point.

Disclaimer: The danger with this approach is that it peeks under the hood of the UITabBar class by accessing its view hierarchy and the frame property of instances of the private UITabBarButton class. It is possible (however unlikely) that this approach could be affected/broken by a future iOS update. However, you're not accessing any private APIs, so this shouldn't get your app rejected from the App Store.

I made a simple iPad project demonstrating how it works, complete with animations.