How do I remove UITabBarItem selectionImage padding? - ios

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.