UITabBar 之 badgeValue 问题记录
UITabBar 之 badgeValue 问题记录
问题:
- 应用上架后, 测试报给我一个这样的情况: 由于第一个模块的需要使用到 tabBar 的 badgeValue, 而这个值是通过接口获取到的, 当应用启动以后, 由于这个时候网络请求比较多, 如果网络不好的情况下, 该值会有一定延迟才能获取得到, 这时候 badValue 对应的小红点首先是没有数字, 然后便是从对应的 TabbarItem 的左上角慢慢的移动到右上角.
- 由于一开始感觉这个需求会比较简单, 所以是直接给 tabBarItem.badgeValue 赋值, 并没有做其他措施
解决方法:
- 给 tabBar 添加一个分类, 自定义控件实现 badgeValue 的效果.
- 一共三个方法(swift):
/// 在 tabBar 的指定位置显示 badValue
///
/// - Parameters:
/// - index: 指定位置
/// - badgeValue: 显示的值
func showBadgeOnItemIndex(index: Int, badgeValue: Int) {
self.removeBadgeOnItemIndex(index)
let badgeView = UIView() // 底层红色的 View
badgeView.tag = 666 + index
badgeView.layer.cornerRadius = 9.0
badgeView.backgroundColor = UIColor.hexValue("f43530")
let tabFrame = self.frame
let badgeLabel = UILabel() // 承载文字的 label
badgeLabel.font = UIFont.systemFontOfSize(12)
badgeLabel.textColor = UIColor(white: 1.0, alpha: 1.0)
badgeLabel.textAlignment = NSTextAlignment.Center
badgeView.addSubview(badgeLabel)
guard let count = self.items?.count else { return }
let percentX = (Float(index) + 0.55) / Float(count)
let x = ceilf(percentX * Float(tabFrame.size.width))
let y = ceilf(0.1 * Float(tabFrame.size.height))
if badgeValue < 10 {
badgeView.frame = CGRectMake(CGFloat(x), CGFloat(y), 18, 18)
badgeLabel.frame = CGRectMake(3, 3, 12, 12)
badgeLabel.text = "\(badgeValue)"
} else if badgeValue >= 10 && badgeValue < 100 {
badgeView.frame = CGRectMake(CGFloat(x), CGFloat(y), 22, 18)
badgeLabel.frame = CGRectMake(1, 3, 20, 12)
badgeLabel.text = "\(badgeValue)"
} else {
badgeView.frame = CGRectMake(CGFloat(x), CGFloat(y), 26, 18)
badgeLabel.frame = CGRectMake(1, 0, 24, 10)
badgeLabel.text = "…"
}
self.addSubview(badgeView)
}
/// 隐藏 badgeValue, 为0时调用
///
/// - Parameter index: 需要隐藏的 tabBarItem 的位置
func hideBadgeOnItemIndex(index: Int) {
self.removeBadgeOnItemIndex(index)
}
/// 移除 tabBarItem 的 badgeValue
///
/// - Parameter index: 需要移除的 tabBarItem 的位置
func removeBadgeOnItemIndex(index: Int) {
for subView: UIView in self.subviews {
if subView.tag == 666 + index {
subView.removeFromSuperview()
}
}
}