自定義TabBar

2019-11-14 18:16:37

字體：大中小

來源：轉載

供稿：網友

　　在現階IOS開發的樣式越來越多，有些系統自帶的東西我們無法滿足業務的需求，因此我們需要根據自己的需求對當前所用的到技術自定義，只有靈活的自己封裝自己定義才能讓你的代碼更具有靈活性，下面我們以一個自定義的tabbar為例子講解，一起封裝一個Tabcontroller。

　　分析：我們要完成一個tabbarcontroller首先我們需要跟蘋果提供的一樣，需要一個tabbar視圖，也就是工具條用來點擊用，然后我們需要排列在tabbar上面的tabbarItem，下面我們就根據蘋果提供的方式分別定義如下類

1、JRTabBar類內容如下

/** 接受傳過來的item標題和圖片*/@PRoperty(nonatomic,strong) NSArray *  itemArray;@property(nonatomic,weak) id<JRTabBarProtocol> delegate;-(instancetype)initWithFrame:(CGRect)frame andItems:(NSArray *) arr#pragma mark - 增加item- (void)addItems{    CGFloat space =(kWidth-2*kEdgeMargin-self.itemArray.count*40)/(self.itemArray.count-1);            for (int i=0;i<self.itemArray.count;i++) {       JRItem *item= [[[NSBundle mainBundle] loadNibNamed:@"jritem" owner:nil options:nil] firstObject];        item.tag=100+i;                //1 初始化item                JRItemModel * model=self.itemArray[i];        item.imageView.image=model.image;        item.label.text=model.title;                //2 修改坐標        CGRect frame=item.frame;        frame.origin.x=kEdgeMargin+i*(space+40);        item.frame=frame;                //3加入tabbar        [self addSubview:item];                   //增加點擊手勢        UITapGestureRecognizer * tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(showInfo:)];        [item addGestureRecognizer:tap];                  }}

效果圖如下：

2、針對JRItem我們先通過xib創業出來，然后定義相應的類并且連接輸出口如下圖所示

3、然后我們需要根據蘋果一樣定義一個容器來存放將要展示和所有控制器和我們需要的展示的tabItem，這里我們取名為JRTabBarConroller。

3.1首先我們需要為當前的控制器添加tabbar

pragma mark - 添加tabbar- (void) _setUpTabbar{            JRTabBar * tab=[[JRTabBar alloc] initWithFrame:CGRectMake(0, kHeight-49,kWidth , 49) andItems:self.items];    tab.delegate=self;    [self.view addSubview:tab];        //控制tabbar隱藏    tab.hidden=self.hiddenTabBar;       }

3.2首先我們將需要傳入的控制器展示出來

//設置視圖控制器- (void)_setUpSelectController:(NSInteger) index{    //如果重復點擊，取消操作    UIViewController * vc=self.viewControllers[index];    if(self.currentVC==vc)return;            //第一次不進行動畫    if(self.currentVC==nil){        [self.view addSubview:vc.view];        self.currentVC=vc;    }else{     //第二次開始加載動畫        //將當前的視圖移動到屏幕的最邊緣位置，然后在動畫慢慢的拉回來從而達到翻頁效果     [self.view insertSubview:vc.view aboveSubview:self.currentVC.view];        vc.view.transform=CGAffineTransformMakeTranslation(kWidth, 0);        [UIView animateWithDuration:0.5 animations:^{            vc.view.transform=CGAffineTransformIdentity;                    } completion:^(BOOL finished) {            [self.currentVC.view removeFromSuperview];            self.currentVC=vc;        }];    } }

3.3然后我們需要切換控制器

#pragma mark - JRTabBarProtocol- (void)changeVC:(NSInteger)index{    NSInteger tag=index-100;           //  重新切換控制器    [self _setUpSelectController:tag];

3.4這樣我們就大功告成了，然后我們需要對外提供接口

/** 定義一個數組，用來存放視圖控制器*/@property(nonatomic,strong) NSArray * viewControllers;/** 定義一個數組，用來存放Item*/@property(nonatomic,strong) NSArray * items;/** 選中索引*/@property(nonatomic,assign) NSInteger selectedIndex;@property(nonatomic,assign) BOOL hiddenTabBar;

3.5有了這些接口我們在外面調用即可

//初始化控制器    //1    UIViewController * vc1=[[UIViewController alloc] init];    vc1.view.backgroundColor=[UIColor redColor];    //2    UIViewController * vc2=[[UIViewController alloc] init];    vc2.view.backgroundColor=[UIColor greenColor];    //3    UIViewController * vc3=[[UIViewController alloc] init];    vc3.view.backgroundColor=[UIColor orangeColor];    //4    UIViewController * vc4=[[UIViewController alloc] init];    vc4.view.backgroundColor=[UIColor blueColor];            //初始化item        JRItemModel * item1=[[JRItemModel alloc] initWithTitle:@"tab1" andImage:[UIImage imageNamed:@"tabbar_cate"]];        JRItemModel * item2=[[JRItemModel alloc] initWithTitle:@"tab2" andImage:[UIImage imageNamed:@"tabbar_fov"]];        JRItemModel * item3=[[JRItemModel alloc] initWithTitle:@"tab3" andImage:[UIImage imageNamed:@"tabbar_home"]];        JRItemModel * item4=[[JRItemModel alloc] initWithTitle:@"tab4" andImage:[UIImage imageNamed:@"tabbar_search"]];                JRTabBarConroller * tab=[[JRTabBarConroller alloc] init];    tab.viewControllers=@[vc1,vc2,vc3,vc4];    tab.items=@[item1,item2,item3,item4];//  tab.hiddenTabBar=NO;        self.window.rootViewController=tab;