自定义tab上的badge和小红点

IMG_0220.PNG

为UITabBar添加分类方法

.h

#import <UIKit/UIKit.h>

@interface UITabBar (SJCRedDotBar)


- (void)showBadgeOnItemIndex:(NSInteger)index;   ///<显示小红点

- (void)hideBadgeOnItemIndex:(NSInteger)index;  ///<隐藏小红点

- (void)showBadge:(NSString *)badge onIndex:(NSInteger)index;

- (void)hideBadgeOnIndex:(NSInteger)index;

@end

.m

#import "UITabBar+SJCRedDotBar.h"


#define TabbarItemNums  5

@implementation UITabBar (SJCRedDotBar)


//显示小红点
- (void)showBadgeOnItemIndex:(NSInteger)index{
    //移除之前的小红点
    [self removeBadgeOnItemIndex:index];
    
    //新建小红点
    UIView *badgeView = [[UIView alloc]init];
    badgeView.tag = 888 + index;
    badgeView.layer.cornerRadius = 4.0;//圆形
    badgeView.backgroundColor = ThemeRedColor;//[UIColor redColor];//颜色:红色
    CGRect tabFrame = self.frame;
    
    //确定小红点的位置
    CGFloat 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, 8.0, 8.0);//圆形大小为10
    badgeView.clipsToBounds = YES;
    [self addSubview:badgeView];
}

//隐藏小红点
- (void)hideBadgeOnItemIndex:(NSInteger)index{
    //移除小红点
    [self removeBadgeOnItemIndex:index];
}

//移除小红点
- (void)removeBadgeOnItemIndex:(NSInteger)index{
    //按照tag值进行移除
    for (UIView *subView in self.subviews) {
        if (subView.tag == 888+index) {
            [subView removeFromSuperview];
        }
    }
}

- (void)showBadge:(NSString *)badge onIndex:(NSInteger)index{
    [self remoBadgeAtIndex:index];
    
    if ([badge integerValue]>999) badge = @"999+";
    
    UILabel *badgeLab = [UILabel new];
    badgeLab.tag = 999+index;
    badgeLab.layer.cornerRadius = 10;
    badgeLab.layer.masksToBounds = YES;
    badgeLab.layer.borderWidth = 2;
    badgeLab.layer.borderColor = WhiteColor.CGColor;
    badgeLab.font = SFDisplayMedium(9);
    badgeLab.textColor = WhiteColor;
    badgeLab.backgroundColor = ThemeRedColor;
    badgeLab.textAlignment = NSTextAlignmentCenter;
    badgeLab.text = badge;
    
    CGRect tabFrame = self.frame;
    
    CGFloat percentX = (index + 0.6) / TabbarItemNums;
    CGFloat x = ceilf(percentX * tabFrame.size.width);
    CGFloat y = ceilf(0.05 * tabFrame.size.height);
    CGFloat w = [badge widthForFont:SFDisplayMedium(9)];
    badgeLab.frame = CGRectMake(x, y, MIN((self.frame.size.width/TabbarItemNums-22), MAX(20, w+10)), 20);
    badgeLab.clipsToBounds = YES;
    [self addSubview:badgeLab];
}

- (void)hideBadgeOnIndex:(NSInteger)index{
    [self remoBadgeAtIndex:index];
}

- (void)remoBadgeAtIndex:(NSInteger)index{
    for (UIView *subView in self.subviews) {
        if (subView.tag == 999+index) {
            [subView removeFromSuperview];
        }
    }
}
@end
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近项目里有遇到给tabBarItem添加类似小红点功能,由于系统自带的小红点只能完成数字,简易红点等功能,远远不...
    咚铃铛儿阅读 6,075评论 5 10
  • 转载自:https://halfrost.com/go_map_chapter_one/ https://half...
    HuJay阅读 6,210评论 1 5
  • 《天龙八部》乔峰突然一声怒喝:“滚出来!”声震屋瓦,梁上灰尘簌簌而落。群雄均是耳中雷鸣,心跳加剧。乔峰一招打出,人...
    高大杰阅读 242评论 0 0
  • 主节点的设定 启动主节点[root@centos7 /]# systemctl restart mariadb备节...
    尘曦的雨阅读 295评论 0 1