有間隙卡片縮放/無縫CollectionViewBanner無限輪播圖

出神入化發表於2018-06-28
View

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)%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或者發郵箱

相關文章