iOS scrollView中嵌套多个tabeleView处理方案

iOS scrollView中嵌套多个tabeleView处理方案

iOS scrollView中嵌套多个tabeleView处理方案

iOS scrollView中嵌套多个tabeleView处理方案

项目中经常会有这样的需求,scrollView有个头部,当scrollView滚动的时候头部也跟着滚动,同时头部还有一个tab会锁定在某个位置,scrollView中可以放很多不同的view,这些view可以在scrollView中横向滚动,要实现这样的需求,按理说如果头部是固定不动的,那么在scrollView嵌套多层view,同时控制这些view的在scrollView中的位置,是很好实现的,这里的难点在scrollView的头部也是可以滚动的。
解决以上问题有2中方法可以考虑
方法1:
不用scrollView,直接用一个tableView,头部作为tableView的tableHeaderView。当头部的tab被点击了,切换tableView的数据源,通过一个index来标识当前选中了那个tab,然后让tableView去刷新指定的数据源。如果你用这种方法好处是很快就可以实现功能,我想遇到这样的需求,大部分人都是采用的这种方案吧。缺点了也是很明显,所有tab公用一个tableView,就会导致tableView中的业务相当复杂,tableView中的代码会非常多,并且可拓展性也不强。
方法2:
用scrollView,让scrollView覆盖其父视图的整个界面,然后创建多个view作为scrollView的子视图,这里的view不限定是tableView,collectionView也是可以的,把创建的n个View依次添加到scrollView中,注意这些view的x轴,同时设置scrollview的contentsize,我们再创建一个headerView,作为scrollView的头部。同时通过addSubview的方式把headerView添加到scrollView中,注意要保证headerView要在最上层,防止其被遮住。每个tableView在被创建的时候提供一个setHeader的方法,并且传入这个创建headerView,在setheader方法中,我们拿到headerView的真实宽高,并为该tableView添加一个相同高度的tableHeaderView,其实大概意思就是为所有tableView都添加一个和scrollView的headview大小相同的tableViewHeaderView,由于我们的scrollView的header浮在最上层,刚好完美的遮住这些tableView的tableHeaderView,当我们tableView上下滑动的时候控制headerView和tableView的tableHeaderView同步滑动就可以了,当我们需要横向滑动的时候,监听scrollView的contentoffset,让headrView的x轴跟随scrollView滑动,这样联动就算完成了。剩下的就是处理点击事件,处理滑动事件的问题了。说了这么多,估计都有点糊涂了把,还是直接上代码把,这里把部分核心代码帖处理,并且在文章结束的时候送上测试demo

#import "ViewController.h" #import "UIView+XYView.h" #import "TYTableView1.h" #import "TableView2.h" #import "TYHeaderView.h" #define kHeadHeight 300 @interface ViewController ()<UIScrollViewDelegate,headerViewDelegate> @property (nonatomic, strong) UIScrollView *scrollView; @property (nonatomic, strong) TYHeaderView *headerView; @property (nonatomic, strong) TYTableView1 *tableView1; @property (nonatomic, strong) TableView2 *tableView2; @property (nonatomic, assign) CGPoint lastContentOffset; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self setupUI]; } -(TYHeaderView *)headerView{ if (!_headerView) { _headerView = [[TYHeaderView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, kHeadHeight)]; _headerView.backgroundColor = [UIColor redColor]; _headerView.delegate = self; } return _headerView; } -(UIScrollView *)scrollView{ if (!_scrollView) { _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)]; _scrollView.delegate = self; _scrollView.pagingEnabled = YES; _scrollView.showsVerticalScrollIndicator = NO; _scrollView.showsHorizontalScrollIndicator = NO; _scrollView.contentSize = CGSizeMake(SCREEN_WIDTH *2, 0); } return _scrollView; } -(UITableView *)tableView1{ if (!_tableView1) { _tableView1 = [[TYTableView1 alloc] initWithFrame:CGRectMake(0, 0,SCREEN_WIDTH, self.scrollView.height)]; _tableView1.showsHorizontalScrollIndicator = NO; _tableView1.showsVerticalScrollIndicator = NO; _tableView1.headerView = self.headerView; } return _tableView1; } -(UITableView *)tableView2{ if (!_tableView2) { _tableView2 = [[TableView2 alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0,SCREEN_WIDTH, self.scrollView.height)]; _tableView2.showsHorizontalScrollIndicator = NO; _tableView2.showsVerticalScrollIndicator = NO; _tableView2.headerView = self.headerView; } return _tableView2; } -(void)setupUI{ [self.view addSubview:self.scrollView]; [self.scrollView addSubview:self.tableView1]; [self.scrollView addSubview:self.tableView2]; [self.scrollView addSubview:self.headerView]; } #pragma mark - ScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ if (scrollView == self.scrollView) { self.headerView.x = scrollView.contentOffset.x; int index = 0; if (self.lastContentOffset.x < scrollView.contentOffset.x) { //往右滑动,向上取整 index = ceil((scrollView.contentOffset.x/SCREEN_WIDTH)); }else if (self.lastContentOffset.x > scrollView.contentOffset.x) { //往左滑动,向下取整 index = floor((scrollView.contentOffset.x/SCREEN_WIDTH)); }else { //没动 index = (scrollView.contentOffset.x/SCREEN_WIDTH); } CGFloat mobileDistance = (0-self.headerView.y); switch (index) { case 0:{ //修改circleTableView if (self.tableView1.contentOffset.y<mobileDistance) { [self.tableView1 setContentOffset:CGPointMake(0, mobileDistance) animated:NO]; } } break; case 1:{ //修改photoView if (self.tableView2.contentOffset.y<mobileDistance) { [self.tableView2 setContentOffset:CGPointMake(0, mobileDistance) animated:NO]; } } break; default: break; } self.lastContentOffset = scrollView.contentOffset; } } -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ static int lastIndex = 0; int index = 0; if (self.lastContentOffset.x < scrollView.contentOffset.x) { //往右滑动,向上取整 index = ceil((scrollView.contentOffset.x/SCREEN_WIDTH)); }else if (self.lastContentOffset.x > scrollView.contentOffset.x) { //往左滑动,向下取整 index = floor((scrollView.contentOffset.x/SCREEN_WIDTH)); }else { //没动 index = (scrollView.contentOffset.x/SCREEN_WIDTH); } // if (lastIndex != index) { //让headerView重新设置选中的item self.headerView.selectIndex = index; // } lastIndex = index; } #pragma mark - headerViewDelegate -(void)headerView:(TYHeaderView *)headerView SelectionIndex:(NSInteger)index{ //让scrollView滚动到指定位置 [self.scrollView setContentOffset:CGPointMake(self.scrollView.width*index, 0) animated:YES]; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zysyzs.html