您现在的位置是:首页 > 文章详情

iOS开发之多表视图滑动切换示例(仿"头条"客户端)

日期:2015-07-06点击:486

【大咖・来了 第7期】10月24日晚8点观看《智能导购对话机器人实践》

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

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

一:实现方案

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

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

二:核心代码

1.组件中的主要属性

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

 
  1. @interface SlideTabBarView()///@brife 整个视图的大小 
  2. @property (assign) CGRect mViewFrame; 
  3. ///@brife 下方的ScrollView 
  4. @property (strong, nonatomic) UIScrollView *scrollView; 
  5. ///@brife 上方的按钮数组 
  6. @property (strong, nonatomic) NSMutableArray *topViews; 
  7. ///@brife 下方的表格数组 
  8. @property (strong, nonatomic) NSMutableArray *scrollTableViews; 
  9. ///@brife TableViews的数据源 
  10. @property (strong, nonatomic) NSMutableArray *dataSource; 
  11. ///@brife 当前选中页数 
  12. @property (assign) NSInteger currentPage; 
  13. ///@brife 下面滑动的View 
  14. @property (strong, nonatomic) UIView *slideView; 
  15. @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. return self; 

3.initDataSource方法主要负责模拟生成下方TableView要显示的数据。代码如下:

 
  1. #pragma mark -- 初始化表格的数据源 
  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个TableView的第%d条数据。", i, j]; 
  12. [tempArray addObject:tempStr]; 
  13.  
  14. [_dataSource addObject:tempArray]; 

4.红色滑动指示器的初始化代码如下所示:

 
  1. #pragma mark -- 初始化滑动的指示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]; 

5.ScrollView的初始化代码如下, 指定ScrollView的大小位置以及背景颜色,并且设置分页可用并添加代理。

 
  1. #pragma mark -- 实例化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]; 

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. UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(00, width, TOPHEIGHT)]; 
  15. button.tag = i; 
  16. [button setTitle:[NSString stringWithFormat:@"按钮%d", i+1] forState:UIControlStateNormal]; 
  17. [button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside]; 
  18. [view addSubview:button]; 
  19.  
  20.  
  21. [_topViews addObject:view]; 
  22. [self addSubview:view]; 

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]; 

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]; 

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

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

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

 
  1. pragma mark -- talbeView的代理方法 
  2. -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ 
  3. return 1
  4. -(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ 
  5. NSMutableArray *tempArray = _dataSource[_currentPage]; 
  6. return tempArray.count; 
  7. -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 
  8. return 60
  9. -(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
  10.  
  11. BOOL nibsRegistered=NO; 
  12. if (!nibsRegistered) { 
  13. UINib *nib=[UINib nibWithNibName:@"SlideBarCell" bundle:nil]; 
  14. [tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"]; 
  15. nibsRegistered=YES; 
  16.  
  17.  
  18. SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"]; 
  19. if ([tableView isEqual:_scrollTableViews[_currentPage]]) { 
  20. cell.tipTitle.text = _dataSource[_currentPage][indexPath.row]; 
  21.  
  22. return cell; 
  23.  
  24. Demo在GitHub上的分享地址:https://github.com/lizelu/SliderTabBar 
【责任编辑: chenqingxiang TEL:(010)68476606】

原文链接:http://mobile.51cto.com/news-483042.htm
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章