在項目開發(fā)中經(jīng)常會遇到,需要在tabbar 上顯示紅色角標 ,紅色小點 ,或者紅色小線條等等,至于紅色角標 系統(tǒng)已經(jīng)直接給我們提供了方法 直接調(diào)用

[self.tabBarItem setBadgeValue:badge];

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

那如果要設(shè)置 紅色小圓點 或者滑動條呢 ?又該如何設(shè)置呢?
其實很簡單.創(chuàng)立一個分類就好啦.
首先我們創(chuàng)建項目工程 ,我們的TabbarController 采用自定義的 繼承自UITabbarController,命名為BaseTabBarController,創(chuàng)建三個自控制器的代碼我就不多寫了.直接說干貨,遵守UITabBarControllerDelegate協(xié)議,設(shè)置代理

實現(xiàn)2個方法

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

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

}
方法里面暫且什么都不寫
下面開始我們的第二步 ,創(chuàng)建一個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的數(shù)量 如果是5個設(shè)置為5.0
@implementation UITabBar (Line)
//顯示小紅點
- (void)showBadgeOnItemIndex:(NSInteger)index{
    //移除之前的小紅點
    [self removeBadgeOnItemIndex:index];
   

    //紅點
    [self creatRedCirlce:index];
    //紅條
    //[self creatRedLine:index];
    ![Untitled15.gif](http://upload-images.jianshu.io/upload_images/6796505-f4f41eecbfffcad7.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    
}
//創(chuàng)建紅色條
-(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 寬度  根據(jù)需要來定
    CGFloat x = (percentX * tabFrame.size.width)+itemW/2;//紅點位置可以根據(jù)需要調(diào)整
    
    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

調(diào)用回到之前的 實現(xiàn)的協(xié)議方法
在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];
}

這樣就完了么當然不會 這樣運行你會發(fā)現(xiàn) 剛啟動的時候沒有紅色小點 或者小條
so 我們需要在一開始就初始化 設(shè)置一下

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

下面附上效果圖
//紅點

Untitled15.gif

//紅條

Untitled16.gif