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!