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

作者 : 开心源码本文共3492个字，预计阅读时间需要9分钟发布时间： 2022-05-12 共193人阅读

概述

一般的页面分类展现，都相似于今日头条等新闻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];    }}

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