博客> 有间隙卡片缩放/无缝CollectionViewBanner无限轮播图
有间隙卡片缩放/无缝CollectionViewBanner无限轮播图
2019-05-20 19:15 评论:0 阅读:247 出神入化
无限轮播Banner 卡片缩放 间隙轮播Banner 无缝轮播Banner

Demo地址(支持cocopods)

博客传送门

为什么重复造轮子?

因为大多数banner都是无缝滚动,有卡片缩放效果的又没有PageControl,且PageControl样式不支持自定义,所以根据自己项目需求和UI需求,造了一个轮子,希望分享出来能对大家有帮助,好用的话点个星

gif介绍

原理分析

UICollectionView无限轮播,网上有很多demo是利用数组复制100份,甚至1000份,利用cell复用机制,达到"无限轮播"的效果.
这种方案太简单粗暴,当然很实用.我是用另一种方案做的
  • 无限轮播原理

    • 无缝轮播图

    原理很简单,比如有一个数组@[@"1",@"2",@"3"],无缝轮播就是在数组首元素插入尾元素的拷贝,尾元素加上首元素的拷贝,即@[@"3,"@"1",@"2",@"3",@"1"];这样的话刚赋值,当前位置的数组下标是1,也就是@"1",向左滚动,当滚动到下标4即@"1"的时候,让其collectionView.contentOffset.x无动画的回到下标1即@"1"上(界面无感知);同理,向右滚动,滚动到下标0即@"3"的时候,回到下标3即@"3";

    • 有间隙且放大效果轮播图 同上,只不过由于放大效果,能看到左右两个cell露出的边,所以变成了@[@"2",@"3,"@"1",@"2",@"3",@"1",@"2"];向左滚动,下标5即@"1"变成下标2即@"1";向右滚动,下标1即@"3"变成下标4即@"3"

    然后剩下的就是偏移量的计算了,贴核心代码

    
     #pragma mark UIScrollViewDelegate
     - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
    [self scrollViewBorderJudge];
    }
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
    if ([self scrollViewBorderJudge]) {
        [self handCellSeleceLocation];
    }
    }
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
    {
    if (self.autoScroll) {
        [self invalidateTimer];
    }
    }
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
    {
    if (!decelerate) {//不减速
        if ([self scrollViewBorderJudge]) {
            [self handCellSeleceLocation];
        }
    }
    if (self.autoScroll) {
        [self createTimer];
    }
    }
    #pragma mark 边界以及cell位置处理
    //处理边界条件 返回YES代表未触发边界条件,且满足_dataImgs.count > 0
    - (BOOL)scrollViewBorderJudge
    {
    if (_dataImgs.count > 0) {
        if (_collectionView.contentOffset.x <= BannerOffsetWidth*1-BannerOffsetleft) {//左侧边界(正数第二个)->倒数第三个
            _collectionView.contentOffset = CGPointMake(BannerOffsetWidth*(_dataImgs.count-3)-BannerOffsetleft, 0);
            _selectedIndex = _dataImgs.count-5;
            _pageControl.currentPage = _selectedIndex;
            return NO;
        } else if (_collectionView.contentOffset.x >= BannerOffsetWidth*(_dataImgs.count-2)-BannerOffsetleft) {//右侧边界(倒数第二个)->正数第三个
            _collectionView.contentOffset = CGPointMake(BannerOffsetWidth*2-BannerOffsetleft, 0);
            _selectedIndex = 0;
            _pageControl.currentPage = _selectedIndex;
            return NO;
        }
        return YES;
    }
    return NO;
    }
    //滚动停止确保cell在中间
    - (void)handCellSeleceLocation
    {
    CGFloat OffsetIndex = (_collectionView.contentOffset.x+_line+_showLine)/BannerOffsetWidth;
    NSInteger index = (NSInteger)((_collectionView.contentOffset.x+_line+_showLine)/BannerOffsetWidth);
    if ((NSInteger)(OffsetIndex*100)0  <= 50) {
           [_collectionView setContentOffset:CGPointMake(BannerOffsetWidth*index-BannerOffsetleft, 0.0) animated:YES];
           _selectedIndex = index-2;
    } else {
        [_collectionView setContentOffset:CGPointMake(BannerOffsetWidth*(index+1)-BannerOffsetleft, 0.0) animated:YES];
        _selectedIndex = index-1;
    }
    _pageControl.currentPage = _selectedIndex;
    }
    
  • Cell卡片放大效果

    继承UICollectionViewFlowLayout,重写layoutAttributesForElementsInRect:方法,根据偏移量计算,执行3D旋转动画;

    
    //允许更新位置, 这个如果不写,一个循环内卡片越来越小,最后等循环结束开始下个循环时,cell重置大小
    - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)oldBounds
    {
     return YES;
    }
    - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
    {
     NSArray* array = [super layoutAttributesForElementsInRect:rect];
     CGRect visibleRect;
     visibleRect.origin = self.collectionView.contentOffset;
     visibleRect.size = self.collectionView.bounds.size;
     [array enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
         UICollectionViewLayoutAttributes* attributes = (UICollectionViewLayoutAttributes *)obj;
         CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
         CGFloat normalizedDistance = ABS(distance/BannerOffsetWidth);
         CGFloat zoom = 1 - ZoomFactor*normalizedDistance;
         attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0);
         attributes.zIndex = 1;
     }];
     return array;
    }
    
    • 自定义pageControl

    继承UIPageControl,重写layoutSubviews方法,自己计算圆点之间间距,圆点尺寸,切圆角;如果喜欢的话,也可以做成自定义图片

- (void)layoutSubviews
{
    [super layoutSubviews];

    self.userInteractionEnabled = NO;

    CGFloat allW = (self.subviews.count - 1)*(PageW+PageLine)+CurrentW;
    CGFloat originX = self.frame.size.width/2-allW/2;
    for (int i = 0; i < self xss=removed xss=removed xss=removed> self.currentPage) {
                view.frame = CGRectMake(originX+ i * (PageW+PageLine)+(CurrentW-PageW), view.frame.origin.y, PageW, PageH);
        } else {
                view.frame = CGRectMake(originX+ i * (PageW+PageLine), view.frame.origin.y, PageW, PageH);
        }

        view.layer.cornerRadius = 1;
        view.layer.masksToBounds = YES;
    }
}

结语

  • 有用的话,希望大家点个赞再走;
  • 有bug或者其他问题,也希望能issues或者发邮箱
收藏
0
sina weixin mail 回到顶部