Question

简单的问题，如何删除标签栏项目文字并仅显示图片？

我想在Instagram应用中喜欢这些酒吧项目：

enter image description here

在xcode 6中的检查器中，我删除标题并选择@ 2x（50px）和@ 3x（75px）图像。但是，图像不使用已删除文本的可用空间。任何想法如何实现相同的标签栏项目图像，如在Instagram应用程序？

Answer 1

您应该使用imageInsets UITabBarItem属性。以下是示例代码：

let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)

UIEdgeInsets内的值取决于您的图片大小。以下是我的应用中代码的结果：

enter image description here

Answer 2

// Remove the titles and adjust the inset to account for missing title
for(UITabBarItem * tabBarItem in self.tabBar.items){
    tabBarItem.title = @"";
    tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
}

Answer 3

以下是如何在故事板中执行此操作。

清除标题文字，并设置图像插图，如下面的屏幕截图

请记住，图标大小应遵循apple design guideline

这意味着你应该有@ 1x的25px x 25px，@ 2x的50px x 50px，@ 3x的75px x 75px

Answer 4

使用方法将每个UITabBarItem s title属性设置为"" 如果在视图控制器imageInsets中设置，则更新self.title无法正常工作。例如，如果self.viewControllers中嵌入了UINavigationController的UITabBarController，则需要在导航栏上显示标题。在这种情况下，使用UINavigationItem直接设置self.navigationItem.title标题，而不是self.title。

Answer 5

ddiego回答

Swift版

与iOS 11兼容

在设置viewController的标题后，在viewControllers的每个第一个子节点的viewDidLoad中调用此函数

最佳实践：

可选择@daspianist在评论中建议

创建类此类BaseTabBarController的子类： UITabBarController，UITabBarControllerDelegate并放置此函数在子类的viewDidLoad
中

func removeTabbarItemsText() {

    var offset: CGFloat = 6.0

    if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
        offset = 0.0
    }

    if let items = tabBar.items {
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsetsMake(offset, 0, -offset, 0);
        }
    }
}

Answer 6

如果你正在使用故事板，这将是你最好的选择。它遍历所有标签栏项目，并且每个项目标题都设置为空，并使图像全屏显示。（您必须在故事板中添加图像）

for tabBarItem in tabBar.items!
{
   tabBarItem.title = ""
   tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}

Answer 7

iOS 11在许多解决方案中引起了争论，所以我只是通过继承UITabBar并覆盖layoutSubviews来解决我在iOS 11上的问题。

class MainTabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        // iOS 11: puts the titles to the right of image for horizontal size class regular. Only want offset when compact.
        // iOS 9 & 10: always puts titles under the image. Always want offset.
        var verticalOffset: CGFloat = 6.0

        if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
            verticalOffset = 0.0
        }

        let imageInset = UIEdgeInsets(
            top: verticalOffset,
            left: 0.0,
            bottom: -verticalOffset,
            right: 0.0
        )

        for tabBarItem in items ?? [] {
            tabBarItem.title = ""
            tabBarItem.imageInsets = imageInset
        }
    }
}

Answer 8

我在BaseTabBarController的viewDidLoad中使用了以下代码。请注意，在我的示例中，我有5个选项卡，所选图像将始终为base_image +＆＃34; _selected＆＃34;。

// Get tab bar and set base styles
let tabBar = self.tabBar;
tabBar.backgroundColor = UIColor.whiteColor()

// Without this, images can extend off top of tab bar
tabBar.clipsToBounds = true

// For each tab item..
let tabBarItems = tabBar.items?.count ?? 0
for i in 0 ..< tabBarItems {
    let tabBarItem = tabBar.items?[i] as UITabBarItem

    // Adjust tab images (Like mstysf says, these values will vary)
    tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);

    // Let's find and set the icon's default and selected states
    // (use your own image names here)
    var imageName = ""
    switch (i) {
    case 0: imageName = "tab_item_feature_1"
    case 1: imageName = "tab_item_feature_2"
    case 2: imageName = "tab_item_feature_3"
    case 3: imageName = "tab_item_feature_4"
    case 4: imageName = "tab_item_feature_5"
    default: break
    }
    tabBarItem.image = UIImage(named:imageName)!.imageWithRenderingMode(.AlwaysOriginal)
    tabBarItem.selectedImage = UIImage(named:imageName + "_selected")!.imageWithRenderingMode(.AlwaysOriginal)
}

Answer 9

Swift 4方法

我能够通过实现一个带TabBarItem并对其进行格式化的函数来完成这个技巧。

向下移动图像以使其更加居中，并隐藏标签栏的文本。比将其标题设置为空字符串更好，因为当你有一个NavigationBar时，TabBar在选中后重新获得viewController的标题

func formatTabBarItem(tabBarItem: UITabBarItem){
    tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .selected)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .normal)
}

最新语法

extension UITabBarItem {
    func setImageOnly(){
        imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .selected)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .normal)
    }
 }

只需在tabBar中使用它：

