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

時間 2019-11-08

標籤 gkcyclescrollview 一個輕量級自定義組件简体版

原文原文鏈接

前言

最近開發遇到要實現卡片式的輪播，通過網上搜索資料查找發現NewPagedFlowView寫的不錯，但在使用過程當中發現有很多問題，因而本身仿照着封裝了一個，並且實現了更多的效果，下面具體說說git

主要功能

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

實現

GKCycleScrollView是基於UIScrollView實現的，經過添加可自定義的GKCycleScrollViewCell來實現分頁，經過設置上下左右間距來實現左右縮放，經過形如UITableView似的設置數據源和代理來實現數據的展現。下面看下主要代碼github

一、根據當前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];
    }
}
複製代碼

二、更新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;
        }
    }
}
複製代碼

三、cell的點擊處理

因爲UIScrollView不是佔滿全屏，因此cell有可能超過UIScrollView讓用戶看見，可是卻沒法點擊，經過下面的處理可讓超過UIScrollView的cell也能夠點擊bash

// 從新此方法是爲了解決當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;
}
複製代碼