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

写在前面:
一、关于无限轮播的思路
无非就是以下几种:collectionView实现、N+2个imageView实现、三个imageView实现,两个imageView实现。
这其中collectionView感觉有点偷懒的意思,N+2和3个imageView相比起来3个imageView更节省资源,两个imageView还没有了解过,这里不做介绍。

二、关于借鉴
楼主自己在写轮播的时候查了很多资料,有很多好用的第三方库,但是感觉这个简单的功能还是自己做好一点,后期维护也方便点,下面也会将参考的文章链接贴出来。
以下的文章中有一些有坑的地方,我主要参考了一些结构和命名。
参考文章://www.greatytc.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,如果大家用的本地图片,这里的数组直接传本地图片名就行了。
到这一步,添加了三张图,已经可以滚动了,但是只能左右各滚动一下。无法无限滚动,然后再理一下思路:
看一下图片

Paste_Image.png

用户看到的永远是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"]];
}

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

关于定时器的一些基本知识不懂的可以看这里:
http://www.cnblogs.com/zhang6332/p/6253466.html

首先在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];
}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,089评论 4 62
  • 关于轮播图的实现, zz所了解到的有三种: 利用scrollView根据轮播图片的多少来创建imageview 然...
    zz__我不二阅读 3,059评论 2 13
  • “我年纪越大,越认为心理不管正不正常,邪恶就是邪恶。我们每个人或多或少都会受到邪恶行为的诱惑,但这不表示我们对邪恶...
    怯怯灼木阅读 228评论 0 1
  • 教材类书籍,理论层面较多,弥补了我对VI设计的基础性的认知。 VI设计的概论 书中追本溯源的阐述:所谓的统一识别,...
    安古阅读 424评论 0 0
  • 需要写 需要表达 需要不断阅读和修正 需要真正的静心和踏实 需要谦虚 需要不断改进 需要一个平常心 需要活在当下...
    Annie简月阅读 128评论 0 0