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或者发邮箱