tabbaritem右上角自定义红点或者数字

项目需求，希望当用户存在未读消息的时候在对应的UITabBarItem上显示小红点。发现iOS自带的UITabBarItem的badgeValue尺寸偏大，不满足项目需求。

第一步，建一个UITabBar的category类别。

WechatIMG193.jpeg

第二步,编写代码

.h文件

- (void)showBadgeOnItemIndex:(int)index color:(UIColor *)color;   //显示小红点

- (void)hideBadgeOnItemIndex:(int)index; //隐藏小红点
- (void)showBageOnItemWithIndex:(int)index value:(NSString *)valueStr color:(UIColor *)color;

.m文件

#define TabbarItemNums 4.0 //tabbar的数量 如果是5个设置为5.0

//显示小红点
- (void)showBadgeOnItemIndex:(int)index color:(UIColor *)color{
    //移除之前的小红点
    [self removeBadgeOnItemIndex:index];
    
    //新建小红点
    UIView *badgeView = [[UIView alloc]init];
    badgeView.tag = 888 + index;
    badgeView.layer.cornerRadius = 5;//圆形
    badgeView.backgroundColor = color;//颜色 
    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);
    badgeView.frame = CGRectMake(x, y, 10, 10);//圆形大小为10
    [self addSubview:badgeView];
}
//隐藏小红点
- (void)hideBadgeOnItemIndex:(int)index{
    //移除小红点
    [self removeBadgeOnItemIndex:index];
}
//移除小红点
- (void)removeBadgeOnItemIndex:(int)index{
    //按照tag值进行移除
    for (UIView *subView in self.subviews) {
        if (subView.tag == 888+index || subView.tag == 100 + index) {
            [subView removeFromSuperview];
        }
    }
}
- (void)showBageOnItemWithIndex:(int)index value:(NSString *)valueStr color:(UIColor *)color{
    //移除之前的小红点
    [self removeBadgeOnItemIndex:index];
    
    UILabel *badgeLabel = [[UILabel alloc] init];
    
    badgeLabel.tag = 100 + index;

    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);
    badgeLabel.frame = CGRectMake(x, y, 12, 12);//圆形大小为12
    
    badgeLabel.layer.cornerRadius = 6;//圆形
    badgeLabel.layer.masksToBounds = YES;
    badgeLabel.backgroundColor = color;//颜色 
    
    [self addSubview:badgeLabel];
    
    badgeLabel.text = valueStr;
    badgeLabel.textColor = [UIColor whiteColor];
    badgeLabel.font = FYSetFont(10);
    badgeLabel.textAlignment = NSTextAlignmentCenter;
}

第三步，引入到需要使用的类中。

#import "UITabBar+badge.h"

//显示以白色为背景的圆角数字2
[self.tabBarController.tabBar showBageOnItemWithIndex:2 value:@"2" color:[UIColor whiteColor]];
//显示红色的小点
[self.tabBarController.tabBar showBadgeOnItemIndex:2 color:[UIColor redColor]];
//隐藏  
[self.tabBarController.tabBar hideBadgeOnItemIndex:2]