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

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

概述

一般的页面分类展现,都相似于今日头条等新闻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的分类切换效果,且支持自己设置扩展。强烈推荐阅读!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS:高仿腾讯视频、支付宝垂直滚动切换分类视图

发表回复