iOS:高仿腾讯视频、支付宝垂直滚动切换分类视图

概述

一般的页面分类展示，都类似于今日头条等新闻app那样，顶部一个分类控制器，内容列表支持左右滑动切换。
但是对于每个类别内容比较少，分类比较多的情况，用户想要查看全部，就要经历多次左右滑动切换，效率很低。腾讯视频分类编辑、支付宝首页应用编辑、电商APP热门商品分类等应用场景就是这样子的。

Github地址

下载源码，一睹为快！

效果预览

VerticalList.gif

(背景色异常是录屏软件的bug)

实现思路

理论上来说该效果也可以用UITableView来实现，但是会更加繁琐，所以本示例就用UICollectionView实现。

悬浮的header处理

第一个要处理的就是悬浮的分类选择控制器视图。

思路一： 使用iOS9才有的sectionHeadersPinToVisibleBounds
- 问题1：版本兼容问题，低版本没有效果；
- 问题2：所有的sectionHeader都会悬浮，达不到指定的sectionHeaderView悬浮；
思路二： 自定义布局
- 自定义sectionHeader的UICollectionViewLayoutAttributes。详情参考:这篇文章
- 问题：只允许一个section；

以上两种方案，均不能达到目标效果，最后我采用了控制悬浮分类选择控制器视图的布局来实现；

最终方案： 控制悬浮分类选择控制器视图的布局
- 全局只有一个分类选择控制器视图的实例；
- 初始化的时候，被加上到指定的sectionHeader上；
- 1:当列表滚动时，指定的sectionHeader滚动到屏幕上的外面，就将分类选择控制器视图添加到self.view上面，达到悬浮在顶部的效果；
- 2:当列表滚动时，指定的sectionHeader滚动到屏幕里面，就将分类选择控制器视图添加到sectionHeader上面，达到跟着页面内容走的效果；
  代码示意：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//获取想到悬浮header的布局信息
    UICollectionViewLayoutAttributes *attri = self.sectionHeaderAttributes[VerticalListPinSectionIndex];
    if (scrollView.contentOffset.y >= attri.frame.origin.y) {
        //当滚动的contentOffset.y大于了指定sectionHeader的y值，且还没有被添加到self.view上的时候，就需要切换superView
        if (self.pinCategoryView.superview != self.view) {
            [self.view addSubview:self.pinCategoryView];
        }
    }else if (self.pinCategoryView.superview != self.sectionCategoryHeaderView) {
        //当滚动的contentOffset.y小于了指定sectionHeader的y值，且还没有被添加到sectionCategoryHeaderView上的时候，就需要切换superView
        [self.sectionCategoryHeaderView addSubview:self.pinCategoryView];
    }
}

滚动列表处理分类控制器视图切换

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (!(scrollView.isTracking || scrollView.isDecelerating)) {
        //不是用户滚动的，比如setContentOffset等方法，引起的滚动不需要处理。
        return;
    }
    //用户滚动的才处理
    //获取categoryView下面一点的所有布局信息，用于知道，当前最上方是显示的哪个section
    CGRect topRect = CGRectMake(0, scrollView.contentOffset.y + VerticalListCategoryViewHeight + 1, self.view.bounds.size.width, 1);
    UICollectionViewLayoutAttributes *topAttributes = [self.collectionView.collectionViewLayout layoutAttributesForElementsInRect:topRect].firstObject;
    NSUInteger topSection = topAttributes.indexPath.section;
    if (topAttributes != nil && topSection >= VerticalListPinSectionIndex) {
        if (self.pinCategoryView.selectedIndex != topSection - VerticalListPinSectionIndex) {
            //不相同才切换
            [self.pinCategoryView selectItemWithIndex:topSection - VerticalListPinSectionIndex];
        }
    }
}

点击分类控制器视图的滚动处理

获取到所有sectionHeader的布局信息：

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    if (self.sectionHeaderAttributes == nil) {
        //获取到所有的sectionHeaderAtrributes，用于后续的点击，滚动到指定contentOffset.y使用
        NSMutableArray *attributes = [NSMutableArray array];
        UICollectionViewLayoutAttributes *lastHeaderAttri = nil;
        for (int i = 0; i < self.headerTitles.count; i++) {
            UICollectionViewLayoutAttributes *attri = [self.collectionView.collectionViewLayout layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:0 inSection:i]];
            [attributes addObject:attri];
            if (i == self.headerTitles.count - 1) {
                lastHeaderAttri = attri;
            }
        }
        self.sectionHeaderAttributes = attributes;
    }
}

处理点击滚动

- (void)categoryView:(JXCategoryBaseView *)categoryView didClickSelectedItemAtIndex:(NSInteger)index {
    //这里关心点击选中的回调！！！
    UICollectionViewLayoutAttributes *targetAttri = self.sectionHeaderAttributes[index + VerticalListPinSectionIndex];
    if (index == 0) {
        //选中了第一个，特殊处理一下，滚动到sectionHeaer的最上面
        [self.collectionView setContentOffset:CGPointMake(0, targetAttri.frame.origin.y) animated:YES];
    }else {
        //不是第一个，需要滚动到categoryView下面
        [self.collectionView setContentOffset:CGPointMake(0, targetAttri.frame.origin.y - VerticalListCategoryViewHeight) animated:YES];
    }
}

至此，垂直滚动切换分类效果就已经实现了。