几乎所有的互联网电子产品里面都会需要至少一个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
