写在前面： 一、关于无限轮播的思路 无非就是以下几种：collectionView实现、N+2个imageView实现、三个imageView实现，两个imageView实现。 这其中collectionView感觉有点偷懒的意思，N+2和3个imageView相比起来3个imageView更节省资源，两个imageView还没有了解过，这里不做介绍。
二、关于借鉴 楼主自己在写轮播的时候查了很多资料，有很多好用的第三方库，但是感觉这个简单的功能还是自己做好一点，后期维护也方便点，下面也会将参考的文章链接贴出来。 以下的文章中有一些有坑的地方，我主要参考了一些结构和命名。 参考文章：http://www.jianshu.com/p/1325998d976b?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq
三、个人实现原理： 一个UIView中包含两个子视图：UIScrollView和UIPageControl。 最后将轮播图拿出去用的时候直接用这个UIView的对象就好。 Q1：为什么不直接将UIPageControl放在ScrollView中： A：如果将pageContro放在ScrollView中，那么小圆点会随着轮播图的滚动跟着滚动，并且需要添加在每张图上都添加一个pageControl，视觉效果不好，也很麻烦。如果不这样那么就需要动态计算设置pageControl的frame，我觉得相较于我采用的那种方法而言资源占用会更大。
四、关于坑的问题 这篇文章中，楼主暂时没有发现什么坑，但是有两点不确定的地方，这两点在实际使用中可能会有坑，希望大家注意，具体如下： 1、代码中用到了KVO，但是在移除KVO的时候是在相关view的dealloc移除的，不确定这个地方会不会有问题，如果有大神，希望可以指正。 2、代码中的NSTimer（定时器）本来我个人理想状态下应该是想在ViewWillAppera和viewDidDisappear中分别来启动和移除的，来防止循环引用，无法释放对象，但是却发现在View中根本没有调用这两个方法，只有在Controller中才调用这两方法，这点没查到答案。所以最后是在dealloc中移除的，不知道会不会留坑，所以这点需要大家注意。如果有大神，可以帮我解答一下，谢谢。
---------------------------------我是正文分割线------------------------------------------
思路（直接引用别人文章的，不多说了）： 既然是三张图片，那在实现的过程中，为了可以左右滑动，都有图片，所以初始化的时候，要让 UIScrollView 的偏移量为自身的宽度，而且不管是滑像上一张还是下一张，为了可以正常进行左右滑动，在滑动结束的时候，都要让 UIScrollView 的偏移量为自身的宽度，所以在 UIScrollView 滑动完一个图片之后，都要将 UIScrollView 的偏移量设置为自身宽度。
具体实现： 分别创建了两个文件： ZWCHeaderViewScrollView.h ZWCHeaderViewScrollView.m ZWCheaderView.h ZWCheaderView.m
首先ZWCHeaderViewScrollView.h中留给外部的接口：
//将当前小圆点的位置存起来
@property(nonatomic,assign)NSInteger currentPageInteger;
//定时器
@property(nonatomic,strong)NSTimer *rotateTimer;
//重写init方法
- (instancetype)initWithFrame:(CGRect)frame;
//公布一个对外的方法，传入图片的网络地址设置展示轮播图。
- (void)showWith:(NSArray *)imageViewUrlArray;
复制代码ZWCHeaderViewScrollView.m中需要先创建左中右三个imageView
//创建左中右三个imageView
@property(nonatomic,strong)UIImageView *leftImageView;
@property(nonatomic,strong)UIImageView *centerImageView;
@property(nonatomic,strong)UIImageView *rightImageView;
复制代码并且声明下面的属性：
//将传进来的imageView存起来
@property(nonatomic,strong)NSArray *imageArray;
//将传进来的frame存起来。
@property(nonatomic,assign)CGRect scrViewFrame;
复制代码对三个属性进行懒加载
#pragma mark --- 属性懒加载
-(UIImageView *)leftImageView{
if (_leftImageView == nil) {
_leftImageView = [[UIImageView alloc]init];
}
return _leftImageView;
}
-(UIImageView *)centerImageView{
if (_centerImageView == nil) {
_centerImageView = [[UIImageView alloc]init];
}
return _centerImageView;
}
-(UIImageView *)rightImageView{
if (_rightImageView == nil) {
_rightImageView = [[UIImageView alloc]init];
}
return _rightImageView;
}
复制代码然后大致理一下思路： 1、外界初始化一个ZWCHeaderViewScrollView对象 2、通过初始化的对象调用show方法并传入相应的图片网络地址 3、在m文件中，一单show方法被调用，则立即创建左中右三个视图并添加到ScrollView中。
根据上面的思路ZWCHeaderViewScrollView.m中有如下代码
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.scrViewFrame = frame;
self.contentSize = CGSizeMake(CGRectGetWidth(frame)*3, CGRectGetHeight(frame));
//这里一定要将偏移量设置为显示中间那张图。
self.contentOffset = CGPointMake(CGRectGetWidth(frame), CGRectGetMinY(frame));
self.delegate = self;
self.pagingEnabled = YES;
self.showsHorizontalScrollIndicator = NO;
//将当前显示图片设置为第一张
self.currentPageInteger = 0;
}
return self;
}
-(void)showWith:(NSArray *)imageViewUrlArray
{
self.imageArray = imageViewUrlArray;
//创建添加左中右三个视图
[self creaetLeftImageView];
[self createRightImageView];
[self createCenterImageView];
}
//左边视图
- (void)creaetLeftImageView{
NSInteger index = (self.currentPageInteger-1+self.imageArray.count)%self.imageArray.count;
self.leftImageView.frame =CGRectMake(0, 0, CGRectGetWidth(self.scrViewFrame), CGRectGetHeight(self.scrViewFrame));
[self.leftImageView sd_setImageWithURL:self.imageArray[index][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
self.leftImageView.contentMode = UIViewContentModeScaleAspectFill;
self.leftImageView.userInteractionEnabled = YES;
[self addSubview:self.leftImageView];
}
//中间视图
- (void)createCenterImageView{
self.centerImageView.frame = CGRectMake(CGRectGetWidth(self.scrViewFrame), 0, CGRectGetWidth(self.scrViewFrame), CGRectGetHeight(self.scrViewFrame));
[self.centerImageView sd_setImageWithURL:self.imageArray[self.currentPageInteger][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
self.centerImageView.contentMode = UIViewContentModeScaleAspectFill;
self.centerImageView.userInteractionEnabled = YES;
[self addSubview:self.centerImageView];
}
//右边视图
- (void)createRightImageView{
self.rightImageView.frame = CGRectMake(CGRectGetWidth(self.scrViewFrame)*2, 0, CGRectGetWidth(self.scrViewFrame), CGRectGetHeight(self.scrViewFrame));
NSInteger index = (self.currentPageInteger+1+self.imageArray.count)%self.imageArray.count;
[self.rightImageView sd_setImageWithURL:self.imageArray[index][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
self.rightImageView.contentMode = UIViewContentModeScaleAspectFill;
self.rightImageView.userInteractionEnabled = YES;
[self addSubview:self.rightImageView];
}
复制代码因为楼主所有用的都是网络图片，所以直接用了SDWebImage，如果大家用的本地图片，这里的数组直接传本地图片名就行了。 到这一步，添加了三张图，已经可以滚动了，但是只能左右各滚动一下。无法无限滚动，然后再理一下思路： 看一下图片
用户看到的永远是2这个画面，当用户往右滑动的时候看到了三，滑动完之后我们立刻将2这个位置的图片设置为3，将3这个位置的图片设置为4（假设一共5张图）将1这个位置的图片设置为2，然后立刻将ScrollView的contentOffSet再次移动回2这个位置，并且不用动画效果。因为这个动作太快，导致用户根本看不出这个变化的过程。误认为是在轮播。下面上代码： 思路：只要当用户一拖拽完屏幕，我们就需要判断，用户有没有翻页（当用户拖拽没有超过屏幕一半的距离的时候，ScrollView是不会翻页的），往左翻页还是往右翻页，并根据往左还是往右，来设置相应的图片来显示。
每次当ScrollView的滑动停止时就会调用一次下面这个方法（ScrollView的代理方法），以此来抓住用户一拖拽完就进行图片数据处理的时机。
//当滚动停止滚动时调用此方法。
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//因为如果未翻页成功，contentOffSet会回到原点，所以这里只需要对大于0小于0进行判断即可。
//获取滚动视图移动的距离。
CGFloat userDistance = self.contentOffset.x - CGRectGetWidth(self.scrViewFrame);
if (userDistance < 0 ) {
//往左翻页，将currentPage往上翻页
self.currentPageInteger = (self.currentPageInteger - 1 + self.imageArray.count)% self.imageArray.count;
[self resetContent];
}else if (userDistance > 0){
//往右翻页，将currentPage往下翻页
self.currentPageInteger = (self.currentPageInteger + 1 + self.imageArray.count)%self.imageArray.count;
[self resetContent];
}else{
//用户未翻页成功，什么都不做。
}
}
复制代码改变显示图片的数据后，马上调用重置数据方法：
#pragma mark ---- 用户翻页后重置数据
- (void)resetContent{
//重置偏移量
CGPoint offset = CGPointMake(CGRectGetWidth(self.scrViewFrame), 0);
[self setContentOffset:offset];
//重置图片
NSInteger leftIndex = (self.currentPageInteger-1+self.imageArray.count)%self.imageArray.count;
NSInteger centerIndex = self.currentPageInteger;
NSInteger rightIndex = (self.currentPageInteger+1+self.imageArray.count)%self.imageArray.count;
[self.leftImageView sd_setImageWithURL:self.imageArray[leftIndex][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
[self.centerImageView sd_setImageWithURL:self.imageArray[centerIndex][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
[self.rightImageView sd_setImageWithURL:self.imageArray[rightIndex][@"pic"] placeholderImage:[UIImage imageNamed:@"tempImage"]];
}
复制代码到这里，你的滚动视图已经可以无限轮播了。接下来要做的就是，添加定时器实现自动轮播。
关于定时器的一些基本知识不懂的可以看这里： www.cnblogs.com/zhang6332/p…
首先在init方法中启动定时器,就一行代码(下面贴的是init方法中加入了启动定时器后的代码，注意看注释都写的很清楚)
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.scrViewFrame = frame;
self.contentSize = CGSizeMake(CGRectGetWidth(frame)*3, CGRectGetHeight(frame));
//这里一定要将偏移量设置为显示中间那张图。
self.contentOffset = CGPointMake(CGRectGetWidth(frame), CGRectGetMinY(frame));
self.delegate = self;
self.pagingEnabled = YES;
self.showsHorizontalScrollIndicator = NO;
//将当前显示图片设置为第一张
self.currentPageInteger = 0;
//启动定时器
self.rotateTimer = [NSTimer scheduledTimerWithTimeInterval:4 target:self selector:@selector(aoutScroll) userInfo:nil repeats:YES];
}
return self;
}
复制代码启动定时器后调用的aoutScroll方法如下： 注意，当定时器自动翻页的时候需要用动画。
#pragma mark --- 定时器自动翻页方法
- (void)aoutScroll{
NSLog(@"定时器被调用------------------------");
//这里需要判断如果用户正在拖动屏幕或者视图正在滚动，是不可以自动翻页的，避免和用户的操作相冲突。
if (![self isDragging] || ![self isDecelerating]) {
//这里只对contentOffset进行设置，因为一旦设置了contentOffSet后代理就会自动调用- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView此方法，代码重用，会利用我们上面写好的逻辑帮我们处理剩下的东西。
[self setContentOffset:CGPointMake(CGRectGetWidth(self.scrViewFrame)*2, 0) animated:YES];
}
}
复制代码添加好定时器之后还需要考虑，如果用户正在拖动视图或者视图正在滚动，那么此时需要先暂停定时器，当用户的拖拽动作结束之后再开启定时器。防止和用户动作冲突。
#pragma mark --- ScrollView代理
//当调用contentoffset方法动画完毕时调用次方法
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
[self scrollViewDidEndDecelerating:self];
NSLog(@"调用方法contentoffset方法动画完毕时调用次方法+++++++++++");
}
//当用手指拖拽的时候调用次方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
NSLog(@"正在拖拽视图，所以需要将自动播放暂停掉");
//setFireDate：设置定时器在什么时间启动
//[NSDate distantFuture]:将来的某一时刻
[self.rotateTimer setFireDate:[NSDate distantFuture]];
}
复制代码当用户屏幕停止滚动后开启定时器。(注意看注释）
//当手指拖拽产生的滚动停止滚动时调用此方法。
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//视图静止之后，过4秒在开启定时器
NSLog(@"开启定时器");
[self.rotateTimer setFireDate:[NSDate dateWithTimeInterval:4 sinceDate:[NSDate date]]];
NSLog(@"scrollViewDidEndDecelerating------------%f",self.contentOffset.x);
//获取滚动视图移动的距离。
CGFloat userDistance = self.contentOffset.x - CGRectGetWidth(self.scrViewFrame);
if (userDistance < 0 ) {
//往左翻页，将currentPage往上翻页
self.currentPageInteger = (self.currentPageInteger - 1 + self.imageArray.count)% self.imageArray.count;
[self resetContent];
}else if (userDistance > 0){
//往右翻页，将currentPage往下翻页
self.currentPageInteger = (self.currentPageInteger + 1 + self.imageArray.count)%self.imageArray.count;
[self resetContent];
}else{
//用户未翻页成功，什么都不做。
}
}
复制代码到这里，已经可以无限自动滚动了。接下来需要添加pageControl
------------------------------------------我是分割线----------------- 新建 ZWCheaderView.h ZWCheaderView.m
同样在ZWCheaderView.h中公布两个相同的方法
- (instancetype)initWithFrame:(CGRect)frame;
- (void)showWith:(NSArray *)imageViewUrlArray;
复制代码在ZWCheaderView.m中声明两个属性
//滚动视图
@property(nonatomic,strong)ZWCHeaderViewScrollView *bannerScrView;
//小圆点控制器
@property(nonatomic,strong)UIPageControl *bannerpageControl;
复制代码bannerpageControl懒加载
-(UIPageControl *)bannerpageControl{
if (_bannerpageControl == nil) {
_bannerpageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.frame)-80, CGRectGetHeight(self.frame)-30, 40, 20)];
}
return _bannerpageControl;
}
复制代码整理一下思路： 需要设置一个KVO 当ScrollView的currentPage变化时说明滚动视图翻页了，那么用kvo设置小圆点到相应的位置。
下面的代码我想小白都应该看得懂了。 主要思路就是： 1、将滚动视图添加到这个View中 2、将pageControl添加到这个视图中 3、通过KVO来监控滚动视图的翻页状况，并同步设置小圆点的位置。 4、消除KVO，消除定时器。
重写init方法,并设置一些属性
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.bannerScrView = [[ZWCHeaderViewScrollView alloc]initWithFrame:frame];
[self addSubview:self.bannerpageControl];
//设置KVO
[self.bannerScrView addObserver:self forKeyPath:@"currentPageInteger" options:NSKeyValueObservingOptionNew context:nil];
[self addSubview:self.bannerScrView];
//将小圆点设置在图层最上层防止被ScrollView盖住
[self bringSubviewToFront:self.bannerpageControl];
}
return self;
}
复制代码在show方法中调用ZWCHeaderViewScrollView.h中的show方法，并吧数据传过去同时设置一些pageControl的属性。
- (void)showWith:(NSArray *)imageViewUrlArray{
[self.bannerScrView showWith:imageViewUrlArray];
self.bannerpageControl.numberOfPages = imageViewUrlArray.count;
self.bannerpageControl.userInteractionEnabled = NO;
self.bannerpageControl.currentPage = 0;
self.bannerpageControl.currentPageIndicatorTintColor = [UIColor redColor];
self.bannerpageControl.pageIndicatorTintColor = [UIColor yellowColor];
}
复制代码实现KVO的回调方法，对pageControl进行实时的设置。
//kvo监控翻页动作
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
if ([keyPath isEqualToString:@"currentPageInteger"]) {
self.bannerpageControl.currentPage = [[change valueForKey:@"new"] integerValue];
NSLog(@"当前页已改变------%@",[change valueForKey:@"new"]);
}
}
复制代码 最后在ZWCheaderView的dealloc中移除KVO,在ZWCHeaderViewScrollView的dealloc中停止定时器。这里就涉及到我上面说的两个可能有坑的问题，希望大神可以指教。
ZWCheaderView.m中
- (void)dealloc
{
//移除KVO，注意检查这里会不会移除不完全
[_bannerScrView removeObserver:self forKeyPath:@"currentPageIntegere"];
}
复制代码ZWCHeaderViewScrollView.m中
-(void)dealloc{
//停止定时器，防止crash
[_rotateTimer invalidate];
}
复制代码好了到这里就完了。谢谢大家一直可以看完，如文中有错误的地方或者可以改进的地方希望可以指正。