自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

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

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

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

blob.png

一：實(shí)現(xiàn)方案

最上方是一個(gè)View, View上面實(shí)例化了一些按鈕，平分屏幕的寬度，下方是一個(gè)ScrollView, ScrollView上面放了一些表視圖，點(diǎn)擊不同的Button, 滑動(dòng)到對(duì)應(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()///@brife 整個(gè)視圖的大小 
  2. @property (assign) CGRect mViewFrame; 
  3. ///@brife 下方的ScrollView 
  4. @property (strong, nonatomic) UIScrollView *scrollView; 
  5. ///@brife 上方的按鈕數(shù)組 
  6. @property (strong, nonatomic) NSMutableArray *topViews; 
  7. ///@brife 下方的表格數(shù)組 
  8. @property (strong, nonatomic) NSMutableArray *scrollTableViews; 
  9. ///@brife TableViews的數(shù)據(jù)源 
  10. @property (strong, nonatomic) NSMutableArray *dataSource; 
  11. ///@brife 當(dāng)前選中頁(yè)數(shù) 
  12. @property (assign) NSInteger currentPage; 
  13. ///@brife 下面滑動(dòng)的View 
  14. @property (strong, nonatomic) UIView *slideView; 
  15. @end 

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

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

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. } 
  18.  
  19.               

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. } 

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

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

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

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

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

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

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

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

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

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

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

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

Demo在GitHub上的分享地址：https://github.com/lizelu/SliderTabBar

責(zé)任編輯：倪明 來源： 青玉伏案的博客
ios開發(fā)多表視圖
相關(guān)推薦

2015-07-06 10:48:56

iOS開發(fā)技巧

2015-12-09 11:22:24

高仿今日頭條android源碼

2013-07-22 14:29:35

iOS開發(fā)ASIHTTPRequ

2014-08-11 16:35:35

KafkaJava客戶端

2011-06-15 17:28:23

Qt 多視圖 架構(gòu)

2015-01-09 11:49:26

Android源碼下載

2015-03-30 14:24:06

網(wǎng)易布局

2017-09-12 17:05:02

AndroidLoading客戶端

2009-12-25 15:12:01

WPF平臺(tái)

2011-08-17 10:10:59

2021-09-22 15:46:29

虛擬桌面瘦客戶端胖客戶端

2014-09-02 10:55:25

iOS開發(fā)視圖切換

2010-05-31 10:11:32

瘦客戶端

2011-10-26 13:17:05

2013-07-04 10:01:04

2011-03-02 14:36:24

Filezilla客戶端

2010-12-21 11:03:15

獲取客戶端證書

2011-03-24 13:00:31

配置nagios客戶端

2022-11-29 17:08:03

開發(fā)Web客戶端

2013-12-17 11:18:53

iOS開發(fā)多媒體API
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)