Is it possible to change the width of UITabbarItem in UITabbar and margins between each UITabbarItem for iPad Application?
The problem is that standard margins are too large for my layout - client want tabs to be more compact :/
Or should I mess with UIToolbar to achieve this goal?
For Tabbar item width :
[[UITabBar appearance] setItemWidth:self.window.frame.size.width/NUMBER_OF_ITEMS];
For tabbar frame :
[self.tabBar setFrame:rectFrame];
I have solved just the same problem it this way: my goal was to customize tab bar by using images, that were sent by the designer for me.
I have attached the .png files for the project, initialized the correspondent variables of type UIImage* and used UITabBarItem function setFinishedSelectedImage: withFinishedUnselectedImage: to set the images for active / inactive state of UITabbarItem:
UIImage * left_active, *left_inactive, *center_active, *center_inactive, *right_active, *right_inactive;
left_active = [UIImage imageNamed:@"left_active_img"];
...
[self.leftTabBarItem setFinishedSelectedImage:left_active withFinishedUnselectedImage:left_inactive];
[self.centerTabBarItem setFinishedSelectedImage:center_active withFinishedUnselectedImage:center_inactive];
[self.rightTabBarItem setFinishedSelectedImage:right_active withFinishedUnselectedImage:right_inactive];
But the customized tabbarItems were smaller, than the designer's images and were allocated at the center of the screen one upon other:
2) To fix this I have ADDED ADDITIONAL UITABBARITEMS - at the left and at the right corner of the initial ones
3) the were created the correspondent outlets for the UITabBarItems:
.h-file:
@property (nonatomic, retain) IBOutlet UITabBar * tabBar;
// THE INTIAL items
@property (nonatomic, retain) IBOutlet UITabBarItem * leftTabBarItem;
@property (nonatomic, retain) IBOutlet UITabBarItem * centerTabBarItem;
@property (nonatomic, retain) IBOutlet UITabBarItem * rightTabBarItem;
// THE ADDITIONAL items
@property (nonatomic, retain) IBOutlet UITabBarItem * left_1;
@property (nonatomic, retain) IBOutlet UITabBarItem * left_2;
@property (nonatomic, retain) IBOutlet UITabBarItem * center_1;
@property (nonatomic, retain) IBOutlet UITabBarItem * center_2;
@property (nonatomic, retain) IBOutlet UITabBarItem * right_1;
@property (nonatomic, retain) IBOutlet UITabBarItem * right_2;
then attached the Outlets to the UITabBarItems in the order listed below:
and CORRECTED THE UITabbarDelegate METHOD in the delegating class to switch ONLY beet wen the visible items .m-file:
#pragma mark - UITabbarDelegate
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
if (item == self.leftTabBarItem)
{
NSLog(@"0"); // first visible item selected
} else if (item == self.centerTabBarItem)
{
NSLog(@"1"); // second visible item selected
} else if (item == self.rightTabBarItem)
{
NSLog(@"2"); // third visible item selected
} else if (item == self.left_1){
[self.tabBar setSelectedItem: self.leftTabBarItem];
} else if (item == self.left_2){
[self.tabBar setSelectedItem: self.leftTabBarItem];
} else if (item == self.center_1){
[self.tabBar setSelectedItem: self.centerTabBarItem];
}else if (item == self.center_2){
[self.tabBar setSelectedItem: self.centerTabBarItem];
}else if (item == self.right_1){
[self.tabBar setSelectedItem: self.rightTabBarItem];
} else if (item == self.right_2){
[self.tabBar setSelectedItem: self.rightTabBarItem];
}
}
Now everything looks and works properly.
You can use the same steps to customize the size and interspaces between UITabBarItems by adding additional items and correcting delegate methods.
You can change the spacing of the tab bar items by subclassing UITabBar and overriding its layoutSubviews method. You will find all tab bar buttons in the self.subViews array. Their class is the non-public UITabBarButton but they inherit from UIControl so you can identify all tab bar buttons checking if they are kind of UIControl class. Then all you need is to change the frame of the tab bar buttons.
You can use setSelectionIndicatorImage to make your tab more compact.
The UITabBarItem width in iPad will match the selectionIndicatorImage's width
in AppDelegate.m
[[UITabBar appearance] setItemWidth:self.window.frame.size.width/NUMBER_OF_YOUR_TAB];
[[UITabBar appearance] setItemSpacing:0];
[[UITabBar appearance] setSelectionIndicatorImage:[self imageFromColor:[UIColor clearColor] forSize:CGSizeMake(self.window.frame.size.width/NUMBER_OF_YOUR_TAB, 10) withCornerRadius:0]];
you can use below code to create a image programmatically
- (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size withCornerRadius:(CGFloat)radius
{
CGRect rect = CGRectMake(0, 0, size.width, size.height);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIGraphicsBeginImageContext(size);
[[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius] addClip];
// Draw your image
[image drawInRect:rect];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
No subclassing is needed.
tabBarController.tabBar.itemPositioning = .centered
tabBarController.tabBar.itemWidth = 40
tabBarController.tabBar.itemSpacing = 38
I don't think it is possible. You can create a custom tab bar. Also messing around with default UItabbar might cause rejection during App approval process.
You cannot change the width of the the UITabBarItem, and you cannot do this even after subclassing the UITabBarItem. Apple has certain restrictions in the way they want the developers to implement the applications.
You will need to use a UIToolBar for this, and my best bet is for you to go to github and as there a lot of sample applications which use a scrollable UIToolBar at the bottom instead of the UITabBar.
