美文网首页
2019-04-07给TabBar添加未读消息小红点儿

2019-04-07给TabBar添加未读消息小红点儿

作者: 破夕_____________ | 来源:发表于2019-05-13 15:02 被阅读0次

    第一步,建一个UITabBar的category类别

    image.png

    第二步:上代码

    #import <UIKit/UIKit.h>
    
    @interface UITabBar (badge)
    
    - (void)showBadgeOnItemIndex:(int)index;   //显示小红点
    
    - (void)hideBadgeOnItemIndex:(int)index; //隐藏小红点
    
    @end
    
    
    #import "UITabBar+badge.h"
    #define TabbarItemNums 4.0    //tabbar的数量
    
    @implementation UITabBar (badge)
    - (void)showBadgeOnItemIndex:(int)index{  
    
        //移除之前的小红点
        [self removeBadgeOnItemIndex:index];
    
        //新建小红点
        UIView *badgeView = [[UIView alloc]init];
        badgeView.tag = 888 + index;
        badgeView.layer.cornerRadius = 5;
        badgeView.backgroundColor = [UIColor redColor];
        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);
        [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 removeFromSuperview];
    
            }
        }
    }
    
    @end
    
    

    第三步,在需要用到的地方使用

    //显示
    [self.tabBarController.tabBar showBadgeOnItemIndex:2];
    
    //隐藏
    [self.tabBarController.tabBar hideBadgeOnItemIndex:2]
    

    相关文章

      网友评论

          本文标题:2019-04-07给TabBar添加未读消息小红点儿

          本文链接:https://www.haomeiwen.com/subject/kqpeiqtx.html