GKCycleScrollView - 一個輕量級的自定義輪播圖元件

QuintGao發表於2019-09-30

前言

最近開發遇到要實現卡片式的輪播，經過網上搜尋資料查詢發現NewPagedFlowView寫的不錯，但在使用過程中發現有不少問題，於是自己仿照著封裝了一個，而且實現了更多的效果，下面具體說說

主要功能

無第三方侵入，輕量級元件
支援自動輪播，無限輪播
支援cell縮放，設定上下左右間距
支援自定義當前cell的顯示尺寸
支援自定義cell，自定義pageControl
支援cell透明度漸變
支援Masonry、SDAutolayout等第三方自動佈局庫

實現

GKCycleScrollView是基於UIScrollView實現的，通過新增可自定義的GKCycleScrollViewCell來實現分頁，通過設定上下左右間距來實現左右縮放，通過形如UITableView似的設定資料來源和代理來實現資料的展示。下面看下主要程式碼

1、根據當前contentOffset設定cell

- (void)setupCellsWithContentOffset:(CGPoint)offset {
    if (self.cellSize.width <= 0 || self.cellSize.height <= 0) return;
    //計算_visibleRange
    CGPoint startPoint = CGPointMake(offset.x - self.scrollView.frame.origin.x, offset.y - self.scrollView.frame.origin.y);
    CGPoint endPoint = CGPointMake(startPoint.x + self.bounds.size.width, startPoint.y + self.bounds.size.height);

    NSInteger startIndex = 0;
    for (NSInteger i = 0; i < self.visibleCells.count; i++) {
        if (self.cellSize.width * (i + 1) > startPoint.x) {
            startIndex = i;
            break;
        }
    }
            
    NSInteger endIndex = startIndex;
    for (NSInteger i = startIndex; i < self.visibleCells.count; i++) {
        //如果都不超過則取最後一個
        if ((self.cellSize.width * (i + 1) < endPoint.x && self.cellSize.width * (i + 2) >= endPoint.x) || i + 2 == self.visibleCells.count) {
            endIndex = i + 1;               
            break;
        }
    }
            
    // 可見頁分別向前向後擴充套件一個，提高效率
    startIndex = MAX(startIndex - 1, 0);
    endIndex = MIN(endIndex + 1, self.visibleCells.count - 1);
    self.visibleRange = NSMakeRange(startIndex, endIndex - startIndex + 1);
            
    for (NSInteger i = startIndex; i <= endIndex; i++) {
        [self addCellAtIndex:i];
    }
            
    for (NSInteger i = 0; i < startIndex; i ++) {
         [self removeCellAtIndex:i];
    }
            
    for (NSInteger i = endIndex + 1; i < self.visibleCells.count; i ++) {
        [self removeCellAtIndex:i];
    }
}
複製程式碼

2、更新cell的顯示外觀

- (void)updateVisibleCellAppearance {
   if (self.cellSize.width <= 0 || self.cellSize.height <= 0) return;
   CGFloat offsetX = self.scrollView.contentOffset.x;
   for (NSInteger i = self.visibleRange.location; i < NSMaxRange(self.visibleRange); i++) {
       GKCycleScrollViewCell *cell = self.visibleCells[i];
       CGFloat originX = cell.frame.origin.x;
       CGFloat delta = fabs(originX - offsetX);
               
       CGRect originCellFrame = (CGRect){{self.cellSize.width * i, 0}, self.cellSize};
               
       CGFloat leftRightInset = 0;
       CGFloat topBottomInset = 0;
       CGFloat alpha = 0;
               
       if (delta < self.cellSize.width) {
           alpha = (delta / self.cellSize.width) * self.minimumCellAlpha;
                   
           CGFloat adjustLeftRightMargin = self.leftRightMargin == 0 ? 0 : self.leftRightMargin + 2;
           CGFloat adjustTopBottomMargin = self.topBottomMargin == 0 ? 0 : self.topBottomMargin + 2;
                   
           leftRightInset = ceilf(adjustLeftRightMargin * delta / self.cellSize.width);
           topBottomInset = ceilf(adjustTopBottomMargin * delta / self.cellSize.width);
                   
           NSInteger index = i % self.realCount;
           if (index == self.currentSelectIndex) {
               [self.scrollView bringSubviewToFront:cell];
           }
       } else {
           alpha = self.minimumCellAlpha;
                   
           leftRightInset = self.leftRightMargin;
           topBottomInset = self.topBottomMargin;
                   
           [self.scrollView sendSubviewToBack:cell];
       }
               
       if (self.leftRightMargin == 0 && self.topBottomMargin == 0) {
           cell.frame = originCellFrame;
       }else {
           CGFloat scaleX = (self.cellSize.width - leftRightInset * 2) / self.cellSize.width;
           CGFloat scaleY = (self.cellSize.height - topBottomInset * 2) / self.cellSize.height;
           UIEdgeInsets insets = UIEdgeInsetsMake(topBottomInset, leftRightInset, topBottomInset, leftRightInset);
                   
           cell.layer.transform = CATransform3DMakeScale(scaleX, scaleY, 1.0);
           cell.frame = UIEdgeInsetsInsetRect(originCellFrame, insets);
       }
               
       // 透明度漸變
       if (self.isChangeAlpha) {
           cell.coverView.alpha = alpha;
        }
    }
}
複製程式碼

3、cell的點選處理

由於UIScrollView不是佔滿全屏，所以cell有可能超過UIScrollView讓使用者看見，但是卻無法點選，通過下面的處理可以讓超過UIScrollView的cell也可以點選

// 重新此方法是為了解決當cell超出UIScrollView時不能點選的問題
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if ([self pointInside:point withEvent:event]) {
        // 判斷點選的點是否在cell上
        for (UIView *cell in self.scrollView.subviews) {
            // 將cell的frame轉換到當前檢視上
            CGRect convertFrame = CGRectZero;
            convertFrame.size = cell.frame.size;
            
            if (self.direction == GKCycleScrollViewScrollDirectionHorizontal) {
                convertFrame.origin.x = cell.frame.origin.x + self.scrollView.frame.origin.x - self.scrollView.contentOffset.x;
                convertFrame.origin.y = 0;
            }else {
                convertFrame.origin.x = 0;
                convertFrame.origin.y = cell.frame.origin.y + self.scrollView.frame.origin.y - self.scrollView.contentOffset.y;
            }

            // 判斷點選的點是否在cell上
            if (CGRectContainsPoint(convertFrame, point)) {
                return cell;
            }
        }
        // 判斷點選的點是否在UIScrollView上
        CGPoint newPoint = CGPointZero;
        newPoint.x = point.x - self.scrollView.frame.origin.x + self.scrollView.contentOffset.x;
        newPoint.y = point.y - self.scrollView.frame.origin.y + self.scrollView.contentOffset.y;
        if ([self.scrollView pointInside:newPoint withEvent:event]) {
            return [self.scrollView hitTest:newPoint withEvent:event];
        }
        
        // 系統處理
        return [super hitTest:point withEvent:event];
    }
    return nil;
}
複製程式碼