iOS - TableView和CollectionView联动

前言：

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

  }

如有什么好的建议，可以互相交流促进，谢谢～

转载于:https://www.jianshu.com/p/8f4bae3022a7

iOS - TableView和CollectionView联动

猜你喜欢