UITabBar customisation not working as expected

I have a three tab UITabBar in which the background of each tab is set, along with the background of the tabbar itself, as seen in the first image below. Each UITabBarItem has its FinishedSelectedImage and FinishedUnselectedImage set, and an NSString to its title. These images are glyphs (icons).

However, having set the selectionIndicatorImage to an image sized 106x48px, there is ~1px space to the right of the third tab, when in its selected state (see second photo).

Please can you tell me how I can remove the additional space? I have tried using an image sized 1px wider, but that made no difference.

Edit--- I read that this could be a problem due to an incorrectly sized selectionIndicatorImage, but I can confirm that this was not a fix -- I tried using a 107x49px image, and that too did not make a difference.

Max.

Tab Bar (how it should be upon selection)

Tab Bar (how it shows up on the third tab - notice the 1px on the right)

// customise the UITabBar - set the background image and the selected background image
[self.tabBarController.tabBar setBackgroundImage:[UIImage imageNamed:@"tab_bar"]];
[self.tabBarController.tabBar setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selection_bg_3"]];


// this is in a for loop.
UITabBarItem *item = [[UITabBarItem alloc] init];
[item setTitle:[titles objectAtIndex:index]];
[item setImage:[UIImage imageNamed:[image_titles objectAtIndex:index]]];
[item setFinishedSelectedImage:[UIImage imageNamed:[[image_titles objectAtIndex:index] stringByAppendingString:@"_selected"]] withFinishedUnselectedImage:[UIImage imageNamed:[image_titles objectAtIndex:index]]];
[navigationController setTabBarItem:item];
[item release];

Solution

I ended up subclassing UITabBarController using three UIImageViews as each tab's selectionIndicatorBackground, and then using a further UIImageView to display the tab's glyph, and a UILabel for displaying its title.

Here is the code:

@interface LPTabBarController : UITabBarController

@property (nonatomic, retain) UIImageView *firstTab, *secondTab, *thirdTab, *firstTabBG, *secondTabBG, *thirdTabBG;
@property (nonatomic, retain) UILabel *firstTabLabel, *secondTabLabel, *thirdTabLabel;

@end


@implementation LPTabBarController

@synthesize firstTab, secondTab, thirdTab, firstTabBG, secondTabBG, thirdTabBG, firstTabLabel, secondTabLabel, thirdTabLabel;

- (id) init {

    if ((self = [super init])) {

        [self initialise];

    }

    return self;

}

- (void) setViewControllers:(NSArray *)viewControllers {

    [self setViewControllers:viewControllers animated:NO];

}

- (void) setViewControllers:(NSArray *)viewControllers animated:(BOOL)animated {

    [super setViewControllers:viewControllers animated:animated];

    for (UITabBarItem *item in self.tabBar.items) {

        [item setEnabled:NO];

    }

}

- (void) initialise {

    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.tabBar.frame.origin.y - 10, 320, 59)];
    [bg setUserInteractionEnabled:YES];
    [bg setImage:[UIImage imageNamed:@"tab_bar"]];

    CGFloat widthbg   = ceilf(self.view.frame.size.width / 3);
    CGFloat heightbg  = self.tabBar.frame.size.height;
    CGFloat width = 23, y = 5;

    UITapGestureRecognizer *gest = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)];

    self.firstTab = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_bar_user"]] autorelease];
    [self.firstTab setFrame:CGRectMake(ceilf((widthbg - width) / 2), y, 23, 23)];

    self.firstTabLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0, 27, widthbg, 20)] autorelease];
    [self.firstTabLabel setTextAlignment:NSTextAlignmentCenter];
    [self.firstTabLabel setText:@"Profile"];
    [self.firstTabLabel setFont:[UIFont boldSystemFontOfSize:13]];
    [self.firstTabLabel setTextColor:RGB(80, 23, 17)];
    [self.firstTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
    [self.firstTabLabel setShadowOffset:CGSizeMake(0, 1)];
    [self.firstTabLabel setBackgroundColor:[UIColor clearColor]];

    self.firstTabBG = [[[UIImageView alloc] initWithImage:nil] autorelease];
    [self.firstTabBG setTag:01];
    [self.firstTabBG setFrame:CGRectMake(0, 10, widthbg, heightbg)];
    [self.firstTabBG addSubview:self.firstTab];
    [self.firstTabBG addSubview:self.firstTabLabel];
    [self.firstTabBG setUserInteractionEnabled:YES];
    [self.firstTabBG addGestureRecognizer:gest];
    [bg addSubview:self.firstTabBG];

    [gest release];

    gest = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)];

    self.secondTab = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_bar_explore_selected"]] autorelease];
    [self.secondTab setFrame:CGRectMake(ceilf((widthbg - width) / 2), y, 23, 23)];

    self.secondTabLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0, 27, widthbg, 20)] autorelease];
    [self.secondTabLabel setTextAlignment:NSTextAlignmentCenter];
    [self.secondTabLabel setText:@"Explore"];
    [self.secondTabLabel setFont:[UIFont boldSystemFontOfSize:13]];
    [self.secondTabLabel setTextColor:RGB(80, 23, 17)];
    [self.secondTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
    [self.secondTabLabel setShadowOffset:CGSizeMake(0, 1)];
    [self.secondTabLabel setBackgroundColor:[UIColor clearColor]];

    self.secondTabBG = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_bar_selected_bg"]] autorelease];
    [self.secondTabBG setTag:02];
    [self.secondTabBG setUserInteractionEnabled:YES];
    [self.secondTabBG addGestureRecognizer:gest];
    [self.secondTabBG setFrame:CGRectMake(widthbg, 10, widthbg, heightbg)];
    [self.secondTabBG addSubview:self.secondTab];
    [self.secondTabBG addSubview:self.secondTabLabel];
    [bg addSubview:self.secondTabBG];

    [self tapped:gest];
    [gest release];

    gest = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)];

    self.thirdTab = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_bar_settings"]] autorelease];
    [self.thirdTab setFrame:CGRectMake(ceilf((widthbg - width) / 2), y, 23, 23)];

    self.thirdTabLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0, 27, widthbg, 20)] autorelease];
    [self.thirdTabLabel setTextAlignment:NSTextAlignmentCenter];
    [self.thirdTabLabel setText:@"Settings"];
    [self.thirdTabLabel setFont:[UIFont boldSystemFontOfSize:13]];
    [self.thirdTabLabel setTextColor:RGB(80, 23, 17)];
    [self.thirdTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
    [self.thirdTabLabel setShadowOffset:CGSizeMake(0, 1)];
    [self.thirdTabLabel setBackgroundColor:[UIColor clearColor]];

    self.thirdTabBG = [[[UIImageView alloc] initWithImage:nil] autorelease];
    [self.thirdTabBG setTag:03];
    [self.thirdTabBG setFrame:CGRectMake(widthbg * 2, 10, widthbg, heightbg)];
    [self.thirdTabBG addSubview:self.thirdTab];
    [self.thirdTabBG addSubview:self.thirdTabLabel];
    [self.thirdTabBG setUserInteractionEnabled:YES];
    [self.thirdTabBG addGestureRecognizer:gest];
    [bg addSubview:self.thirdTabBG];
    [gest release];

    [self.view addSubview:bg];
    [bg release];

}

