最近项目中需要做一个两个tableVIew联动的效果,有点类似于饿了吗外卖点餐的那种效果,虽然实现起来难度不是太大,但是还是记录下来,方便有需要的开发者少走一些弯路.个人认为做什么效果主要还是一个思路问题,思路对了,做起来也就得心应手了.废话不多说,先附上效果图.
示例.gif
具体实现步骤
1 . 首先确定好思路,底层是用viewController, 上面的地址和派送次数的视图是用两个View做的,下面两个tableView ,左边是leftTableView , 右边是rightTableView.这样做的目的是为了tableView滑动到顶部的时候整个视图有个上移的动画效果,这样做更加方便一点.
2.接下来创建2个view和leftTableView,rightTableView遵循代理,加载数据源.进入页面默认选中leftTableView第一个单元格,这些步骤忽略.
默认选中第一个单元格 [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionNone];
3.点击左侧tableView的时候,让右侧的tableView滚动到指定的分区.实现tableView的代理方法.取出当前的分区的indexpatg.row就是rightTbaleView的分区section.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath { if (_leftTableView == tableView) { AYLeftPickTableViewCell *leftCell = [tableView cellForRowAtIndexPath:indexPath]; leftCell.contentView.backgroundColor = KLightYellowColor; NSArray *array = [tableView visibleCells]; for (AYLeftPickTableViewCell *leftCell in array) { // 不打对勾 leftCell.titleLabel.textColor = [UIColor blackColor]; } // 打对勾 leftCell.titleLabel.textColor = kOrangeTextColor; [_rightTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES]; } }
4.滚动rightTableView的时候让左侧tableView滚动到指定的行,也就是rightTableView的分区section,和leftTableView的indexPath.row是相对应的.实现scrollView的代理方法.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 滑动视图上移动画 [self viewUpAnimationWihtScrollView:scrollView]; if (scrollView == self.rightTableView) { //取出当前显示的最顶部的cell的indexpath //当前tableview页面可见的分区属性 indexPathsForVisibleRows // 取出显示在 视图 且最靠上 的 cell 的 indexPath // 判断tableView是否滑动到最底部 CGFloat height = scrollView.frame.size.height; CGFloat contentOffsetY = scrollView.contentOffset.y; CGFloat bottomOffset = scrollView.contentSize.height - contentOffsetY; if (bottomOffset <= height) { NSIndexPath *bottomIndexPath = [[self.rightTableView indexPathsForVisibleRows] lastObject]; NSIndexPath *moveIndexPath = [NSIndexPath indexPathForRow:bottomIndexPath.section inSection:0]; [self.leftTableView selectRowAtIndexPath:moveIndexPath animated:NO scrollPosition:UITableViewScrollPositionMiddle]; } else { NSIndexPath *topIndexPath = [[self.rightTableView indexPathsForVisibleRows]firstObject]; NSIndexPath *moveIndexPath = [NSIndexPath indexPathForRow:topIndexPath.section inSection:0]; [self.leftTableView selectRowAtIndexPath:moveIndexPath animated:NO scrollPosition:UITableViewScrollPositionMiddle]; } }else{ return; } }
5.当滑动tableView的时候添加动画,tableView向上滑动的时候让View向上偏移.这一步在scrollViewDidScroll:(UIScrollView *)scrollView中调用.
- (void)viewUpAnimationWihtScrollView:(UIScrollView *)scrollView { if (scrollView.contentOffset.y > 0) { [self.addressView mas_updateConstraints:^(MASConstraintMaker *make) { make.left.right.mas_equalTo(0); make.top.mas_equalTo(-Address_Height+64); make.height.mas_equalTo(Address_Height); }]; [UIView animateWithDuration:0.2 animations:^{ [self.view layoutIfNeeded]; self.rightTableView.frame = CGRectMake(LeftTable_Width, SendView_Height+64, kScreenWidth - LeftTable_Width, kScreenHeight - 64 - 50 - SendView_Height); self.leftTableView.frame = CGRectMake(0, SendView_Height+64, LeftTable_Width, kScreenHeight - 64 - 50 - SendView_Height); } completion:^(BOOL finished) { nil; }]; } else { [self.addressView mas_updateConstraints:^(MASConstraintMaker *make) { make.left.right.mas_equalTo(0); make.top.mas_equalTo(64); make.height.mas_equalTo(Address_Height); }]; [UIView animateWithDuration:0.2 animations:^{ [self.view layoutIfNeeded]; self.rightTableView.frame = CGRectMake(LeftTable_Width, Address_Height + SendView_Height+64, kScreenWidth - LeftTable_Width, kScreenHeight - 64 - 50 - Address_Height - SendView_Height); self.leftTableView.frame = CGRectMake(0, Address_Height + SendView_Height+64, LeftTable_Width, kScreenHeight - 64 - 50 - Address_Height - SendView_Height); } completion:^(BOOL finished) { nil; }]; } }
这样就实现了两个tableView联动的效果,其中2个方法比较关键:
-1 .点击leftTableView的时候让rightTableView滚动到指定分区.
[_rightTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];
-2 .rightTableView滚动的时候,获取当前页面可见的分区行数,
NSIndexPath *topIndexPath = [[self.rightTableView indexPathsForVisibleRows]firstObject];
优化处理
--- 根据卖香蕉的大叔的建议,对tableView单选处理进行优化.以前我写的那种方式是用NSArray *array = [tableView visibleCells];方法遍历出所有的单元格,然后重新改变title的颜色和cell的背景颜色,然后给当前点击的这个单元格重新改变新的颜色,这样的操作不利于tableView的优化,如果cell足够多的时候,这样做会造成界面卡顿.
1.把最后点击的最后点击的cell的indexPath定义成属性.
@property(nonatomic, strong) NSIndexPath *lastPath; // 单选
2.在点击cell的时候记录下最新的indexPath,并且把最新点击的cell上的title和背景颜色进行修改,把以前的cell再更改回原始状态.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (_leftTableView == tableView) { NSInteger newRow = [indexPath row]; NSInteger oldRow = (self .lastPath !=nil)?[self .lastPath row]:-1; if (newRow != oldRow) { AYLeftPickTableViewCell *newCell = [tableView cellForRowAtIndexPath:indexPath]; newCell.contentView.backgroundColor = KLightYellowColor; newCell.titleLabel.textColor = kOrangeTextColor; AYLeftPickTableViewCell *oldCell = [tableView cellForRowAtIndexPath:self.lastPath]; oldCell.contentView.backgroundColor = [UIColor clearColor]; oldCell.titleLabel.textColor = [UIColor blackColor]; } self.lastPath = indexPath; [_rightTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES]; } }
3.为了防止单元格重用出现问题,需要在cellForRowAtIndexPath中判断当前cell的选中状态.
AYLeftPickTableViewCell *leftCell = [tableView dequeueReusableCellWithIdentifier:@"AYLeftPickTableViewCell" forIndexPath:indexPath]; AYCollectFoodModel *model = self.dataArray[indexPath.row]; leftCell.titleLabel.text = model.vegname; leftCell.selectionStyle = UITableViewCellSelectionStyleNone; NSInteger row = [indexPath row]; NSInteger oldRow = [_lastPath row]; if (row == oldRow && _lastPath!=nil) { // 被选中状态 leftCell.contentView.backgroundColor = KLightYellowColor; leftCell.titleLabel.textColor = kOrangeTextColor; }else{ leftCell.contentView.backgroundColor = [UIColor clearColor]; leftCell.titleLabel.textColor = [UIColor blackColor]; }
这种处理适用于自定义单元格的单选处理,在这里也正好记录下来,方便给需要用到此功能的开发者多一些思路,再次感谢卖香蕉的大叔给出的意见.
结尾
在项目中使用了MJExtension字典转模型,和masonry屏幕适配.
至此就大概实现了列表联动的效果,可以实现的方法有很多,在这里只是提出一个思路,让开发者能够少走一些弯路.
另附本文gitHub地址 ,喜欢的给个星星哦.非常感谢..