iOS開發(fā)之多表視圖滑動(dòng)切換示例（仿"頭條"客戶端）

abcjob

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

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

一：實(shí)現(xiàn)方案
最上方是一個(gè)View, View上面實(shí)例化了一些按鈕，平分屏幕的寬度，下方是一個(gè)ScrollView, ScrollView上面放了一些表視圖，點(diǎn)擊不同的Button, 滑動(dòng)到對應(yīng)的表示圖上。除了點(diǎn)擊按鈕，還可以進(jìn)行滑動(dòng)切換，切換時(shí)，紅色的指示器也會(huì)隨之滑動(dòng)。
主要的技術(shù)點(diǎn)就是通過ScrollView的回調(diào)，通過事件的響應(yīng)來改變ScrollView的ContentOffset的值。在回調(diào)中根據(jù)ContentOffset的值來計(jì)算紅色指示器的偏移量。

二：核心代碼
1.組件中的主要屬性
把上面整個(gè)視圖進(jìn)行了封裝，命名為SlideTabBarView，下面的代碼是主要屬性：

1. @interface SlideTabBarView()<UIScrollViewDelegate,UITableViewDataSource,UITableViewDelegate>
   
2. 2 ///@brife 整個(gè)視圖的大小
   
3. 3 @property (assign) CGRect mViewFrame;
   
4. 4
   
5. 5 ///@brife 下方的ScrollView
   
6. 6 @property (strong, nonatomic) UIScrollView *scrollView;
   
7. 7
   
8. 8 ///@brife 上方的按鈕數(shù)組
   
9. 9 @property (strong, nonatomic) NSMutableArray *topViews;
   
10. 10
    
11. 11 ///@brife 下方的表格數(shù)組
    
12. 12 @property (strong, nonatomic) NSMutableArray *scrollTableViews;
    
13. 13
    
14. 14 ///@brife TableViews的數(shù)據(jù)源
    
15. 15 @property (strong, nonatomic) NSMutableArray *dataSource;
    
16. 16
    
17. 17 ///@brife 當(dāng)前選中頁數(shù)
    
18. 18 @property (assign) NSInteger currentPage;
    
19. 19
    
20. 20 ///@brife 下面滑動(dòng)的View
    
21. 21 @property (strong, nonatomic) UIView *slideView;
    
22. 22 @end

復(fù)制代碼

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

1. -(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{
   
2. 2     self = [super initWithFrame:frame];
   
3. 3     
   
4. 4     if (self) {
   
5. 5         _mViewFrame = frame;
   
6. 6         _tabCount = count;
   
7. 7         _topViews = [[NSMutableArray alloc] init];
   
8. 8         _scrollTableViews = [[NSMutableArray alloc] init];
   
9. 9         
   
10. 10         [self initDataSource];
    
11. 11         
    
12. 12         [self initScrollView];
    
13. 13         
    
14. 14         [self initTopTabs];
    
15. 15         
    
16. 16         [self initDownTables];
    
17. 17         
    
18. 18         [self initDataSource];
    
19. 19         
    
20. 20         [self initSlideView];
    
21. 21         
    
22. 22     }
    
23. 23     
    
24. 24     return self;
    
25. 25 }

復(fù)制代碼

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

1. #pragma mark -- 初始化表格的數(shù)據(jù)源
   
2. -(void) initDataSource{
   
3.     _dataSource = [[NSMutableArray alloc] initWithCapacity:_tabCount];
   
4.    
   
5.     for (int i = 1; i <= _tabCount; i ++) {
   
6.         
   
7.         NSMutableArray *tempArray  = [[NSMutableArray alloc] initWithCapacity:20];
   
8.         
   
9.         for (int j = 1; j <= 20; j ++) {
   
10.             
    
11.             NSString *tempStr = [NSString stringWithFormat:@"我是第%d個(gè)TableView的第%d條數(shù)據(jù)。", i, j];
    
12.             [tempArray addObject:tempStr];
    
13.         }
    
14.         
    
15.         [_dataSource addObject:tempArray];
    
16.     }
    
17. }

復(fù)制代碼

4.紅色滑動(dòng)指示器的初始化代碼如下所示：

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

復(fù)制代碼

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

1. #pragma mark -- 實(shí)例化ScrollView
   
2. -(void) initScrollView{
   
3.     _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, _mViewFrame.origin.y, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];
   
4.     _scrollView.contentSize = CGSizeMake(_mViewFrame.size.width * _tabCount, _mViewFrame.size.height - 60);
   
5.     _scrollView.backgroundColor = [UIColor grayColor];
   
6.    
   
7.     _scrollView.pagingEnabled = YES;
   
8.    
   
9.     _scrollView.delegate = self;
   
10.     [self addSubview:_scrollView];
    
11. }

