iOS三张图无限循环轮播，小白也能看懂，无坑可扩展。-白红宇

写在前面：一、关于无限轮播的思路无非就是以下几种：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"]];}复制代码

到这里，你的滚动视图已经可以无限轮播了。接下来要做的就是，添加定时器实现自动轮播。

关于定时器的一些基本知识不懂的可以看这里：

首先在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];}复制代码

好了到这里就完了。谢谢大家一直可以看完，如文中有错误的地方或者可以改进的地方希望可以指正。