如何为UITabBarController的过长标题启用溢出省略指示器?
解决方案
方案1:自定义UITabBarItem,替换系统文本为带截断效果的UILabel
这是最稳定的实现方案,可完全控制文本的截断逻辑:
- 遍历UITabBar的子视图,找到对应UITabBarButton的文本控件位置,添加自定义UILabel
- 隐藏系统默认的标题文本
- 给自定义UILabel设置
lineBreakMode = .byTruncatingTail,自动显示尾部省略号
示例代码(Swift):
// 在UITabBarController的viewDidLoad或自定义UITabBar的layoutSubviews中调用 func setupCustomTabBarTitles() { let tabBarItems = tabBar.items ?? [] for (index, item) in tabBarItems.enumerated() { guard let tabBarButton = tabBar.subviews[1 + index] as? UIControl else { continue } // 隐藏系统默认标题 item.setTitleTextAttributes([.foregroundColor: UIColor.clear], for: .normal) item.setTitleTextAttributes([.foregroundColor: UIColor.clear], for: .selected) // 添加自定义UILabel let titleLabel = UILabel() titleLabel.tag = 10086 + index titleLabel.text = item.title titleLabel.font = UIFont.systemFont(ofSize: 10) titleLabel.textAlignment = .center titleLabel.lineBreakMode = .byTruncatingTail // 尾部截断显示省略号 titleLabel.adjustsFontSizeToFitWidth = false // 关闭自动缩放宽,避免字符间距调整 // 适配选中态颜色 titleLabel.textColor = tabBarButton.isSelected ? tabBar.tintColor : .gray // 计算布局,对应系统默认标题的位置(底部区域) titleLabel.translatesAutoresizingMaskIntoConstraints = false tabBarButton.addSubview(titleLabel) NSLayoutConstraint.activate([ titleLabel.centerXAnchor.constraint(equalTo: tabBarButton.centerXAnchor), titleLabel.bottomAnchor.constraint(equalTo: tabBarButton.bottomAnchor, constant: -4), titleLabel.widthAnchor.constraint(lessThanOrEqualTo: tabBarButton.widthAnchor, constant: -8) ]) } } // 监听选中态切换,更新自定义Label颜色 override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) { guard let index = tabBar.items?.firstIndex(of: item) else { return } for (i, btn) in tabBar.subviews.compactMap({ $0 as? UIControl }).enumerated() { guard let label = btn.viewWithTag(10086 + i) as? UILabel else { continue } label.textColor = i == index ? tabBar.tintColor : .gray } }
方案2:不自定义控件,调整系统属性实现近似效果
如果不想修改视图结构,可以通过调整文本属性避免重叠,同时适配不同设备:
- 全局关闭字符间距自动调整:给
UITabBarItem.appearance()设置固定的kern值,禁止系统自动压缩字符间距 - 针对小屏设备单独配置字号,大屏设备保持原有显示效果
示例代码:
let appearance = UITabBarItem.appearance() // 固定字符间距,禁止系统自动缩小kern appearance.setTitleTextAttributes([.kern: 0], for: .normal) appearance.setTitleTextAttributes([.kern: 0], for: .selected) // 仅小屏设备缩小字号,避免溢出 if UIScreen.main.bounds.width <= 375 { // 适配iPhone SE等小屏机型 appearance.setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 9)], for: .normal) appearance.setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 9)], for: .selected) }
方案3:自适应本地化文本的动态截断逻辑
不需要手动做语言缩写,通过运行时计算文本宽度自动处理:
- 在设置UITabBarItem标题前,计算当前语言下标题文本在TabBar允许宽度下的展示长度
- 超过宽度阈值时调用系统的字符串截断方法生成带省略号的文本,直接赋值给item.title
- 大屏设备阈值更高,自动不触发截断,避免显示不必要的缩写
注意:不要直接修改系统UITabBarButton的私有子控件属性,避免iOS版本迭代后出现兼容崩溃问题,自定义添加的UILabel不受系统私有API变更影响。
内容的提问来源于stack exchange,提问作者SOuser
相关产品推荐
相关产品推荐

