美文网首页iOS UI
iOS 垂直滚动切换分类视图

iOS 垂直滚动切换分类视图

作者: qinghan | 来源:发表于2020-04-02 19:09 被阅读0次

    概述

    一般页面分类的展示都是类似新闻类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地址

    相关文章

      网友评论

        本文标题:iOS 垂直滚动切换分类视图

        本文链接:https://www.haomeiwen.com/subject/bccfphtx.html