好長時間沒為大家?guī)韎OS開發(fā)干貨的東西了，今天給大家分享一個頭條新聞客戶端各個類別進行切換的一個示例。在Demo中對所需的組件進行的簡單封裝，在封裝的組件中使用的是純代碼的形式，如果想要在項目中進行使用，稍微進行修改即可。

廢話少說，先介紹一下功能點，下圖是整個Demo的功能點，最上面左邊的TabBarButtonItem是用來減少條目的，比如下圖有三個按鈕，點擊減號會減少一個條目。右邊的為增加一個條目。點擊相應(yīng)的按鈕是切換到對應(yīng)的表視圖上，下方紅色的是滑動的指示器，同時支持手勢滑動。運行具體效果如下圖所示。

一：實現(xiàn)方案

最上方是一個View, View上面實例化了一些按鈕，平分屏幕的寬度，下方是一個ScrollView, ScrollView上面放了一些表視圖，點擊不同的Button, 滑動到對應(yīng)的表示圖上。除了點擊按鈕，還可以進行滑動切換，切換時，紅色的指示器也會隨之滑動。

主要的技術(shù)點就是通過ScrollView的回調(diào)，通過事件的響應(yīng)來改變ScrollView的ContentOffset的值。在回調(diào)中根據(jù)ContentOffset的值來計算紅色指示器的偏移量。

二：核心代碼

1.組件中的主要屬性

把上面整個視圖進行了封裝，命名為SlideTabBarView，下面的代碼是主要屬性：
 

@interface SlideTabBarView()///@brife 整個視圖的大小 
@property (assign) CGRect mViewFrame; 
///@brife 下方的ScrollView 
@property (strong, nonatomic) UIScrollView *scrollView; 
///@brife 上方的按鈕數(shù)組 
@property (strong, nonatomic) NSMutableArray *topViews; 
///@brife 下方的表格數(shù)組 
@property (strong, nonatomic) NSMutableArray *scrollTableViews; 
///@brife TableViews的數(shù)據(jù)源 
@property (strong, nonatomic) NSMutableArray *dataSource; 
///@brife 當前選中頁數(shù) 
@property (assign) NSInteger currentPage; 
///@brife 下面滑動的View 
@property (strong, nonatomic) UIView *slideView; 
@end 

2.初始化方法如下，在調(diào)用初始化方法時需要傳入SlideTabBarView的frame和選項卡的個數(shù)，初始化函數(shù)會調(diào)用一系列的初始化方法對組件進行初始化，代碼如下：

-(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{ 
self = [super initWithFrame:frame]; 
 
if (self) { 
_mViewFrame = frame; 
_tabCount = count; 
_topViews = [[NSMutableArray alloc] init]; 
_scrollTableViews = [[NSMutableArray alloc] init]; 
 
[self initDataSource]; 
 
[self initScrollView]; 
 
[self initTopTabs]; 
 
[self initDownTables]; 
 
[self initDataSource]; 
 
[self initSlideView]; 
 
} 
 
return self; 
} 

3.initDataSource方法主要負責模擬生成下方TableView要顯示的數(shù)據(jù)。代碼如下：

#pragma mark -- 初始化表格的數(shù)據(jù)源 
-(void) initDataSource{ 
_dataSource = [[NSMutableArray alloc] initWithCapacity:_tabCount]; 
 
for (int i = 1; i <= _tabCount; i ++) { 
 
NSMutableArray *tempArray = [[NSMutableArray alloc] initWithCapacity:20]; 
 
for (int j = 1; j <= 20; j ++) { 
 
NSString *tempStr = [NSString stringWithFormat:@"我是第%d個TableView的第%d條數(shù)據(jù)。", i, j]; 
[tempArray addObject:tempStr]; 
} 
 
[_dataSource addObject:tempArray]; 
} 
} 

4.紅色滑動指示器的初始化代碼如下所示：

#pragma mark -- 初始化滑動的指示View 
-(void) initSlideView{ 
CGFloat width = _mViewFrame.size.width / _tabCount; 
_slideView = [[UIView alloc] initWithFrame:CGRectMake(0, TOPHEIGHT - 5, width, 5)]; 
[_slideView setBackgroundColor:[UIColor redColor]]; 
[self addSubview:_slideView]; 
} 

5.ScrollView的初始化代碼如下, 指定ScrollView的大小位置以及背景顏色，并且設(shè)置分頁可用并添加代理。

#pragma mark -- 實例化ScrollView 
-(void) initScrollView{ 
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, _mViewFrame.origin.y, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)]; 
_scrollView.contentSize = CGSizeMake(_mViewFrame.size.width * _tabCount, _mViewFrame.size.height - 60); 
_scrollView.backgroundColor = [UIColor grayColor]; 
 
