概述
一般的页面分类展示，都类似于今日头条等新闻app那样，顶部一个分类控制器，内容列表支持左右滑动切换。
但是对于每个类别内容比较少，分类比较多的情况，用户想要查看全部，就要经历多次左右滑动切换，效率很低。腾讯视频分类编辑、支付宝首页应用编辑、电商APP热门商品分类等应用场景就是这样子的。
Github地址
效果预览
VerticalList.gif
(背景色异常是录屏软件的bug)
实现思路
理论上来说该效果也可以用UITableView来实现，但是会更加繁琐，所以本示例就用UICollectionView实现。
悬浮的header处理
第一个要处理的就是悬浮的分类选择控制器视图。
-
思路一： 使用iOS9才有的
sectionHeadersPinToVisibleBounds- 问题1：版本兼容问题，低版本没有效果；
- 问题2：所有的sectionHeader都会悬浮，达不到指定的sectionHeaderView悬浮；
-
思路二： 自定义布局
- 自定义sectionHeader的
UICollectionViewLayoutAttributes。详情参考:这篇文章 - 问题：只允许一个section；
- 自定义sectionHeader的
以上两种方案，均不能达到目标效果，最后我采用了控制悬浮分类选择控制器视图的布局来实现；
-
最终方案： 控制悬浮分类选择控制器视图的布局
- 全局只有一个分类选择控制器视图的实例；
- 初始化的时候，被加上到指定的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的分类切换效果，且支持自定义扩展。强烈推荐阅读！
