一行代码 搞定为Tabbar 增加小红点 ,红色滑动条

在项目开发中经常会遇到,需要在tabbar 上显示红色角标 ,红色小点 ,或者红色小线条等等,至于红色角标 系统已经直接给我们提供了方法 直接调用

[self.tabBarItem setBadgeValue:badge];

[self.tabBarItem setBadgeColor: [UIColor redColor] ] ;

那如果要设置 红色小圆点 或者滑动条呢 ?又该如何设置呢?
其实很简单.创立一个分类就好啦.
首先我们创建项目工程 ,我们的TabbarController 采用自定义的 继承自UITabbarController,命名为BaseTabBarController,创建三个自控制器的代码我就不多写了.直接说干货,遵守UITabBarControllerDelegate协议,设置代理

实现2个方法

• (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController NS_AVAILABLE_IOS(3_0){
  return YES;
  }

• (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
  {

}
方法里面暂且什么都不写
下面开始我们的第二步 ,创建一个Tabbar的分类

#import <UIKit/UIKit.h>

@interface UITabBar (Line)
- (void)showBadgeOnItemIndex:(NSInteger)index;   //显示小红点

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

#import "UITabBar+Line.h"
#define TabbarItemNums 3.0    //tabbar的数量 如果是5个设置为5.0
@implementation UITabBar (Line)
//显示小红点
- (void)showBadgeOnItemIndex:(NSInteger)index{
    //移除之前的小红点
    [self removeBadgeOnItemIndex:index];
   

    //红点
    [self creatRedCirlce:index];
    //红条
    //[self creatRedLine:index];
    ![Untitled15.gif](https://img.haomeiwen.com/i6796505/f4f41eecbfffcad7.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    
}
//创建红色条
-(void)creatRedLine:(NSInteger)index
{
    //    //新建小红条
        UIView *badgeView = [[UIView alloc]init];
        badgeView.tag = 888 + index;
    
        //badgeView.backgroundColor = HexColor(@"FF4800");//颜色：红色
      badgeView.backgroundColor =[UIColor redColor];
        CGRect tabFrame = self.frame;
    
        float percentX =  (index *2+1) / (TabbarItemNums*2);
    
        CGFloat x = (percentX * tabFrame.size.width)-30/2-1;
    
        CGFloat y = (0.9 * tabFrame.size.height);
        badgeView.frame = CGRectMake(x, y, 30, 3);
        [self addSubview:badgeView];
}

-(void)creatRedCirlce:(NSInteger)index
{
    //新建小红点
    UIView *badgeView = [[UIView alloc]init];
    badgeView.tag = 888 + index;
    
    //badgeView.backgroundColor = HexColor(@"FF4800");//颜色：红色
    badgeView.backgroundColor =[UIColor redColor];
    CGRect tabFrame = self.frame;
    //确定小红点的位置
    
    float percentX =  (index *2+1) / (TabbarItemNums*2);//每个tabbaritem 中心线
    
    //小红点最好在item 的右上角
    CGFloat itemW=30; //item 宽度  根据需要来定
    CGFloat x = (percentX * tabFrame.size.width)+itemW/2;//红点位置可以根据需要调整
    
    CGFloat w=10;//红点宽
    CGFloat h=10;//红点高
    CGFloat y = (0.1 * tabFrame.size.height);
    badgeView.frame = CGRectMake(x, y, w, h);
    badgeView.layer.masksToBounds=YES;
    badgeView.layer.cornerRadius=h/2;
    [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];
        }
    }
}

@end

调用回到之前的 实现的协议方法
在shouldSelectViewController: 方法中清除 隐藏之前的红点

在didSelectViewController 显示红色小点

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController NS_AVAILABLE_IOS(3_0){
    NSInteger index=self.selectedIndex;
    [self.tabBar hideBadgeOnItemIndex:index];
    
    return YES;
}
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{
    NSInteger index=self.selectedIndex;
    [self.tabBar showBadgeOnItemIndex:index];
}

这样就完了么当然不会 这样运行你会发现 刚启动的时候没有红色小点 或者小条
so 我们需要在一开始就初始化 设置一下

• (void)viewDidLoad
  {
  [super viewDidLoad];
  NSInteger index=0;
  [self.tabBar showBadgeOnItemIndex:index];
  }

下面附上效果图
//红点

Untitled15.gif

//红条

Untitled16.gif