项目需求,希望当用户存在未读消息的时候在对应的UITabBarItem上显示小红点。发现iOS自带的UITabBarItem的badgeValue尺寸偏大,不满足项目需求。
第一步,建一个UITabBar的category类别。
第二步,编写代码
.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]