2

I'm wanting to create a custom tab bar design with only 3 buttons. The issue comes when trying to split the images to fit on the iPhones screen. With the width being 320, you need 2 tabs to be 106 wide and the 3rd to be 108. When I create the images at the right size, they don't fit and I end up with a 1px line down the right hand side like this:

enter image description here

This is the code I'm using:

UIImage *selectedImage0 = [UIImage imageNamed:@"tb_1_down.png"];
UIImage *unselectedImage0 = [UIImage imageNamed:@"tb_1_up.png"];

UIImage *selectedImage1 = [UIImage imageNamed:@"tb_2_down.png"];
UIImage *unselectedImage1 = [UIImage imageNamed:@"tb_2_up.png"];

UIImage *selectedImage2 = [UIImage imageNamed:@"tb_3_down.png"];
UIImage *unselectedImage2 = [UIImage imageNamed:@"tb_3_up.png"];

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

self.tabBarController.tabBar.frame = CGRectMake(0, 430, 320, 50);

[self.tabBarController.tabBar setBackgroundImage:[UIImage imageNamed:@"tb_tabBar_BG.png"]];

[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
[item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];

Is there any way to make 'item1' 108 wide instead of 106?!

davidford.me
  • 824
  • 1
  • 15
  • 24
  • 106+106+107 = 319... 319 = 320 - 1. Maybe that's why there is a blank pixel? – Matthias Bauch May 16 '12 at 09:49
  • My bad maths in the question. Even at 106, 108, 106 it still leaves the 1px at the side... Amended question. – davidford.me May 16 '12 at 10:11
  • The issue may be caused by improper image size, try, setting a background color for item2 and check if it is visible. if the bg color is visible u may need to check the image size. – Sathya May 16 '12 at 10:21
  • The image size on image 1 is 106 x 62, image 2 is 108 x 62 and image 3 is 106 x 62 adding up to 320 x 62...? – davidford.me May 16 '12 at 10:38
  • You should set the x,y positions and width , height in the class of CustomTablBar.m , where you are giving size of each tabBarItem. – Khalid Usman May 16 '12 at 13:08

3 Answers3

1

This might give you what you want: Setting a background image for a tabbar

This has process to make fully custom tab bar buttons.

Community
  • 1
  • 1
HumaN
  • 83
  • 7
0

I fear you may be looking at a 100% custom implementation of UITabBar/UITabBarController - I don't know of any way to customise the stock one to this extent.

Andrew Ebling
  • 10,175
  • 10
  • 58
  • 75
0

I managed to fix this issue by subclassing the UITabBarController, and using UIImageViews instead of UIButtons as @human suggested, as I couldn't get rid of the irrational way of changing the buttons image, which flickered and highlighted irregardless of whether you set an image or not.

My code can be found in the answer here: UITabBar customisation not working as expected

Community
  • 1
  • 1
max_
  • 24,076
  • 39
  • 122
  • 211