你的位置:首页 > 操作系统

[操作系统]iOS开发之多表视图滑动切换示例(仿头条客户端)


  好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例。在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行使用,稍微进行修改即可。

  废话少说,先介绍一下功能点,下图是整个Demo的功能点,最上面左边的TabBarButtonItem是用来减少条目的,比如下图有三个按钮,点击减号会减少一个条目。右边的为增加一个条目。点击相应的按钮是切换到对应的表视图上,下方红色的是滑动的指示器,同时支持手势滑动。运行具体效果如下图所示。

      

  一:实现方案

    最上方是一个View, View上面实例化了一些按钮,平分屏幕的宽度,下方是一个ScrollView, ScrollView上面放了一些表视图,点击不同的Button, 滑动到对应的表示图上。除了点击按钮,还可以进行滑动切换,切换时,红色的指示器也会随之滑动。

     主要的技术点就是通过ScrollView的回调,通过事件的响应来改变ScrollView的ContentOffset的值。在回调中根据ContentOffset的值来计算红色指示器的偏移量。

  二:核心代码

  1.组件中的主要属性

    把上面整个视图进行了封装,命名为SlideTabBarView,下面的代码是主要属性:

 1 @interface SlideTabBarView()<UIScrollViewDelegate,UITableViewDataSource,UITableViewDelegate> 2 ///@brife 整个视图的大小 3 @property (assign) CGRect mViewFrame; 4  5 ///@brife 下方的ScrollView 6 @property (strong, nonatomic) UIScrollView *scrollView; 7  8 ///@brife 上方的按钮数组 9 @property (strong, nonatomic) NSMutableArray *topViews;10 11 ///@brife 下方的表格数组12 @property (strong, nonatomic) NSMutableArray *scrollTableViews;13 14 ///@brife TableViews的数据源15 @property (strong, nonatomic) NSMutableArray *dataSource;16 17 ///@brife 当前选中页数18 @property (assign) NSInteger currentPage;19 20 ///@brife 下面滑动的View21 @property (strong, nonatomic) UIView *slideView;22 @end

 

  2.初始化方法如下,在调用初始化方法时需要传入SlideTabBarView的frame和选项卡的个数,初始化函数会调用一系列的初始化方法对组件进行初始化,代码如下:

 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方法主要负责模拟生成下方TableView要显示的数据。代码如下:

#pragma mark -- 初始化表格的数据源-(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条数据。", 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的大小位置以及背景颜色,并且设置分页可用并添加代理。

#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.添加上方的按钮,根据传入的个数来实例化多个按钮。

 1 #pragma mark -- 实例化顶部的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.点击按钮触发的方法如下:

1 #pragma mark --点击顶部的按钮所触发的方法2 -(void) tabButton: (id) sender{3   UIButton *button = sender;4   [_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0) animated:YES];5 }

 

    8.初始化下方的多个表视图:实例化表视图,并指定委托回调。

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

 

    9.ScrollView的回调方法如下,下面最后一个代理方法是根据ScrollView的偏移量来计算红色指示器的偏移量,第二个是滑动到哪个tableView,然后进行哪个TableView的数据加载。

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

 

    10.TableView的代理方法如下,数据源就是我们刚才做的假数据,Cell是由Xib实现的,使用的时候注册一下就可用了。

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

 

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