iOS 类似美团外卖 app 两个 tableView 联动效果实现
Posted Ven519
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iOS 类似美团外卖 app 两个 tableView 联动效果实现相关的知识，希望对你有一定的参考价值。
写在前面
首先声明哈，不是广告，我就是用的时候觉得这个功能比较好玩，就想着实现了一下。效果如图：
接下来简单的说一下思路吧~
大体思路
可能我们看到这种功能的实现的时候，首先想着的是我在这个控制器中左右各放一个tableView，然后进行关联。我是用了另一个思路，具体如下：
我建了两个类LGJCategoryVC用来盛放左边写着第几类的tableView和LGJProductsVC用来盛放右边写在各种产品的tableView。然后将LGJProductsVC作为LGJCategoryVC的childViewController，将LGJProductsVC的viewaddSubView到LGJCategoryVC的view上。
代码实现如下：
-(void)createProductsVC
_productsVC = [[LGJProductsVCalloc] init];
_productsVC.delegate = self;
[self addChildViewController:_productsVC];
[self.view addSubview:_productsVC.view];
这样做有什么好处呢？简单的说就是将tableView分离，各自使用一个congtroller，这样做使每个控制器管理自己的tableView里面的事件，可以更好的分离代码，降低两个tableView之间的耦合度，同时也避免了把两个 tableView放在一个controller里造成一个controller代码的冗余，这样使逻辑更清晰。
接下来说一下我们点击左边tableView的cell的时候怎样使右边的tableView跟着滑动。我在LGJCategoryVC也就是左边tableView的这个代理方法中didSelectRowAtIndexPath做了些操作：
-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath
if(_productsVC)
[_productsVC scrollToSelectedIndexPath:indexPath];
其中这个scrollToSelectedIndexPath方法是在_productsVC中声明的。这个方法就是具体调动右边tableView滑动的。
#pragma mark - 一级tableView滚动时 实现当前类tableView的联动
-(void)scrollToSelectedIndexPath:(NSIndexPath*)indexPath
[self.productsTableView selectRowAtIndexPath:([NSIndexPath indexPathForRow:0 inSection:indexPath.row]) animated:YES scrollPosition:UITableViewScrollPositionTop];
我们需要的只是让右边tableView的sectionHeaderView跟随左边的点击cell移动到最上部就可以了，所以在这里我们设置selectRowAtIndexPath:([NSIndexPath indexPathForRow:0 inSection:indexPath.row])
接下来就是当我们滑动右边tableView的时候左边的tableView的cell跟随滑动。这里我们在LGJProductsVC类中声明了一个协议。
@protocolProductsDelegate<NSObject>
-(void)willDisplayHeaderView:(NSInteger)section;
-(void)didEndDisplayingHeaderView:(NSInteger)section;
@end
同时声明两个变量，这两个变量非常有用。
@property(nonatomic,assign)BOOLisScrollUp;//是否是向上滚动
@property(nonatomic,assign)CGFloatlastOffsetY;//滚动即将结束时scrollView的偏移量
具体作用就在这里了：
#pragma mark - scrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView*)scrollView
以上是关于iOS 类似美团外卖 app 两个 tableView 联动效果实现的主要内容，如果未能解决你的问题，请参考以下文章