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

Remove tab bar item text, show only image

提问by Upvote

Simple question, how can I remove the tab bar item text and show only the image?

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

I want the bar items to like in the instagram app:

我希望在 Instagram 应用程序中喜欢酒吧项目：

In the inspector in xcode 6 I remove the title and choose a @2x (50px) and a @3x (75px) image. However the image does not use the free space of the removed text. Any ideas how to achieve the same tab bar item image like in the instagram app?

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

回答by mustafa

You should play with imageInsetsproperty of UITabBarItem. Here is sample code:

你应该玩imageInsets的财产UITabBarItem。这是示例代码：

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

Values inside UIEdgeInsetsdepend on your image size. Here is the result of that code in my app:

里面的值UIEdgeInsets取决于你的图像大小。这是我的应用程序中该代码的结果：

回答by ddiego

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

回答by nuynait

Here is how you do it in a storyboard.

这是您在故事板中执行此操作的方法。

Clear the title text, and set the image inset like the screenshot below

清除标题文本，并像下面的截图一样设置图像插入

Remember the icon size should follow the apple design guideline

记住图标大小应该遵循苹果设计指南

This means you should have 25px x 25px for @1x, 50px x 50px for @2x, 75px x 75px for @3x

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

回答by tesla

Using approach with setting each UITabBarItems titleproperty to ""and update imageInsetswon't work properly if in view controller self.titleis set. For example if self.viewControllersof UITabBarController are embedded in UINavigationControllerand you need title to be displayed on navigation bar. In this case set UINavigationItems title directly using self.navigationItem.title, not self.title.

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

回答by korgx9

Swift versionof ddiego answer

快速版的 ddiego 答案

Compatible with iOS 11

与 iOS 11 兼容

Call this function in viewDidLoad of every first child of the viewControllers after setting title of the viewController

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

Best Practice:

最佳实践：

Alternativelly as @daspianist suggested in comments

或者如@daspianist 在评论中建议的那样

Make a subclass of like this class BaseTabBarController: UITabBarController, UITabBarControllerDelegate and put this function in the subclass's viewDidLoad

创建一个像这个类 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 = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 0)
        }
    }
}

回答by Marcos Reboucas

If you're using storyboards this would be you best option. It loops through all of the tab bar items and for each one it sets the title to nothing and makes the image full screen. (You must have added an image in the storyboard)

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

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

回答by atlwx

iOS 11 throws a kink in many of these solutions, so I just fixed my issues on iOS 11 by subclassing UITabBar and overriding layoutSubviews.

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

回答by Four

I used the following code in my BaseTabBarController's viewDidLoad. Note that in my example, I have 5 tabs, and selected image will always be base_image + "_selected".

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

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

回答by Jose Tapizquent

Swift 4 approach

Swift 4 方法

I was able to do the trick by implementing a function that takes a TabBarItem and does some formatting to it.

我能够通过实现一个接受 TabBarItem 并对其进行一些格式化的函数来解决这个问题。

Moves the image a little down to make it be more centered and also hides the text of the Tab Bar. Worked better than just setting its title to an empty string, because when you have a NavigationBar as well, the TabBar regains the title of the viewController when selected

将图像向下移动一点，使其更加居中，同时隐藏标签栏的文本。比仅将其标题设置为空字符串效果更好，因为当您也有 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)
}

Latest syntax

最新语法

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

And just use it in your tabBar as:

只需在您的 tabBar 中将其用作：

tabBarItem.setImageOnly()

回答by Federico Zanetello

A minimal, safe UITabBarController extension in Swift(based on @korgx9 answer):

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

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