復(fù)制代碼

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

1. #pragma mark -- 實(shí)例化頂部的tab
   
2. 2 -(void) initTopTabs{
   
3. 3     CGFloat width = _mViewFrame.size.width / _tabCount;
   
4. 4     
   
5. 5     for (int i = 0; i < _tabCount; i ++) {
   
6. 6         
   
7. 7         UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)];
   
8. 8         
   
9. 9         view.backgroundColor = [UIColor lightGrayColor];
   
10. 10         
    
11. 11         if (i % 2) {
    
12. 12             view.backgroundColor = [UIColor grayColor];
    
13. 13         }
    
14. 14         
    
15. 15         UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)];
    
16. 16         button.tag = i;
    
17. 17         [button setTitle:[NSString stringWithFormat:@"按鈕%d", i+1] forState:UIControlStateNormal];
    
18. 18         [button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];
    
19. 19         [view addSubview:button];
    
20. 20         
    
21. 21         
    
22. 22         [_topViews addObject:view];
    
23. 23         [self addSubview:view];
    
24. 24     }
    
25. 25 }

復(fù)制代碼

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

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

復(fù)制代碼

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

1. #pragma mark --初始化下方的TableViews
   
2. 2 -(void) initDownTables{
   
3. 3     
   
4. 4     for (int i = 0; i < _tabCount; i ++) {
   
5. 5         
   
6. 6         UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];
   
7. 7         tableView.delegate = self;
   
8. 8         tableView.dataSource = self;
   
9. 9         
   
10. 10         [_scrollTableViews addObject:tableView];
    
11. 11         [_scrollView addSubview:tableView];
    
12. 12     }
    
13. 13
    
14. 14 }

復(fù)制代碼

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

1. #pragma mark -- scrollView的代理方法
   
2. 2 -(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
   
3. 3     [self scrollViewDidEndDecelerating:scrollView];
   
4. 4 }
   
5. 5
   
6. 6 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
   
7. 7
   
8. 8 {
   
9. 9     _currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;
   
10. 10     
    
11. 11     UITableView *currentTable = _scrollTableViews[_currentPage];
    
12. 12     [currentTable reloadData];
    
13. 13     
    
14. 14 }
    
15. 15
    
16. 16 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
17. 17     if ([_scrollView isEqual:scrollView]) {
    
18. 18         CGRect frame = _slideView.frame;
    
19. 19         frame.origin.x = scrollView.contentOffset.x/_tabCount;
    
20. 20         _slideView.frame = frame;
    
21. 21     }
    
22. 22 }

復(fù)制代碼

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

1. #pragma mark -- talbeView的代理方法
   
2. 2 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
   
3. 3     return 1;
   
4. 4 }
   
5. 5
   
6. 6 -(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
   
7. 7     NSMutableArray *tempArray = _dataSource[_currentPage];
   
8. 8     return tempArray.count;
   
9. 9 }
   
10. 10
    
11. 11 -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
12. 12     return 60;
    
13. 13 }
    
14. 14
    
15. 15 -(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
16. 16     
    
17. 17     BOOL nibsRegistered=NO;
    
18. 18     if (!nibsRegistered) {
    
19. 19         UINib *nib=[UINib nibWithNibName:@"SlideBarCell" bundle:nil];
    
20. 20         [tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"];
    
21. 21         nibsRegistered=YES;
    
22. 22     }
    
23. 23     
    
24. 24     
    
25. 25     SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"];
    
26. 26     if ([tableView isEqual:_scrollTableViews[_currentPage]]) {
    
27. 27          cell.tipTitle.text = _dataSource[_currentPage][indexPath.row];
    
28. 28     }
    
29. 29   
    
30. 30     return cell;
    
31. 31 }

復(fù)制代碼