Custom UITabBarItem without title label

Question

I am trying to create a UITabBar that I will customize using the appearance API. I am stuck on trying to remove the title label from the UITabBarItem and resizing the image to make it centered. If you just delete the title text, there will be empty space below the image and the bottom of the bar.

Does anyone know how to make a UITabBarItem without a title?

Are you sure that when calling `initWithTitle:image:tag:` and passing nil for the title, and a valid pointer to an image, you still lose pixels to an empty title? — Richard Altenburg - Brainchild, Oct 07 '12 at 18:10
Yes, it will show a few blank pixels at the bottom and shift the image up. For example, when making the bar height only slightly bigger than the item image, the image will be cut off on the top and there will be empty space below — mrosales, Oct 07 '12 at 23:36

score 11 · Answer 1 · answered Mar 12 '15 at 11:15

Set the title to nil and move the icon

self.tabBarItem = [[UITabBarItem alloc] initWithTitle:nil
                                                image:[[UIImage imageNamed:@"icon_tabbar_inactive.png"]
                                                    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                        selectedImage:[[UIImage imageNamed:@"icon_tabbar_active.png"]
                                                    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

// Move the tabbar icon to the middle of tabbar
self.tabBarItem.imageInsets = UIEdgeInsetsMake(6.0, 0.0, -6.0, 0.0);

score 7 · Accepted Answer · answered Aug 13 '13 at 17:11

made same task just today.

Since I can't use full space of tab bar for item image I just change tab bar background when user press any tab.

So the first step is to prepare background images with full size buttons for every tab selected.
Then create custom class and assign it for your tab bar controller

In your custom class set background image for first tab in ViewDidLoad:

[[self tabBar] setBackgroundImage:[UIImage imageNamed:@"tabShopsActive"]];
[[self tabBar] setSelectionIndicatorImage:[UIImage imageNamed:@"tabSelection"]];

Add background change for every UIController in ViewWillAppear:

UITabBarController *bar = [self tabBarController];
[bar.tabBar setBackgroundImage:[UIImage imageNamed:@"tabDiscountsActive"]];

So now when user press any tab Tab Bar change background to show correct picture for it.

It is my resulting tab bar when second tab selected:

Tab bar without labels

score 0 · Answer 3 · answered Jan 08 '15 at 06:25

0

My solution for the same problem:

1, make the bar origin y lower, push the empty space outside the screen.

2, reset the background to ensure it just cover the right position.

answered Jan 08 '15 at 06:25

Rui LIU

1

Custom UITabBarItem without title label

3 Answers3