美文网首页iOS技术资料
tabbaritem右上角自定义红点或者数字

tabbaritem右上角自定义红点或者数字

作者: 小学生课代表 | 来源:发表于2017-02-13 15:43 被阅读370次

    项目需求,希望当用户存在未读消息的时候在对应的UITabBarItem上显示小红点。发现iOS自带的UITabBarItem的badgeValue尺寸偏大,不满足项目需求。

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

    WechatIMG193.jpeg

    第二步,编写代码

    .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]  
    

    相关文章

      网友评论

        本文标题: tabbaritem右上角自定义红点或者数字

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