美文网首页
给UITabBar加小红点

给UITabBar加小红点

作者: 长空北 | 来源:发表于2016-01-25 17:44 被阅读1387次

    iOS系统默认可以给UITabBar上加上红点和数字用来做提示有新消息等功能

    但是一般情况下设计时只需要加一个小红点就可以了,这个时候就需要我们来做一个定制化的红点

    我们使用Category为UITabBar添加一个自定义控件

    UITabBar+Extend.h

    @interface UITabBar (Extend)
    
    - (void)showBadgeOnItemIndex:(NSInteger)index; // 显示小红点
    - (void)hideBadgeOnItemIndex:(NSInteger)index; // 隐藏小红点
    
    @end
    

    UITabBar+Extend.h

    #define kBadgeViewTag 200  // 红点起始tag值
    #define kBadgeWidth  6  // 红点宽高
    
    @implementation UITabBar (Extend)
    
    //显示小红点
    - (void)showBadgeOnItemIndex:(NSInteger)index{
        [self removeBadgeOnItemIndex:index];
        UIView *badgeView = [[UIView alloc]init];
        badgeView.tag = kBadgeViewTag + index;
        badgeView.layer.cornerRadius = kBadgeWidth / 2;
        badgeView.backgroundColor = [UIColor redColor];
        [self addSubview:badgeView];
     
         // 设置小红点的位置
         int i = 0;
         for (UIView* subView in self.subviews){
            if ([subView isKindOfClass:NSClassFromString(@"UITabBarButton")]){
                 // 找到需要加小红点的view,根据frame设置小红点的位置
                if (i == index) {
                    // 数字9为向右边的偏移量,可以根据具体情况调整
                    CGFloat x = subView.frame.origin.x + subView.frame.size.width / 2 + 9;
                    CGFloat y = 6;
                    badgeView.frame = CGRectMake(x, y, kBadgeWidth, kBadgeWidth);
                    break;
                }
                i++;
            }
        }
    }
    
    // 隐藏小红点
    - (void)hideBadgeOnItemIndex:(NSInteger)index{
        [self removeBadgeOnItemIndex:index];
    }
    
    // 移除小红点
    - (void)removeBadgeOnItemIndex:(NSInteger)index{
    // 根据tag的值移除
        for (UIView *subView in self.subviews) {
            if (subView.tag == kBadgeViewTag + index) {
                [subView removeFromSuperview];
            }
        }
    }
    
    @end
    

    相关文章

      网友评论

          本文标题:给UITabBar加小红点

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