iOS 5 custom tab bar image vertical alignment

Question

I'm getting some odd behaviour with my custom tab bar. The images seem to be aligned incorrectly. Here is a screenshot (I have removed my own tab bar background to highlight my problem):

Here is the code I'm using to set the images for each state:

self.tabBarController = [[[UITabBarController alloc] init] autorelease];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:homeNavController, whatsOnNavController, mapNavController, infoNavController, nil];
self.tabBarController.delegate = self;

// For iOS 5 only - custom tabs
if ([self.tabBarController.tabBar respondsToSelector:@selector(selectedImageTintColor)]) 
{

    // Set the background images
    //[[UITabBar appearance] setBackgroundImage: [UIImage imageNamed:@"nav_bg.png"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"nav_over.png"]];

    [homeNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_home_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_home"]];
    [whatsOnNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_whats_on_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_whats_on"]];
    [mapNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_map_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_map"]];
    [infoNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_info_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_info"]];

}

All of my replacement tab images are correctly sized (49 pixels high and 80 pixels wide for the non-retina versions).

What could be causing this odd behaviour?

--- Update ---

Here is an updated screenshot with the background in place:

Answer 1

There is a property on UIBarItem (UIBarButton item inherits from this class) imageInsets .

To use full height images (49px) for finishedSelectedImage and finishedUnselectedImage you need to set these image insets:

tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

Answer 2

You can fix this in Storyboard now. Storyboard size inspector image inset adjustment

Select the Tab Bar Item you want to adjust, open the Size Inspector, and adjust the Top and Bottom Image Insets. You need to adjust them the same amount or they will just squish/stretch your image (so +5 in Top, and -5 in Bottom)

Answer 3

This may seem a bit hackish but I believe it's the only way you can achieve what you want: you just need to use tab bar finished images which have a transparent 11 pixels "top padding" (22 pixels for retina). Your images will then have to be 60px (120px) high.

My app made it to the App Store using this technique, so you should be safe to use it.

Hope it helps!

Answer 4

This API is really poorly documented.

Your finishedSelectedImage should be an icon ~30x30 px. This is just the icon part of the tab. If you create a finishedSelectedImage that's too tall, the system will not put it right at the bottom of the screen.

Conceptually, you start with a full-width, 49px high backgroundImage for the tabBar, add a single-tab-width, 49px high selectionIndicatorImage which functions as the background image for the selected tab, then add a two versions of each tab's icon ~30x30 px, finishedUnselectedImage and finishedSelectedImage .

Answer 5

It turns out that you should always have text inside a tabitem. The space was created by blank text.

Answer 6

If you add the image as a subview instead with frames defined, can help you out. Check this

Try using slightly smaller images, tabbar repositions them slightly