前言：
TableView和CollectionView是我们经常用的控件，搭建页面用的最多的是它们，令我们手无足措的也是它们，它们与我们之间充满了爱恨情仇。本篇文章，主要是讲的是它们之间协作，联动的功能。如果它们之间协调不好，有了矛盾，受伤总是我们。
效果图如下 GIF
效果图如下 静态图
基本分析
首先，我们通过页面，来分析一下。需求是这样的，左边一个TableView的分类列表，右边对应着分类CollectionView的内容，多个Item块。说白了也就是一个大项的分类，对应着N多个小项的分类，一对多的关系。
梳理功能点
- 1.默认左边TableView显示第一个分类，右边CollectionView显示第一个分类的内容。 - 2.点击左边TableView任意一个分类时，右边CollectionView滚动至当前分类所对应的内容。 - 3.滚动右边CollectionView分类内容时，左边列表TableView会实时滚动到右边内容所对应的分类标题。 - 4.当滚动右边CollectionView内容停下时，左边列表TableView会选中对应的CollectionView内容的标题。
构建数据结构
类型样式是这样的
NSArray *dataSource = @[ @{@"title":@"One1", @"list" :@[@"a",@"b",@"c"], @"imgs" :@[@"a_img",@"b_img",@"c_img"]}, @{@"title":@"One2", @"list" :@[@"a",@"b",@"c"], @"imgs" :@[@"a_img",@"b_img",@"c_img"]} @{@"title":@"One3", @"list" :@[@"a",@"b",@"c"], @"imgs" :@[@"a_img",@"b_img",@"c_img"]} ];
核心逻辑
001-默认选中
// 默认选中 NSIndexPath *firstPath = [NSIndexPath indexPathForRow:0 inSection:0]; [self.leftTableView selectRowAtIndexPath:firstPath animated:YES scrollPosition:UITableViewScrollPositionNone]; if ([self.leftTableView.delegate respondsToSelector:@selector(tableView:didSelectRowAtIndexPath:)]) { [self.leftTableView.delegate tableView:self.leftTableView didSelectRowAtIndexPath:firstPath]; } [self.rightCollectionView selectItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionNone]; if ([self.rightCollectionView.delegate respondsToSelector:@selector(collectionView:didSelectItemAtIndexPath:)]) { [self.rightCollectionView.delegate collectionView:self.rightCollectionView didSelectItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]]; }当进入页面时，默认选中状态是0组第0个。
002-点击左边列表控制右边collectionView
- (void)scrollToTopOfSection:(NSInteger)section animated:(BOOL)animated{ CGRect headerRect = [self frameForHeaderForSection:section]; // scrollview的contentview的顶点相对于scrollview的位置。 CGPoint topOfHeader = CGPointMake(0, headerRect.origin.y-self.rightCollectionView.contentInset.top); [self.rightCollectionView setContentOffset:topOfHeader animated:animated]; }当我们点击左边列表任意标题时，右边collectionViewe会将相应的内容滚动到页面顶部。其实，就是我们点击左边标题时，相应的改变collectionView的偏移量，使collectioVIew进行滚动。
-(CGRect)frameForHeaderForSection:(NSInteger)section{ NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:section]; // 返回每一个item的布局属性 UICollectionViewLayoutAttributes *attributes = [self.rightCollectionView layoutAttributesForItemAtIndexPath:indexPath]; CGRect frameForFirstCell = attributes.frame; // 求出第某组section数据HeaderView尺寸的高度 CGFloat headerHeight = [self collectionView:self.rightCollectionView layout:self.flowLayout referenceSizeForHeaderInSection:section].height; UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)self.rightCollectionView.collectionViewLayout; // 求出距离顶部的内边距 CGFloat cellTopEdge = flowLayout.sectionInset.top; /* 相对于源矩形原点（左上角的点）沿x轴和y轴偏移 */ return CGRectOffset(frameForFirstCell, 0, -headerHeight-cellTopEdge); }我们知道根据需求，collectionView是分组的。那我们怎么样，求出正确的偏移量呢？
我们点击某一标题时，我们知道了某一标题所对应的行数，是右边collectionView所对应的组数。我们点击标题时，可以求出右边collectionView某一组的偏移量返回，让collectionView向上滚动。由于有组头，用这个方法，CGRectOffset 我们还要计算，某一组的偏移量，距离某组左上角向上，偏移组头的高度。这样，我们就知道了collectionView的偏移量CGRectOffset(frameForFirstCell, 0, -headerHeight-cellTopEdge);是多少了，再加上collectionView顶部内边距，就准确了。
003- 滑动右边列表，控制左边标题的选中状态
当我们滚动右边内容时，我们要知道右边内容是否正在滑动，以及是否正在拖动。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { static float lastOffSetY = 0; if(self.rightCollectionView == scrollView) { self.isScrollDown = lastOffSetY < scrollView.contentOffset.y; lastOffSetY = scrollView.contentOffset.y; } }当cell出现时，我们向上移动，并且拖拽中，我们调取selectRowAtIndexPath方法控制左边列表中的选中的行数滚动到对应组数。cell将要出现时，及cell已经出现时调用。
-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{ if (!self.isScrollDown && collectionView.dragging) { [self selectRowAtIndexPath:indexPath.section]; } } -(void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{ if (self.isScrollDown && collectionView.dragging) { [self selectRowAtIndexPath:indexPath.section]; } } -(void)selectRowAtIndexPath:(NSInteger)index{ [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:index inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle]; }如有什么好的建议，可以互相交流促进，谢谢～