static int lastIndex = 2;

- (void) tapped:(UITapGestureRecognizer *) gest {

    switch (lastIndex) {
        case 1:
            [self.firstTab setImage:[UIImage imageNamed:@"tab_bar_user"]];
            [self.firstTabBG setImage:nil];
            [self.firstTabLabel setTextColor:RGB(80, 23, 17)];
            [self.firstTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
            [self.firstTabLabel setShadowOffset:CGSizeMake(0, 1)];
            break;

        case 2:
            [self.secondTab setImage:[UIImage imageNamed:@"tab_bar_explore"]];
            [self.secondTabBG setImage:nil];
            [self.secondTabLabel setTextColor:RGB(80, 23, 17)];
            [self.secondTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
            [self.secondTabLabel setShadowOffset:CGSizeMake(0, 1)];

            break;

        case 3:
            [self.thirdTab setImage:[UIImage imageNamed:@"tab_bar_settings"]];
            [self.thirdTabBG setImage:nil];
            [self.thirdTabLabel setTextColor:RGB(80, 23, 17)];
            [self.thirdTabLabel setShadowColor:[UIColor colorWithWhite:1 alpha:0.35]];
            [self.thirdTabLabel setShadowOffset:CGSizeMake(0, 1)];
            break;
    }

    switch (gest.view.tag) {
        case 1 :{

            [self setSelectedIndex:0];
            [self.firstTab setImage:[UIImage imageNamed:@"tab_bar_user_selected"]];
            [self.firstTabBG setImage:[UIImage imageNamed:@"tab_bar_selected_bg"]];
            [self.firstTabLabel setTextColor:RGB(252, 208, 170)];
            [self.firstTabLabel setShadowColor:RGB(80, 23, 17)];
            [self.firstTabLabel setShadowOffset:CGSizeMake(0, -1)];

            break;

        }

        case 2: {

            [self setSelectedIndex:1];
            [self.secondTab setImage:[UIImage imageNamed:@"tab_bar_explore_selected"]];
            [self.secondTabBG setImage:[UIImage imageNamed:@"tab_bar_selected_bg"]];
            [self.secondTabLabel setTextColor:RGB(252, 208, 170)];
            [self.secondTabLabel setShadowColor:RGB(80, 23, 17)];
            [self.secondTabLabel setShadowOffset:CGSizeMake(0, -1)];
            break;

        }

        case 3: {

            [self setSelectedIndex:2];
            [self.thirdTab setImage:[UIImage imageNamed:@"tab_bar_settings_selected"]];
            [self.thirdTabBG setImage:[UIImage imageNamed:@"tab_bar_selected_bg"]];
            [self.thirdTabLabel setTextColor:RGB(252, 208, 170)];
            [self.thirdTabLabel setShadowColor:RGB(80, 23, 17)];
            [self.thirdTabLabel setShadowOffset:CGSizeMake(0, -1)];
            break;

        }
    }

    lastIndex = gest.view.tag;

}

- (void) dealloc {

    [firstTab release];
    [firstTabBG release];
    [secondTab release];
    [secondTabBG release];
    [thirdTab release];
    [thirdTabBG release];
    [firstTabLabel release];
    [secondTabLabel release];
    [thirdTabLabel release];
    [super dealloc];

}