删除选项卡栏项目文本,仅显示图像


89

一个简单的问题,如何删除选项卡栏项目文本并仅显示图像?

我希望酒吧项目在instagram应用中喜欢:

在此处输入图片说明

在xcode 6的检查器中,我删除了标题,并选择了@ 2x(50px)和@ 3x(75px)图像。但是,图像不使用已删除文本的可用空间。有什么想法可以实现与instagram应用程序中相同的选项卡栏项目图像吗?



1
使用""标题,也许?
Holex

1
设置偏移量只是一个技巧,正确答案在下面。您应该使用navigationItem.title =“ some title”
Davit Siradeghyan

Answers:


129

您应该使用的imageInsets属性UITabBarItem。这是示例代码:

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

里面的值UIEdgeInsets取决于您的图像尺寸。这是我的应用程序中该代码的结果:

在此处输入图片说明


25
您还可以在检查器中调整图像插图。
2014年

魔术数字是个坏主意。请参阅我的回答,以了解实现同一件事的通用兼容方式。
以西结·维克多

4
这在iOS 11中不再起作用-如果双击活动选项卡,由于某种原因它将使插图加倍。
Ben Gotow

@BenGotow同样的问题,您有什么解决方案吗?
Dixit Akabari,

@DixitAkabari其他人已经发布了一些适用于iOS 11的好的解决方案
Pranav Kasetti

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

1
无需删除标题,而是将文本颜色更改为清除。标题可能有用。
爱德华多·毛罗

1
科多斯飞往爱德华多!让我意识到,一个不错的选择是在商品的titlePositionAjustement
Julius

2
您将其放在自定义TabBar控制器中的什么位置?
UKDataGeek

69

这是在情节提要中的处理方法。

清除标题文本,然后像下面的屏幕截图一样设置图像插图

在此处输入图片说明

请记住,图标大小应遵循苹果设计准则

在此处输入图片说明

这意味着@ 1x应该具有25px x 25px,@ 2x应该具有50px x 50px,@ 3x应该具有75px x 75px


45

如果在视图控制器中进行了设置,则将每个UITabBarItems title属性设置为"" 并使用update的方法imageInsets将无法正常工作self.title。例如,如果self.viewControllersUITabBarController嵌入在其中UINavigationController,则您需要在导航栏上显示标题。在这种情况下,UINavigationItem直接使用self.navigationItem.title而不是设置标题self.title


2
这似乎是一种更清洁的方法。+1 @Oleg,应将此标记为答案。
akseli

29

Swift版本的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)
        }
    }
}

2
功能强大!您可以选择像这样子类化class BaseTabBarController: UITabBarController, UITabBarControllerDelegate,然后将此函数放入子类中viewDidLoad
daspianist

26

如果您使用情节提要,这将是您的最佳选择。它遍历所有选项卡栏项,并且为每个项设置标题为空,并使图像全屏显示。(您必须在情节提要中添加了图像)

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

值得一提的是,如果您未同时设置上下插图,则图像最终会变形。
朱利叶斯

16

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

这是唯一对我有用的方法,但是我不得不将代码放入MyTabBarController的子类的“重写func viewDidLayoutSubviews”中。我将tabBarController子类化,并命名为
Lance Samaria

解决方案很适合我。我将其用作扩展程序,因此添加起来更简单
Michal Gumny

@LanceSamaria无需我触摸选项卡栏控制器代码即可工作
Pranav Kasetti

12

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

1
不用使用for var i = 0; i < tabBar... ,您可能只是说过;for tabBarItems in tabBar.items!
Jesse Onolemen '16

10

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

6

除了最佳答案,这是一种更好,更简单的方法:

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

将其放入AppDelegate.didFinishLaunchingWithOptions您的应用程序中,以便在应用程序的整个生命周期内影响所有选项卡栏按钮。


3
这只是隐藏标题,不会调整图像的位置。
mustafa

2
是的,但是这个问题对调整图像没有任何帮助。只是隐藏文本。而且很好地隐藏文本,以至于不利于从视图控制器中删除标题。特别是当您可能使用该标题将其显示为navigationviewcontroller的一部分时
Dan1one

6

Swift中的最小安全UITabBarController扩展(基于@ korgx9答案):

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

2

根据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()在视图控制器中调用即可。


1

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

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

    }

}

0

在此处输入图片说明

码:

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

0

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

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

0

就我而言,在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"
}

0

制作UITabBarController的子类,并将其分配给tabBar,然后在viewDidLoad方法中放置以下代码行:

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

0

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

  • 没有文本的TabBar项目
  • TabBar项目垂直居中
  • 圆形的TabBar视图
  • TabBar动态位置和框架

基于情节提要。也可以通过编程轻松实现。仅需遵循4个步骤:

  1. 标签栏图标必须为3种尺寸,黑色。通常,我从fa2png.io下载-尺寸:25x25、50x50、75x75。PDF图像文件不起作用!

    在此处输入图片说明

  2. 在情节提要中的选项卡栏项中,设置要通过Attributes Inspector使用的图标。(请参见屏幕截图)

在此处输入图片说明

  1. 自定义TabBarController->新建文件->类型:UITabBarController->在故事板上设置。(请参见屏幕截图)

在此处输入图片说明

  1. UITabBarController类

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

    }

  2. 结果 在此处输入图片说明


0

如果您希望在制表符居中/不使用幻数的情况下更改图像插图,则以下对我有用(在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)
    }
}

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.