GKCycleScrollView - 一个轻量级的自定义轮播图组件

前言

最近开发遇到要实现卡片式的轮播，经过网上搜索资料查找发现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;
}

上面是主要的代码，如果想要查看更加详细的代码及功能，可以在github下载源代码查看。

效果图

说明	效果图
横向轮播	横向
纵向轮播	纵向
卡片效果	卡片
仿QQ聊天	QQ

最后

上面就是本篇的全部内容，想要查看源码的可以到github查看，地址在GKCycleScrollView，如果您觉得不错，还请点个star，你的支持是我最大的动力。

赞赏

您的赞赏是对我最大的支持

微信赞赏	支付宝赞赏