UITabBar 的 badgeValue 小技巧

UITabBar 之 badgeValue 问题记录

UITabBar 之 badgeValue 问题记录

问题:

1. 应用上架后, 测试报给我一个这样的情况: 由于第一个模块的需要使用到 tabBar 的 badgeValue, 而这个值是通过接口获取到的, 当应用启动以后, 由于这个时候网络请求比较多, 如果网络不好的情况下, 该值会有一定延迟才能获取得到, 这时候 badValue 对应的小红点首先是没有数字, 然后便是从对应的 TabbarItem 的左上角慢慢的移动到右上角.
2. 由于一开始感觉这个需求会比较简单, 所以是直接给 tabBarItem.badgeValue 赋值, 并没有做其他措施

解决方法:

1. 给 tabBar 添加一个分类, 自定义控件实现 badgeValue 的效果.
2. 一共三个方法(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()
            }
        }
    }