Tab bar vertical offset iOS 5

Question

http://i.stack.imgur.com/NAqSJ.png

Hi

I'm having a vertical offset problem with my custom made tab bar. There appears to be a black gap between the UIImages and the bottom of the screen. How can this be fixed? I'm using the following code in my viewDidLoad() method of the first viewController:

[super viewDidLoad];
UIImage *selectedImage0 = [UIImage imageNamed:@"tabBarButtonHomeSelected.png"];
UIImage *unselectedImage0 = [UIImage imageNamed:@"tabBarButtonHomeUnselected.png"];

UIImage *selectedImage1 = [UIImage imageNamed:@"tabBarButtonUserSelected.png"];
UIImage *unselectedImage1 = [UIImage imageNamed:@"tabBarButtonUserUnselected.png"];

UIImage *selectedImage2 = [UIImage imageNamed:@"tabBarButtonPricetagSelected.png"];
UIImage *unselectedImage2 = [UIImage imageNamed:@"tabBarButtonPricetagUnselected.png"];

UIImage *selectedImage3 = [UIImage imageNamed:@"tabBarButtonStarSelected.png"];
UIImage *unselectedImage3 = [UIImage imageNamed:@"tabBarButtonStarUnselected.png"];

UIImage *selectedImage4 = [UIImage imageNamed:@"tabBarButtonGearSelected.png"];
UIImage *unselectedImage4 = [UIImage imageNamed:@"tabBarButtonGearUnselected.png"];

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

[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
[item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
[item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];

I kindly thank you.

Answer 1

Normally the tab titles would go into that space. Your tab items all have empty titles, is that intentional? If yes, then you should change the default frame of your toolbar view, probably by increasing its frame.origin.y by the amount of the gap.

Answer 2

The solution is to make three types of images. First you need a background for your TabBar. Second you need one image with the size of one button for the selected or highlighted background of one tab. Third you need your icons without any background.

Now you set your TabBar background with

[tabBar setBackgroundImage:[UIImage imageNamed:@"background.png"]];

then you set your highlighted background tile with:

[tabBar setSelectionIndicatorImage:[UIImage imageNamed:@"selected.png"]];

then you need to set your icons like you did in your question. This should do the job.

Answer 3

You can fix this in Storyboard now.

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)