刪除標簽欄項目文本，僅顯示圖像

Question

簡單的問題，如何刪除標簽欄項目文本並僅顯示圖像？

我希望在 Instagram 應用程序中喜歡酒吧項目：

在 xcode 6 的檢查器中，我刪除了標題並選擇了一個 @2x (50px) 和一個 @3x (75px) 的圖像。 但是，圖像不使用已刪除文本的可用空間。 任何想法如何實現與 instagram 應用程序中相同的標簽欄項目圖像？

Answer 1

您應該使用UITabBarItem imageInsets屬性。 這是示例代碼：

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

UIEdgeInsets值取決於您的圖像大小。 這是我的應用程序中該代碼的結果：

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

這是您在故事板中執行此操作的方法。

清除標題文本，並像下面的截圖一樣設置圖像插入

記住圖標大小應該遵循蘋果設計指南

這意味着@1x 應該是 25px x 25px，@2x 應該是 50px x 50px，@3x 應該是 75px x 75px

Answer 4

如果在視圖控制器中設置了self.title則使用將每個UITabBarItem的title屬性設置為""並更新imageInsets將無法正常工作。 例如，如果self.viewControllers的UITabBarController的嵌入UINavigationController ，你需要標題導航欄上顯示。 在這種情況下，直接使用self.navigationItem.title而不是self.title設置UINavigationItem的標題。

Answer 5

如果您使用故事板，這將是您的最佳選擇。 它遍歷所有標簽欄項目，並為每個項目設置標題為空，並使圖像全屏。 （您必須在故事板中添加了圖像）

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

Answer 6

快速版的 ddiego 答案

與 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 = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 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 + "_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)
}

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

除了最佳答案之外，還有一種更好、更簡單的方法可以做到這一點：

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

把它放在你的AppDelegate.didFinishLaunchingWithOptions這樣它就會影響你應用程序的整個生命周期中的所有標簽欄按鈕。

Answer 11

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

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

Answer 12

基於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

代碼：

private func removeText() {
    if let items = yourTabBarVC?.tabBar.items {
       for item in items {
          item.title = ""
       }
    }
 }

Answer 14

基於此頁面上的所有出色答案，我精心設計了另一個解決方案，該解決方案還允許您再次顯示標題。 而不是刪除標題的內容，我只是將字體顏色更改為透明。

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 15

就我而言，在 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 16

自定義 TabBar - iOS 13、Swift 5、XCode 11

• 沒有文本的 TabBar 項目
• TabBar 項目垂直居中
• 圓形 TabBar 視圖
• TabBar 動態位置和框架

基於故事板。 它也可以通過編程輕松實現。 只需4個步驟：

1. 標簽欄圖標必須有 3 種尺寸，黑色。 通常，我從 fa2png.io 下載 - 尺寸：25x25、50x50、75x75。 PDF 圖像文件不起作用！

   

2. 在標簽欄項目的 Storyboard 中，通過 Attributes Inspector 設置要使用的圖標。 （見截圖）

3. 自定義 TabBarController -> 新建文件 -> 類型：UITabBarController -> 在情節提要上設置。 （見截圖）

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

   }

5. 結果

Answer 17

最簡單且始終有效的方法：

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 18

創建 UITabBarController 的子類並將其分配給您的 tabBar ，然后在 viewDidLoad 方法中放置以下代碼行：

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

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

上面的幾個選項列出了處理隱藏文本的解決方案。