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

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

  • 第一步:新建文件选择New File
  • 第二步:选择Objective-c File然后填写文件名,选择File TypeCategory,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的角标颜色、大小)