CollectionView水平滚动

作者: 噬尾蛇 | 来源:发表于2017-08-08 18:42 被阅读641次

    目的:为了实现CollectionView能够水平滚动并且每次只滚到下一个item上

    步骤

    创建一个CollectionView的视图

    //懒加载
    -(UICollectionView *)collection
    {
        if (!_collection) {
            CGFloat itemWidth = kScreenPortraitWidth - 56;
            CGFloat itemHeight= itemWidth / 318 * 170 + (251 - 170);
            UICollectionViewFlowLayout *layout = [[CollectionFlowLayout alloc]init];
            //滚动方向->水平
            layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
            //间距
            layout.minimumLineSpacing = 12;
            layout.minimumInteritemSpacing = 12;
            //每个item的size
            layout.itemSize = CGSizeMake(itemWidth, itemHeight);
            
            _collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 0, 0) collectionViewLayout:layout];
            _collection.delegate = self;
            _collection.dataSource = self;
            _collection.scrollsToTop = NO;//滚动到顶部->NO
            _collection.showsHorizontalScrollIndicator = NO;//显示水平滚动条->NO
            //滚动的时候快速衰弱
            _collection.decelerationRate = UIScrollViewDecelerationRateFast;
           //_collection.pagingEnabled = YES;//若是整页滚动,则使用
            [_collection registerClass:[BannerCollectionViewCell class] forCellWithReuseIdentifier:kCollectionCell];
        }
        return _collection;
    }
    

    delegate和dataSource方法

    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{}
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{}
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{}
    
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{}
    
    • 主要
    - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{    //将要停止前的坐标
        
        CGFloat velocityFloat = velocity.x;
        CGFloat screenFloat = self.bounds.size.width/2;
        CGFloat currentCenter = screenFloat-scrollView.contentOffset.x;//当前中心点偏移
        
        CGPoint currentPoint = [self convertPoint:self.collection.center toView:self.collection];
        NSIndexPath *idxPath = [self.collection indexPathForItemAtPoint:currentPoint];
        
        CGFloat collectionWidth = self.bounds.size.width - 16 - 29;
        CGFloat nextX = idxPath.row*collectionWidth;
        
        if (velocityFloat > 0 || velocityFloat < 0) {
            targetContentOffset->x = nextX;
            targetContentOffset->y = 0;
        }else{
            targetContentOffset->x = targetContentOffset->x;
            targetContentOffset->y = 0;
        }
    }
    

    Banner.gif

    如果是全屏的item则可以在初始化CollectionView的时候使用

    CollectionView.pagingEnabled = YES;
    

    相关文章

      网友评论

      • 陌上北辰:你 写的这个有demo吗,scrollViewWillEndDragging 这方法里的代码没弄明白,能给说说吗

      本文标题:CollectionView水平滚动

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