_scrollView.pagingEnabled = YES; 
 
_scrollView.delegate = self; 
[self addSubview:_scrollView]; 
} 

6.添加上方的按鈕，根據(jù)傳入的個數(shù)來實例化多個按鈕。

#pragma mark -- 實例化頂部的tab 
-(void) initTopTabs{ 
CGFloat width = _mViewFrame.size.width / _tabCount; 
 
for (int i = 0; i < _tabCount; i ++) { 
 
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)]; 
 
view.backgroundColor = [UIColor lightGrayColor]; 
 
if (i % 2) { 
view.backgroundColor = [UIColor grayColor]; 
} 
 
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)]; 
button.tag = i; 
[button setTitle:[NSString stringWithFormat:@"按鈕%d", i+1] forState:UIControlStateNormal]; 
[button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside]; 
[view addSubview:button]; 
 
 
[_topViews addObject:view]; 
[self addSubview:view]; 
} 
} 

7.點擊按鈕觸發(fā)的方法如下：
 

#pragma mark --點擊頂部的按鈕所觸發(fā)的方法 
-(void) tabButton: (id) sender{ 
UIButton *button = sender; 
[_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0) animated:YES]; 
} 

8.初始化下方的多個表視圖：實例化表視圖，并指定委托回調(diào)。

#pragma mark --初始化下方的TableViews 
-(void) initDownTables{ 
 
for (int i = 0; i < _tabCount; i ++) { 
 
UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)]; 
tableView.delegate = self; 
tableView.dataSource = self; 
 
[_scrollTableViews addObject:tableView]; 
[_scrollView addSubview:tableView]; 
} 
} 

9.ScrollView的回調(diào)方法如下，下面***一個代理方法是根據(jù)ScrollView的偏移量來計算紅色指示器的偏移量，第二個是滑動到哪個tableView，然后進行哪個TableView的數(shù)據(jù)加載。

#pragma mark -- scrollView的代理方法 
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{ 
[self scrollViewDidEndDecelerating:scrollView]; 
} 
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 
{ 
_currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width; 
 
UITableView *currentTable = _scrollTableViews[_currentPage]; 
[currentTable reloadData]; 
 
} 
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ 
if ([_scrollView isEqual:scrollView]) { 
CGRect frame = _slideView.frame; 
frame.origin.x = scrollView.contentOffset.x/_tabCount; 
_slideView.frame = frame; 
} 
} 

10.TableView的代理方法如下，數(shù)據(jù)源就是我們剛才做的假數(shù)據(jù)，Cell是由Xib實現(xiàn)的，使用的時候注冊一下就可用了。

pragma mark -- talbeView的代理方法 
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ 
return 1; 
} 
-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ 
NSMutableArray *tempArray = _dataSource[_currentPage]; 
return tempArray.count; 
} 
-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 
return 60; 
} 
-(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
 
BOOL nibsRegistered=NO; 
if (!nibsRegistered) { 
UINib *nib=[UINib nibWithNibName:@"SlideBarCell" bundle:nil]; 
[tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"]; 
nibsRegistered=YES; 
} 
 
 
SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"]; 
if ([tableView isEqual:_scrollTableViews[_currentPage]]) { 
cell.tipTitle.text = _dataSource[_currentPage][indexPath.row]; 
} 
 
return cell; 
} 
 
Demo在GitHub上的分享地址：https://github.com/lizelu/SliderTabBar