Question

https://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

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.