循环滚动Banner ~ 2 View实现设计思想 + 代码分析

几乎所有的互联网电子产品里面都会需要至少一个Banner，它可能用来做商品展示，可能用来做节日促销，可能用来做项目推广。
iOS的Banner以几张首尾相连可以自由滚动的图片为主要风格。其中涉及到的控件无非是UIImageView+UITapGestureRecognizer / UIButton + UIPageControl或者使用CollectionItem组成。

常见的实现方法有以下几种：

1. 使用ScrollView

所有图片一次性加载，首尾分别额外添加一张占位图用来控制循环。
使用三个View复用，每次滚动后判断复用并重置View。
使用两个View复用，每次滚动时判断复用。

2. 使用CollectionView

没有用过，但是有听说使用这个实现的，其优点是系统实现了复用机制，点击的反馈也可以通过代理直接获取。

在自己开发的时候，我优先选择了UIScrollView，因为感觉UICollectionView是一个重量级的控件，没有必要为了几张图片的循环而使用。
所以ScrollView方案中的三种都做过尝试，并最终优化到使用两个View来复用。

通用部分：

1. NSTimer 用来控制自动滚动

- (void)startTimer {
    if (_timer == nil) {
        _timer = [NSTimer scheduledTimerWithTimeInterval:self.imageScrollTimeInterval target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];
        [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
    }
}
- (void)stopTimer {
    if ([_timer isValid]) {
        [_timer invalidate];
        _timer = nil;
    }
}

以NSRunLoopCommonModes模式添加到mainRunLoop中。

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [self stopTimer];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    [self startTimer];
}

还要在UIScrollViewDelegate中添加上面两句。
避免在手指拖动的时候NSTimer还在走。

2. UIPageControl

在Setter中设置numberOfPages。
在滚动过程中或者结束的合适时机设置currentPage。

首先说一下使用3个View的要点以及出现的问题。
思路：三张图，分别是前一张，当前图，后一张。
每次滚动后，重置这三张图。
比如图片顺序是A B C D E五张图
初始的三张图是 E A B，当向右滚动一张图后，重置三个View，结果变成了A B C。
使用了如下的3个Button

@property (nonatomic, weak) UIButton * preImageButton;
@property (nonatomic, weak) UIButton * currentImageButton;
@property (nonatomic, weak) UIButton * nextImageButton;

然后在scrollViewDidEndScrollingAnimation:代理中对滚动结果进行处理。

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
    
    int cosIndex = scrollView.contentOffset.x / scrollView.frame.size.width;
    
    if (cosIndex == 1) return;
    
    if (cosIndex > 1) {
        self.currentImageIndex = self.currentImageIndex + 1 == self.imageArray.count ? 0 : self.currentImageIndex + 1;
        self.pageControl.currentPage = self.pageControl.currentPage == self.pageControl.numberOfPages - 1 ? 0 : self.pageControl.currentPage + 1;
        
    } else {
        self.currentImageIndex = self.currentImageIndex - 1 < 0 ? self.imageArray.count - 1 : self.currentImageIndex - 1;
        self.pageControl.currentPage = self.pageControl.currentPage == 0 ? self.pageControl.numberOfPages - 1 : self.pageControl.currentPage - 1;
    }
    
    [self loadImageButtons];
}

一开始的时候是在scrollViewDidEndDecelerating:中做判断的，但是在Timer执行的滚动中并不会回调到这个代理。
主要的判断还是对当前Index的值，即正中间应该显示哪张图片做判断。
loadImageButtons方法就是重置并装载三个图。同时每次让ScrollView滚动到中间的位置，即校正当前图片的位置。

- (void)loadImageButtons {
    NSInteger preIndex = self.currentImageIndex == 0 ? self.imageArray.count - 1 : self.currentImageIndex - 1;
    NSInteger nextIndex = self.currentImageIndex == self.imageArray.count - 1 ? 0 : self.currentImageIndex + 1;
    [self.preImageButton setBackgroundImage:[UIImage imageNamed:self.imageArray[preIndex]] forState:UIControlStateNormal];
    [self.currentImageButton setBackgroundImage:[UIImage imageNamed:self.imageArray[self.currentImageIndex]] forState:UIControlStateNormal];
    [self.nextImageButton setBackgroundImage:[UIImage imageNamed:self.imageArray[nextIndex]] forState:UIControlStateNormal];
    [self.scrollView setContentOffset:CGPointMake(self.frame.size.width, 0)];
}

至此三张图实现滚动Banner就完成了。
下面说一下发现的问题：
因为在ScrollView初始化的时候ContentSize只设置了3个图片位置，而且对手动拖动图片位置的校正的判断是在scrollViewDidEndDecelerating:中进行的。所以当连续拖动，就是还没有减速到0就继续向下一张拖动的时候，因为没有重置图片会出现后面无图而是ScrollView的bounces弹性边界。

===============善良的分割线=====================

最近做了优化，使用两张图实现了Banner的循环滚动效果，并解决了上述遇到的问题。

// 滚动时显示的Image
@property (nonatomic, weak) UIImageView * reuseImageView;
// 静止时候显示的Image
@property (nonatomic, weak) UIImageView * displayImageView;

这次使用了Image + 手势的组合，一切都为了更轻量级。
其中DisplayImageView的作用是固定显示，每当Image处于非滚动状态的时候，这个View就负责显示图片。ReuseImageView的作用是在滚动的时候动态显示前一张或者后一张图片。它的位置取决于Banner滚动的方向。

CGRect frame = self.reuseImageView.frame;
NSInteger reuseIndex = self.currentImageIndex;
if (self.scrollType == ZBannerScrollTypeLeft) {
    frame.origin.x = 0;
    reuseIndex = [self formatIndexWithIndex:reuseIndex - 1];
} else {
    frame.origin.x = self.scrollView.frame.size.width * 2;
    reuseIndex = [self formatIndexWithIndex:reuseIndex + 1];
}

这里用一个枚举来判断当前滚动的状态和方向。
当向左滚动的时候，就将ReuseImageView的x坐标设置为0，右滚设置为两个Width的宽度。

图片的加载刷新判断也从滚动结束转移到滚动进行时，即scrollViewDidScroll:代理。因为这个代理会频繁调用，所以为避免多余处理，而加了几层if判断。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGFloat cosX = scrollView.contentOffset.x;
    // 当显示页面消失在屏幕时立刻更新Display Image
    if (![self isInScreen:self.displayImageView.frame]) {
        // 更新Current Index
        [self updateCurrentIndex];
        // 还原滚动方向
        self.scrollType = ZBannerScrollTypeStatic;
        // 更新Display Image
        [self loadDisplayImage];
        
        // 判断滚动方向
    } else if (cosX > self.frame.size.width) {
        // 右
        if (self.scrollType != ZBannerScrollTypeRight) {
            self.scrollType = ZBannerScrollTypeRight;
            [self loadReuseImage];
        }
    } else {
        // 左
        if (self.scrollType != ZBannerScrollTypeLeft) {
            self.scrollType = ZBannerScrollTypeLeft;
            [self loadReuseImage];
        }
    }
}

这里的优点就是只要DisplayImage不在屏幕中，就进行图片重置。而不是依赖ScrollView的动画结束代理来处理。这样就不会发生想上面发生的问题。

代码和Demo放在GitHub上了，需要点击下面链接~。
https://github.com/ChyoGT/ZBannerView

循环滚动Banner ~ 2 View实现 设计思想 + 代码分析