How do I remove UITabBarItem selectionImage padding?

Question

I am setting the SelectionIndicatorImage as a stretchable image (to accommodate for various device widths) via UITabBar appearance:

UIImage *selectedImage = [[UIImage imageNamed:@"SelectedTab"] stretchableImageWithLeftCapWidth:0 topCapHeight:0];
[[UITabBar appearance] setSelectionIndicatorImage:selectedImage];

As a result I get a 2pt padding on the screen edges. I am basically trying to use selection indicator as a background for currently selected UITabBarItem.

http://i.stack.imgur.com/qFHEk.png

What would be an easy way to solve this?

Answer 1

If you want to use UITabBarController in your app with selection and unselection feature then you should this code

[[self.tabBarController tabBar] setBackgroundImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"bg_tabBar" ofType:@"png"]]];
[[self.tabBarController tabBar] setSelectionIndicatorImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"bg_tabItem_selected" ofType:@"png"]]];

NSArray *arrTabItems = [[self.tabBarController tabBar] items];
UITabBarItem *tabBarItem = [arrTabItems objectAtIndex:0];
[tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"img_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"img_unselected.png"]];
[tabBarItem setImageInsets:UIEdgeInsetsMake(5, 5, 0, 5)];

Answer 2

I've tried something similar. Ended up this way:

Subclass UITabBarController and add property:

@property(nonatomic, readonly) UIImageView *imageView;

Setup your image as you want:

- (void)viewDidLoad {
    [super viewDidLoad];

    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabbaritem"]];
    [self.tabBar addSubview:self.imageView];
}

Place your subview in correct position:

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    // get all UITabBarButton views
    NSMutableArray *tabViews = [NSMutableArray new];
    for (UIView *view in self.tabBar.subviews) {
        if ([view isKindOfClass:[UIControl class]]) {
            [tabViews addObject:[NSValue valueWithCGRect:view.frame]];
        }
    }

    // sort them from left to right
    NSArray *sortedArray = [tabViews sortedArrayUsingComparator:^NSComparisonResult(NSValue *firstValue, NSValue *secondValue) {
        CGRect firstRect = [firstValue CGRectValue];
        CGRect secondRect = [secondValue CGRectValue];

        return CGRectGetMinX(firstRect) > CGRectGetMinX(secondRect);
    }];

    // place your imageView on selected index button frame
    CGRect frame = self.tabBar.bounds;
    CGSize imageSize = CGSizeMake(CGRectGetWidth(frame) / self.tabBar.items.count, self.imageView.image.size.height);
    CGRect selectedRect = sortedArray.count > self.selectedIndex ? [sortedArray[self.selectedIndex] CGRectValue] : CGRectZero;
    [self.imageView setFrame:CGRectIntegral(CGRectMake(CGRectGetMinX(selectedRect), CGRectGetMaxY(frame) - imageSize.height,
                                                       CGRectGetWidth(selectedRect), imageSize.height))];
}

Then you only need to refresh layout on each tab change:

- (void)setSelectedIndex:(NSUInteger)selectedIndex {
    [super setSelectedIndex:selectedIndex];

    [self.view setNeedsLayout];
}

- (void)setSelectedViewController:(UIViewController *)selectedViewController {
    [super setSelectedViewController:selectedViewController];

    [self.view setNeedsLayout];
}

---

Old answer how to remove padding (this is what I firstly understood as your question, I'm leaving it as a reference for other people).

In iOS 7+ UITabBar has following property:

/*
 Set the itemSpacing to a positive value to be used between tab bar items
 when they are positioned as a centered group.
 Default of 0 or values less than 0 will be interpreted as a system-defined spacing.
 */
@property(nonatomic) CGFloat itemSpacing NS_AVAILABLE_IOS(7_0) UI_APPEARANCE_SELECTOR;

This should enable you to get rid of padding between items.