简单的问题,如何删除标签栏项目文本并仅显示图像?
我希望酒吧项目在 Instagram 应用程序中喜欢:
https://i.stack.imgur.com/WUeBF.png
在 xcode 6 的检查器中,我删除了标题并选择了 @2x (50px) 和 @3x (75px) 图像。但是,图像不使用已删除文本的可用空间。任何想法如何实现与 instagram 应用程序中相同的标签栏项目图像?
""
作为标题,也许?
您应该使用 UITabBarItem
的 imageInsets
属性。这是示例代码:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
UIEdgeInsets
中的值取决于您的图像大小。这是我的应用程序中该代码的结果:
https://i.stack.imgur.com/cEJZV.png
// 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);
}
这是您在故事板中的操作方式。
清除标题文本,并像下面的屏幕截图一样设置图像插入
https://i.stack.imgur.com/Xv9FW.png
请记住,图标大小应遵循 apple design guideline
https://i.stack.imgur.com/RbACa.png
这意味着@1x 应该有 25px x 25px,@2x 应该有 50px x 50px,@3x 应该有 75px x 75px
如果在视图控制器中设置了 self.title
,则使用将每个 UITabBarItem
的 title
属性设置为 ""
并更新 imageInsets
的方法将无法正常工作。例如,如果 UITabBarController 的 self.viewControllers
嵌入在 UINavigationController
中,并且您需要在导航栏上显示标题。在这种情况下,直接使用 self.navigationItem.title
设置 UINavigationItem
的标题,而不是 self.title
。
如果您使用情节提要,这将是您的最佳选择。它循环遍历所有选项卡栏项目,并且对于每个项目,它都将标题设置为空,并使图像全屏显示。 (您必须在情节提要中添加了图像)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
快速版本的 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)
}
}
}
class BaseTabBarController: UITabBarController, UITabBarControllerDelegate
的子类并将此函数放在子类的 viewDidLoad
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
}
}
}
我在 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)
}
for var i = 0; i < tabBar...
; for tabBarItems in tabBar.items!
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()
除了最佳答案之外,这是一种更好,更简单的方法:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
将它放在您的 AppDelegate.didFinishLaunchingWithOptions
中,以便在您的应用程序的整个生命周期中影响所有标签栏按钮。
Swift 中最小的、安全的 UITabBarController 扩展(基于@korgx9 答案):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
基于 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()
。
自定义标签栏 - iOS 13、Swift 5、XCode 11
没有文本的 TabBar 项
TabBar 项目垂直居中
圆形标签栏视图
TabBar 动态位置和框架
基于故事板。它也可以通过编程轻松实现。只需 4 个步骤:
标签栏图标必须有 3 种尺寸,黑色。通常,我从 fa2png.io 下载 - 尺寸:25x25、50x50、75x75。 PDF 图像文件不起作用!在标签栏项目的 Storyboard 中,通过 Attributes Inspector 设置要使用的图标。 (见截图)
https://i.stack.imgur.com/qfEjV.png
自定义 TabBarController -> 新建文件 -> 类型:UITabBarController -> 在情节提要上设置。 (见截图)
https://i.stack.imgur.com/bNyo9.png
UITabBarController class class RoundedTabBarViewController: UITabBarController { override func viewDidLoad() { super.viewDidLoad() // 加载视图后做任何额外的设置。 // 自定义标签栏视图 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 让leadingTrailingSpace = viewWidth * 0.05 tabBar.frame = CGRect(x:leadingTrailingSpace, y: 200, width: viewWidth - (2 *leadingTrailingSpace), height: 49) } } 结果
https://i.stack.imgur.com/tAVFY.png
代码:
private func removeText() {
if let items = yourTabBarVC?.tabBar.items {
for item in items {
item.title = ""
}
}
}
就我而言,TabBar 和其他导航流程中使用了相同的 ViewController。在我的 ViewController 中,我设置了出现在 TabBar 中的 self.title = "Some Title"
,无论在选项卡栏中添加标题 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"
}
基于此页面上的所有出色答案,我精心设计了另一个解决方案,该解决方案还允许您再次显示标题。我没有删除标题的内容,而是将字体颜色更改为透明。
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)
}
}
}
最简单的方法并且始终有效:
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
}
}
}
}
}
}
创建一个 UITabBarController 的子类并将其分配给您的 tabBar ,然后在 viewDidLoad 方法中放置以下代码行:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 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)
}
}
上面的几个选项列出了处理隐藏文本的解决方案。