有间隙卡片缩放/无缝CollectionViewBanner无限轮播图

Demo地址(支持cocopods)

博客传送门

为什么重复造轮子?

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

原理分析

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)%100 <= 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.subviews.count; i++) {
        UIView *view = self.subviews[i];
        if (i == self.currentPage) {//当前page
            view.frame = CGRectMake(originX+ i*(PageW+PageLine), view.frame.origin.y, CurrentW, CurrentH);
        } else if (i > 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或者发邮箱