美文网首页
iOS 仿AppStore轮播图

iOS 仿AppStore轮播图

作者: 奔跑吧小蚂蚁 | 来源:发表于2017-12-14 18:36 被阅读430次


    效果图

    我只喜欢直接上代码

    一:首先我们自定义一个UICollectionViewFlowLayout

    具体实现方法如下:

    1.初始化方法:

    - (id)init{

    if (self = [super init]) {}return self;}

    2.初始化布局方法,设计需要的大小布局等

    - (void)prepareLayout {

    [super prepareLayout];

    self.itemSize = CGSizeMake(Screen_Width-40, 350);

    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    self.minimumLineSpacing = 10;

    self.sectionInset = UIEdgeInsetsMake(0, 20, 0, 20);

    }

    3.允许自定义UICollectionViewFlowLayout代理方法

    -(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    return YES;

    }

    4.根据cell的系统默认期望位置计算你想要的cell的位置即目标位置,最为重要的方法

    - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{

    //获取UICollectionView停止的时候的可视范围

    CGRect contentFrame;

    contentFrame.size = self.collectionView.frame.size;

    contentFrame.origin = proposedContentOffset;

    NSArray *array = [self layoutAttributesForElementsInRect:contentFrame];

    // 计算在可视范围的距离中心线最近的Item ABC()为系统取绝对值的函数

    CGFloat minCenterX = CGFLOAT_MAX;

    CGFloat collectionViewCenterX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;

    for (UICollectionViewLayoutAttributes *attrs in array) {

    if(ABS(attrs.center.x - collectionViewCenterX) < ABS(minCenterX)){

    minCenterX = attrs.center.x - collectionViewCenterX;

    }

    }

    //补回ContentOffset,则正好将Item居中显示

    return CGPointMake(proposedContentOffset.x + minCenterX, proposedContentOffset.y);

    }

    到此处自定义UICollectionViewFlowLayout就完成了。

    二:滑动居中操作时需要我们对collectionView一些属性进行一些简单的操作 如下:

    1._collectionView = [[UICollectionView alloc]initWithFrame:self.bounds collectionViewLayout:[[ZFCategoryAdvertFlowLayout alloc]init]];collectionView初始化方法,ZFCategoryAdvertFlowLayout 也就是我们上边自己自定义的UICollectionViewFlowLayout

    2._collectionView.pagingEnabled = NO;关闭collectionView的分页功能,因为打开分页后collectionView滑动分页即collectionView宽度,不能满足我们的需求

    3._collectionView.decelerationRate = 1-0.0076;collectionView滑动速度的调整.

    到此处collectionView滑动居中的核心内容也就完成了,collectionViewcell的大小可以自己自行调整,滑动居中效果类似的于AppStore的轮播图效果。

    相关文章

      网友评论

          本文标题:iOS 仿AppStore轮播图

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