自定义tabBarItem的角标颜色、大小

最近项目需要用到角标，但样式跟系统默认的不一样，于是决定自己写一个分类来实现，大小和颜色可根据自己需求调整。

第一步：新建文件选择New File
第二步：选择Objective-c File然后填写文件名,选择File Type为Category,Class为UITabBar,点击Next
第三步：.h文件里添加显示隐藏的方法，例如：

@interface UITabBar (YZbadge)
- (void)showBadgeOnItemIndex:(int)index WithCount:(NSInteger)count;   //显示
- (void)hideBadgeOnItemIndex:(int)index; //隐藏
@end

第四步：.m文件里实现显示隐藏的方法，例如：

//显示
- (void)showBadgeOnItemIndex:(int)index WithCount:(NSInteger)count{
    //移除之前的圆点
    [self removeBadgeOnItemIndex:index];
    
    //新建圆点
    UILabel *badgeView = [[UILabel alloc]init];
    badgeView.textColor = [UIColor whiteColor];
    badgeView.text = [NSString stringWithFormat:@"%ld",count];
    badgeView.font = [UIFont systemFontOfSize:10];
    badgeView.textAlignment = NSTextAlignmentCenter;
    badgeView.tag = 10000 + index;
    badgeView.layer.cornerRadius = 7.5;//圆形
    badgeView.clipsToBounds = YES;
    badgeView.backgroundColor = ;//颜色
    CGRect tabFrame = self.frame;
    
    //位置
    float percentX = (index +0.6) / TabbarItemNums;
    CGFloat x = ceilf(percentX * tabFrame.size.width);
    CGFloat y = ceilf(0.1 * tabFrame.size.height-3);
    badgeView.frame = CGRectMake(x, y, 15, 15);//圆形大小为10
    [self addSubview:badgeView];
}  
//隐藏
- (void)hideBadgeOnItemIndex:(int)index{
    //移除
    [self removeBadgeOnItemIndex:index];
}
//移除圆点
- (void)removeBadgeOnItemIndex:(int)index{
    for (UIView *subView in self.subviews) {
        if (subView.tag == 10000+index) {
            [subView removeFromSuperview];
        }
    }
}

代码写完之后可以运行测试了，在需要的地方用下面的代码调用一下

[self.tabBarController.tabBar showBadgeOnItemIndex:3 WithCount:badgeCount];
[self.tabBarController.tabBar hideBadgeOnItemIndex:3];

想用懒加载的童鞋可以自己改一下，改完控制badgeView.hidden就可以了。

自定义tabBarItem的角标颜色、大小

推荐阅读更多精彩内容