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):

screenshot

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:

screenshot 2

score 66 · Answer 1 · answered Aug 28 '12 at 08:14

66

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);

answered Aug 28 '12 at 08:14

Vytis

1,170
8
13

This worked for me but only for the unselected images. The selected images have a black line at the top! Any idea anyone pls? – user1006117 Apr 17 '13 at 09:14
Worked like a charm. Though 5,0,-5,0 looked more center aligned. – Ansari Jan 01 '14 at 11:56
Still I can tap on that extra space which is below the map image option shown in question and also on the space above the map option after setting image insets. Why so? – Pooja Shah Jan 08 '15 at 13:10
Your answer helped me, +1 bro. – Hasya Dec 27 '16 at 05:39

score 25 · Answer 2 · answered Feb 26 '15 at 21:41

You can fix this in Storyboard now. Storyboard size inspector image inset adjustment Storyboard Size Inspector for Tab Bar Item

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)

score 3 · Answer 3 · answered Jun 13 '12 at 22:59

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!

answered Jun 13 '12 at 22:59

Andrea Sprega

2,221
2
29
35

That's pretty clever - I will try this on my next app. The app I was talking about in my initial question is already live. – boz Jun 14 '12 at 09:54
Just keep adding extra top transparent padding on your tabBar image and it should centre align. – shahil Feb 18 '15 at 06:50

score 2 · Accepted Answer · answered May 14 '12 at 08:59

2

It turns out that you should always have text inside a tabitem. The space was created by blank text.

answered May 14 '12 at 08:59

boz

4,891
5
41
68

Can you please clarify what you mean by "you should always have text inside a tabitem"? From the screenshot above, it seems that you already had text in tabBarItem.title – Joshua J. McKinnon Jun 08 '12 at 03:47
That text was part of the image so I tried to make the title just an empty string. – boz Jun 08 '12 at 08:05
If the text is drawn as part of your image and you don't want to have extra text on top of it, just set a string with a space inside: @" ", it will do the trick because it's not an empty string and it will not show. – chrisben Apr 07 '13 at 09:26

score 2 · Answer 5 · answered Aug 07 '12 at 13:31

This API is really poorly documented.

Your finishedSelectedImage should be an icon ~30x30 px. This is just the icon part of the tab. If you create a finishedSelectedImage that's too tall, the system will not put it right at the bottom of the screen.

Conceptually, you start with a full-width, 49px high backgroundImage for the tabBar, add a single-tab-width, 49px high selectionIndicatorImage which functions as the background image for the selected tab, then add a two versions of each tab's icon ~30x30 px, finishedUnselectedImage and finishedSelectedImage.

score -1 · Answer 6 · edited May 23 '17 at 12:34

-1

If you add the image as a subview instead with frames defined, can help you out. Check this

Try using slightly smaller images, tabbar repositions them slightly

edited May 23 '17 at 12:34

Community

1
1

answered May 10 '12 at 13:54

zahreelay

1,742
12
18

I'm sorry but I don't see how that could help me - I'm just targeting iOS 5.x here. – boz May 10 '12 at 14:00

iOS 5 custom tab bar image vertical alignment

--- Update ---

6 Answers6

Linked

Related