107

通常在每个选项卡上UITabBar都有一个小图像和一个命名选项卡的标题。图像定位/居中朝向选项卡的顶部，以容纳下方的标题。我的问题是：如果你想要一个只有图像而没有标题的 tabBar，有没有办法将图像向下移动，以便它在选项卡中更好地居中？

我目前正在使用（见下文）：

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

但更愿意使用没有标题的较大图像，目前如果我使图像大于约 70pixels@2x，它会开始从顶部边缘移开，UITabBar同时在底部留下大量未使用的空间。

4

10 回答 10

190

尝试调整tabBarItem's imageInsets（用于移动图标图像）并将控制器标题设置为 nil（因此不显示标题）。将这样的东西放在视图控制器中的-initor方法中：-viewDidLoad

Objective-C

self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;

迅速

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItem是UIBarItem具有UIEdgeInsets imageInsets属性的子类。玩一点插图，直到它看起来不错（取决于您的标签栏图标图像）

于 2013-05-15T15:15:11.093 回答
154

你也可以通过故事板来做到这一点。选择您的 tabbaritem，转到尺寸检查器并分配适当的插图。

在此处输入图像描述

*在 Xcode 版本 7.3.1 (7D1014) 上演示

于 2016-03-20T07:44:08.107 回答
54

创建 , 的子类UITabBarController，并在其 中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);
    }];
}

斯威夫特 3：

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
于 2014-02-14T08:09:47.637 回答
11

这对我有用

斯威夫特 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
于 2018-03-31T06:29:11.323 回答
10

如果您使用的是 Xamarin，则此方法有效：

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";
于 2016-03-15T11:33:09.473 回答
2

对于 iOS 11，除了设置 ImageInsets 之外，您还需要覆盖TraitCollection方法。请在您的子类 UITabBarController 类中添加该方法

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}
于 2017-12-13T10:13:34.883 回答
2

斯威夫特 3.0

您可以根据设计设置图像lnsets，设置顶部，左侧，底部和右侧。

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)
于 2017-11-09T05:10:02.510 回答
1

在Swift 4.2中，UIEdgeInsetsMake被贬低了，我们应该使用UIEdgeInsets,

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }
于 2018-12-25T17:55:36.080 回答
1

这些对我不起作用，唯一有效的解决方案是在添加图像时设置alignmentRectInsets 。这是我的样子：

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
于 2020-12-09T15:57:20.350 回答
0

2021 年，Objective-C

我尝试了所有方法，没有一种方法有效。最终我发现这是因为使用 SF 符号作为 tabbaritem 图像。如果我用自定义图像替换它，一切都会奏效。

    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)];
    ...

对于 uitabbaritem 图像分辨率，@2x 为 50x50px，@3x 为 75x75px。

于 2021-09-03T17:54:44.533 回答