tabBarItem.setImageOnly()

Answer 10

Swift 中的最小，安全的UITabBarController扩展（基于@ korgx9答案）：

extension UITabBarController {
  func removeTabbarItemsText() {
    tabBar.items?.forEach {
      $0.title = ""
      $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
  }
}

Answer 11

除了最佳答案之外，这是一种更好，更简单的方法：

[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateHighlighted];

将它放在AppDelegate.didFinishLaunchingWithOptions中，以便在应用程序的整个生命周期中影响所有标签栏按钮。

Answer 12

基于answer of ddiego，在 Swift 4.2 中：

extension UITabBarController {
    func cleanTitles() {
        guard let items = self.tabBar.items else {
            return
        }
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }
    }
}

您只需要在视图控制器中调用self.tabBarController?.cleanTitles()。

Answer 13

代码：

'Show Process List' -> 'Kill <ProcessId>'.

Answer 14

最简单且始终有效的方法：

class TabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        subviews.forEach { subview in
            if subview is UIControl {
                subview.subviews.forEach {
                    if $0 is UILabel {
                        $0.isHidden = true
                        subview.frame.origin.y = $0.frame.height / 2.0
                    }
                }
            }
        }
    }
}

Answer 15

基于此页面上所有的出色答案，我制定了另一种解决方案，该解决方案还允许您再次显示标题。我没有删除标题的内容，而只是将字体颜色更改为透明。

extension UITabBarItem {

    func setTitleColorFor(normalState: UIColor, selectedState: UIColor) {
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: normalState], for: .normal)
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: selectedState], for: .selected)
    }

}


extension UITabBarController {

    func hideItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: UIColor(white: 0, alpha: 0), selectedState: UIColor(white: 0, alpha: 0))
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }

    }

    func showItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: .black, selectedState: .yellow)
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }

    }

}

Answer 16

就我而言，在TabBar和其他导航流程中使用了相同的ViewController。在ViewController的内部，我设置了self.title = "Some Title"，它出现在TabBar中，而与将标题nil设置为空白还是在将其添加到标签栏时为空白无关。我还设置了imageInsets如下：

item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)

因此在ViewController中，我已按以下方式处理导航标题：

if isFromTabBar {
   // Title for NavigationBar when ViewController is added in TabBar
   // NOTE: Do not set self.title = "Some Title" here as it will set title of tabBarItem
   self.navigationItem.title = "Some Title"
} else {
   // Title for NavigationBar when ViewController is opened from navigation flow
   self.title = "Some Title"
}

Answer 17

创建UITabBarController的子类并将其分配给tabBar，然后在viewDidLoad方法中放置以下代码行：

tabBar.items?.forEach({ (item) in
        item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
    })

Answer 18

自定义TabBar-iOS 13，Swift 5，XCode 11

没有文字的Tabbar项目
TabBar项目垂直居中
圆角的TabBar视图
TabBar动态位置和框架

基于故事板。也可以通过编程轻松实现。仅需遵循4个步骤：

标签栏图标必须为3种黑色大小。通常，我从fa2png.io下载-尺寸：25x25、50x50、75x75。 PDF图像文件不起作用！
在Storyboard中的选项卡栏项中，设置要通过Attributes Inspector使用的图标。（请参见屏幕截图）

自定义TabBarController->新文件->类型：UITabBarController->在故事板上设置。（请参见屏幕截图）

UITabBarController类

RoundedTabBarViewController类：UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    // Custom tab bar view
    customizeTabBarView()
}

private func customizeTabBarView() {
    let tabBarHeight = tabBar.frame.size.height
    self.tabBar.layer.masksToBounds = true
    self.tabBar.isTranslucent = true
    self.tabBar.barStyle = .default
    self.tabBar.layer.cornerRadius = tabBarHeight/2
    self.tabBar.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let viewWidth = self.view.bounds.width
    let leadingTrailingSpace = viewWidth * 0.05

    tabBar.frame = CGRect(x: leadingTrailingSpace, y: 200, width: viewWidth - (2 * leadingTrailingSpace), height: 49)
}

}

结果

Answer 19

如果您希望在不使用魔术数字的情况下将标签居中/更改图像插图，则以下方法对我有用（在Swift 5.2.2中）：

在 UITabBarController 子类中，可以在设置视图控制器之后添加添加图像插图。

override var viewControllers: [UIViewController]? {
    didSet {
      addImageInsets()
    }
}

func addImageInsets() {
    let tabBarHeight = tabBar.frame.height

    for item in tabBar.items ?? [] where item.image != nil {
      let imageHeight = item.image?.size.height ?? 0
      let inset = CGFloat(Int((tabBarHeight - imageHeight) / 4))
      item.imageInsets = UIEdgeInsets(top: inset,
                                      left: 0,
                                      bottom: -inset,
                                      right: 0)
    }
}

上面的几个选项列出了用于隐藏文本的解决方案。

删除标签栏项目文本，仅显示图像

19 个答案: