iOS UI

iOS 垂直滚动切换分类视图

2020-04-02  本文已影响0人  qinghan

概述

一般页面分类的展示都是类似新闻类app左右切换的效果,顶部一个分类控制器,内容列表支持左右切换。但是有的时候分类很多,但是内容相对较少的时候,就可以使用垂直滚动的方式来切换分类。

实现思路

下面以UICollectionView为例,但我们采用UICollectionViewFlowLayout自定义布局的时候,可以记录所有cell的UICollectionViewLayoutAttributes,这样就能知道每个section的位置。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    

    if (!(scrollView.isTracking || scrollView.isDecelerating)) {
        //不是用户滚动的,比如setContentOffset等方法,引起的滚动不需要处理。
        return;
    }
    //直接使用不是很准确,需要排序
    NSArray* visibleCellIndex = self.aCollectionView.indexPathsForVisibleItems;

    NSArray *sortedIndexPaths = [[self.aCollectionView indexPathsForVisibleItems] sortedArrayUsingSelector:@selector(compare:)];

    NSIndexPath* indexPath = [sortedIndexPaths firstObject];

//    NSArray *indexPaths = [self.aCollectionView indexPathsForVisibleItems];
//    NSIndexPath *indexPath = indexPaths.firstObject;
    NSUInteger topSection = indexPath.section;


    if (indexPath != nil && topSection >= 0) {

        [self.pageTitleView setPageTitleViewWithProgress:1 originalIndex:self.pageTitleView.selectedIndex targetIndex:topSection];
    }
}

在collectionView的可视范围内找到第几个section,然后设置pagetitle的位置

//这里关心点击选中的回调!!!
   UICollectionViewLayoutAttributes *targetAttri = self.flowLayout.headerAttributes[selectedIndex];
    if (selectedIndex == 0) {
        //选中了第一个,特殊处理一下,滚动到sectionHeaer的最上面
        [self.aCollectionView setContentOffset:CGPointMake(0, 0) animated:YES];
    }else {
        //不是第一个,需要滚动到categoryView下面
        [self.aCollectionView setContentOffset:CGPointMake(0, targetAttri.frame.origin.y) animated:YES];
    }

通过自定义的flowout数组找到,section的位置布局

下面提供Demo地址

上一篇下一篇

猜你喜欢

热点阅读