Moving UITabBarItem Image down?
IphoneObjective CCocoa TouchUitabbarUitabbaritemIphone Problem Overview
Normally on each tab of a UITabBar
you have a small image and a title naming the tab. The image is positioned/centred towards the top of the tab to accommodate the title underneath. My question is: if you want to have a tabBar with just an image and no title is there a way to move the image down so it centers better within the tab?
I am using (see below) currently:
[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];
but would prefer to use to larger image with no title, at the moment if I make the image bigger than about 70pixels@2x it starts edging off the top of the UITabBar
whilst leaving a lot of unused space at the bottom.
Iphone Solutions
Solution 1 - Iphone
Try adjusting tabBarItem
's imageInsets
(for moving the icon image) and setting the controllers title to nil (so no title is displayed). Put something like this to -init
or -viewDidLoad
method in view controller:
Objective-C
self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;
Swift
self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil
UITabBarItem
is a subclass of UIBarItem
which has UIEdgeInsets imageInsets
property. Play a little with the insets until it looks good (depending on your tabbar icon images)
Solution 2 - Iphone
You can do it via storyboard too. Select your tabbaritem, go to size inspector and assign the appropriate insets.
*Demonstrated on Xcode, Version 7.3.1 (7D1014)
Solution 3 - Iphone
Make a subclass of UITabBarController
, and in its viewDidLoad
:
- (void)viewDidLoad
{
[super viewDidLoad];
[self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
vc.tabBarItem.title = nil;
vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
}];
}
Swift 3:
for vc in self.viewControllers! {
vc.tabBarItem.title = nil
vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
Solution 4 - Iphone
This worked for me
Swift 4
let array = tabBarController?.customizableViewControllers
for controller in array! {
controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
Solution 5 - Iphone
If you're using Xamarin, this works:
screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";
Solution 6 - Iphone
SWIFT 3.0
You can set image lnsets, set top,left,bottom and right according desing.
self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)
Solution 7 - Iphone
For iOS 11 you need to override TraitCollection method apart from setting ImageInsets. Please add the method in your subclassed UITabBarController class
public override UITraitCollection TraitCollection {
get {
return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
}
}
Solution 8 - Iphone
In Swift 4.2, UIEdgeInsetsMake
is depricated, instead we should use UIEdgeInsets
,
let array = tabBarController?.customizableViewControllers
for controller in array! {
controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
}
Solution 9 - Iphone
These didn't work for me, the only solution that worked was setting the alignmentRectInsets when adding the image. Here's what mine looked like:
let newsView = NewsViewController()
let newsIcon = UITabBarItem(title: nil, image: UIImage(systemName: "newspaper")?.withAlignmentRectInsets(UIEdgeInsets(top: 8.5, left: 0, bottom: -8.5, right: 0)), tag: 0)
newsView.tabBarItem = newsIcon
let viewControllers = [newsNavController]
self.viewControllers = viewControllers
Solution 10 - Iphone
In 2021, Objective-C
I try all the approaches, no one is worked. Eventually I found that is because of using SF symbol as tabbaritem image. If I replace it with custom image, things worked.
NSArray *tabItems = [self.tabBar items];
// set tabItem icon, remove blue image with render mode set.
UIImage *image1 = [[UIImage imageNamed:@"myIcon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// set title offset
[tabItems[0] setTitlePositionAdjustment:UIOffsetMake(0, 20)];
[tabItems[1] setTitlePositionAdjustment:UIOffsetMake(-20, 20)];
[tabItems[2] setTitlePositionAdjustment:UIOffsetMake(20, 20)];
[tabItems[3] setTitlePositionAdjustment:UIOffsetMake(0, 20)];
// set image offset
[tabItems[0] setImageInsets:UIEdgeInsetsMake(0, 0, -30, 0)];
...
For uitabbaritem image resolution, 50x50px for @2x, and 75x75px for @3x.