向下移动 UITabBarItem 图像? ?

通常在 UITabBar的每个选项卡上都有一个小图像和一个标题来命名选项卡。图像定位/中心朝向标签的顶部,以适应下面的标题。我的问题是: 如果你想要一个只有一个图片而没有标题的标签栏,有没有一种方法可以将图片向下移动,使它更好地集中在标签栏中?

我现在正在使用(见下文) :

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

但是更喜欢没有标题的大图片,现在如果我把图片放大到大约70像素@2x,它就会开始从 UITabBar的顶部边缘移动,同时在底部留下大量未使用的空间。

58430 次浏览

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)

iPad specific adjustments

Tab Bar items on iPad are distributed horizontally (icon and label next to each other).

To adjust space between icon and label, adjust horizontal imageInsets instead of vertical ones.

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)
}

If you're using Xamarin, this works:

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";

You can do it via storyboard too. Select your tabbaritem, go to size inspector and assign the appropriate insets.

enter image description here

*Demonstrated on Xcode, Version 7.3.1 (7D1014)

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)

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);
}
}

This worked for me

Swift 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

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)
}

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

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.

//On tabbar viewDidload
override func viewDidLoad() {
super.viewDidLoad()
self.delegate = self
    

tabBar.items![0].imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}