如何在tabBar上显示 提示小红点标记(badge)

在应用开发中经常遇到在tabbar的某个控制器中界面会有新消息的提示,需要在该tabBar上显示标记点，以便让用户了解到你有新消息，提升用户体验。如QQ中动态提示

 

一 .首先创建个分类(类别)  UITabBarController+Badge

在该分类的.h文件给出三个方法:

- (void)showBadgeOnItemIndex:(int)index;//显示提示小红点标记

- (void)hideBadgeOnItemIndex:(int)index;//隐藏小红点标记

- (void)removeBadgeOnItemIndex:(int)index;//移除小红点标记

在分类的.m文件中实现这三个方法:

#define TabbarItemNums 4.0    //tabbar的数量

- (void)showBadgeOnItemIndex:(int)index{

    //移除之前的小红点

    [self removeBadgeOnItemIndex:index];

    

    //新建小红点

    UIView *badgeView = [[UIView alloc]init];

    badgeView.tag = 800 + index;

    badgeView.layer.cornerRadius = 5;

    badgeView.backgroundColor = [UIColor redColor];

    CGRect tabFrame = self.tabBar.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);

    [self.tabBar addSubview:badgeView];

}



- (void)hideBadgeOnItemIndex:(int)index{

    //移除小红点

    [self removeBadgeOnItemIndex:index];

}



- (void)removeBadgeOnItemIndex:(int)index{

    

    //按照tag值进行移除

    for (UIView *subView in self.tabBar.subviews) {

        

        if (subView.tag == 800 + index) {

            

            [subView removeFromSuperview];

            

        }

    }

}

以上分类就完成了 

 

你只需要在你要用到这个分类的控制器里导入头文件,调用这三个方法就能解决问题了。