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

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

推荐

分类控制器使用的是我写的:JXCategoryView star❤️已经1000+了,内置所有主流app的分类切换效果,且支持自定义扩展。强烈推荐阅读!

推荐阅读更多精彩内容