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

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

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