原创作者:codingZero

导语

在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代码请看这里,如果觉得好用,请献上你的star。

该轮播框架的优势:

文件少,代码简洁

不依赖任何其他第三方库,耦合度低

同时支持本地图片及网络图片

可修改分页控件位置,显示或隐藏

自定义分页控件的图片,就是这么个性

自带图片缓存,一次加载,永久使用

性能好,占用内存少,轮播流畅

实际使用

我们先看demo,代码如下


运行效果

轮播实现步骤

 

接下来,笔者将从各方面逐一分析。

层级结构

最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView宽高 = scrollview宽高 = view宽高

轮播原理

假设轮播控件的宽度为x高度为y,我们设置scrollview的contentSize.width为3x,并让scrollview的水平偏移量为x,既显示最中间内容

scrollView.contentSize = CGSizeMake(3x, y);

scrollView.contentOffset = CGPointMake(x, 0);


将imageView添加到scrollview内容视图的中间位置


接下来使用代理方法scrollViewDidScroll来监听scrollview的滚动,定义一个枚举变量来记录滚动的方向

typedef enum{

DirecNone,

DirecLeft,

DirecRight

} Direction;@property (nonatomic, assign) Direction direction;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {  self.direction = scrollView.contentOffset.x >x? DirecLeft : DirecRight;

}

使用KVO来监听direction属性值的改变

 

[self addObserver:self forKeyPath:@"direction" options:NSKeyValueObservingOptionNew context:nil];

判断滚动的方向,当偏移量大于x,表示左移,则将otherImageView加在右边,偏移量小于x,表示右移,则将otherImageView加在左边


- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {   //self.currIndex表示当前显示图片的索引,self.nextIndex表示将要显示图片的索引

//_images为图片数组

if(change[NSKeyValueChangeNewKey] == change[NSKeyValueChangeOldKey]) return;

if ([change[NSKeyValueChangeNewKey] intValue] == DirecRight) {    self.otherImageView.frame = CGRectMake(0, 0, self.width, self.height);

self.nextIndex = self.currIndex - 1;

if (self.nextIndex < 0) self.nextIndex = _images.count – 1;

} else if ([change[NSKeyValueChangeNewKey] intValue] == DirecLeft){    self.otherImageView.frame = CGRectMake(CGRectGetMaxX(_currImageView.frame), 0, self.width, self.height);

self.nextIndex = (self.currIndex + 1) % _images.count;

}

self.otherImageView.image = self.images[self.nextIndex];

}

通过代理方法scrollViewDidEndDecelerating来监听滚动结束,结束后,会变成以下两种情况:

此时,scrollview的偏移量为0或者2x,我们通过代码再次将scrollview的偏移量设置为x,并将currImageView的图片修改为otherImageView的图片

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

[self pauseScroll];

}

- (void)pauseScroll {  self.direction = DirecNone;//清空滚动方向

//判断最终是滚到了右边还是左边

int index = self.scrollView.contentOffset.x / x;  if (index == 1) return; //等于1表示最后没有滚动,返回不做任何操作

self.currIndex = self.nextIndex;//当前图片索引改变

self.pageControl.currentPage = self.currIndex;  self.currImageView.frame = CGRectMake(x, 0, x, y);  self.currImageView.image = self.otherImageView.image;  self.scrollView.contentOffset = CGPointMake(x, 0);

}

那么我们看到的还是currImageView,只不过展示的是下一张图片,如图,又变成了最初的效果


自动滚动

 

轮播的功能实现了,接下来添加定时器让它自动滚动,相当简单

- (void)startTimer {   //如果只有一张图片,则直接返回,不开启定时器

if (_images.count <= 1) return;   //如果定时器已开启,先停止再重新开启

if (self.timer) [self stopTimer];   self.timer = [NSTimer timerWithTimeInterval:self.time target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

}

- (void)nextPage {    //动画改变scrollview的偏移量就可以实现自动滚动

[self.scrollView setContentOffset:CGPointMake(self.width * 2, 0) animated:YES];

}

注意:setContentOffset:animated:方法执行完毕后不会调用scrollview的scrollViewDidEndDecelerating方法,但是会调用scrollViewDidEndScrollingAnimation方法,因此我们要在该方法中调用pauseScroll

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {

[self pauseScroll];

}

拖拽时停止自动滚动

 

当我们手动拖拽图片时,需要停止自动滚动,此时我们只需要让定时器失效就行了,当停止拖拽时,重新启动定时器

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

[self.timer invalidate];

}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

[self startTimer];

}

加载图片

 

实际开发中,我们很少会轮播本地图片,大部分都是服务器获取的,也有可能既有本地图片,也有网络图片,那要如何来加载呢?

定义4个属性

  • NSArray imageArray:暴露在.h文件中,外界将要加载的图片或路径数组赋值给该属性

  • NSMutableArray images:用来存放图片的数组

  • NSMutableDictionary imageDic:用来缓存图片的字典,key为URL

  • NSMutableDictionary operationDic:用来保存下载操作的字典,key为URL

  • 判断外界传入的是图片还是路径,如果是图片,直接加入图片数组中,如果是路径,先添加一个占位图片,然后根据路径去下载图片

_images = [NSMutableArray array];for (int i = 0; i < imageArray.count; i++) {    if ([imageArray[i] isKindOfClass:[UIImage class]]) {

[_images addObject:imageArray[i]];//如果是图片,直接添加到images中

} else if ([imageArray[i] isKindOfClass:[NSString class]]){

[_images addObject:[UIImage imageNamed:@"placeholder"]];//如果是路径,添加一个占位图片到images中

[self downloadImages:i];  //下载网络图片

}

}

下载图片,先从缓存中取,如果有,则替换之前的占位图片,如果没有,去沙盒中取,如果有,替换占位图片,并添加到缓存中,如果没有,开启异步线程下载

- (void)downloadImages:(int)index {  NSString *key = _imageArray[index];  //从字典缓存中取图片

UIImage *image = [self.imageDic objectForKey:key];  if (image) {

_images[index] = image;//如果图片存在,则直接替换之前的占位图片

}else{    //字典中没有从沙盒中取图片

NSString *cache = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];    NSString *path = [cache stringByAppendingPathComponent:[key lastPathComponent]];    NSData *data = [NSData dataWithContentsOfFile:path];    if (data) {             //沙盒中有,替换占位图片,并加入字典缓存中

image = [UIImage imageWithData:data];

_images[index] = image;

[self.imageDic setObject:image forKey:key];

}else{       //字典沙盒都没有,下载图片

NSBlockOperation *download = [self.operationDic objectForKey:key];//查看下载操作是否存在

if (!download) {//不存在

//创建一个队列,默认为并发队列

NSOperationQueue *queue = [[NSOperationQueue alloc] init];        //创建一个下载操作

download = [NSBlockOperation blockOperationWithBlock:^{          NSURL *url = [NSURL URLWithString:key];          NSData *data = [NSData dataWithContentsOfURL:url];           if (data) {                        //下载完成后,替换占位图片,存入字典并写入沙盒,将下载操作从字典中移除掉

UIImage *image = [UIImage imageWithData:data];

[self.imageDic setObject:image forKey:key];            self.images[index] = image;                        //如果只有一张图片,需要在主线程主动去修改currImageView的值

if (_images.count == 1) [_currImageView performSelectorOnMainThread:@selector(setImage:) withObject:image waitUntilDone:NO];

[data writeToFile:path atomically:YES];

[self.operationDic removeObjectForKey:key];

}

}];

[queue addOperation:download];

[self.operationDic setObject:download forKey:key];//将下载操作加入字典

}

}

}

}

监听图片点击

当图片被点击的时候,我们往往需要执行某些操作,因此需要监听图片的点击,思路如下

  1. 定义一个block属性暴露给外界void(^imageClickBlock)(NSInteger index)

  2. 设置currImageView的userInteractionEnabled为YES

  3. 给currImageView添加一个点击的手势

  4. 在手势方法里调用block,并传入图片索引

结束语

上面是笔者的主要思路以及部分代码,需要源码的请前往笔者的

github下载:
https://github.com/codingZero/XRCarouselView

iOS之两个ImageView实现图片滚动的更多相关文章

  1. 两个imageView实现图片轮播

    前言 在不少的项目中,都会用到图片轮播这个功能,现在网上关于图片轮播的轮子也层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里给大家介绍笔者的主要思路以及大概步骤. ...

  2. iOS UITableViewCell 中 调整imageView 的图片大小

    在我的项目中,很多地方都希望将UITableViewCell 中的imageView 能根据自己图片的大小来进行展示,而就为了解决这个问题又觉得重写UITableViewCell 很不值得. 如下: ...

  3. iOS 用collectionview 做的无限图片滚动 广告banner适用

    使用方法见demo,bug未知,若有什么问题欢迎留言:) http://files.cnblogs.com/files/n1ckyxu/NickyScrollImageView.zip demo使用s ...

  4. iOS 两种不同的图片无限轮播

    代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...

  5. 高效图片轮播,两个imageView实现

    本文是投稿文章,作者:codingZero 导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里 ...

  6. iOS开发系列--无限循环的图片浏览器

    --UIKit之UIScrollView 概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件 ...

  7. iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  8. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  9. iOS开发项目实战——Swift实现图片轮播与浏览

    近期開始开发一个新的iOS应用,自己决定使用Swift.进行了几天之后,发现了一个非常严峻的问题.那就是无论是书籍,还是网络资源,关于Swift的实在是太少了,随便一搜全都是OC实现某某某功能.就算是 ...

随机推荐

  1. Minor【 PHP框架】6.代理

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  2. java笔试题

    下面有关JVM内存,说法错误的是? A.程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,是线程隔离的 B.Java方法执行内存模型,用于存储局部变量,操作数栈,动态链接 ...

  3. 从一道面试题分析javascript闭包

    据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...

  4. Google Chrome 应用商店上传扩展程序

    1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...

  5. MongoDB的CRUD操作

    1. 前言 在上一篇文章中,我们介绍了MongoDB.现在,我们来看下如何在MongoDB中进行常规的CRUD操作.毕竟,作为一个存储系统,它的基本功能就是对数据进行增删改查操作. MongoDB中的 ...

  6. 小div布局之卡片堆叠(card-stacking)

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  7. Using Nuget in Visual Studio 2005 & 2008

    NuGet is a Visual Studio extension that makes it easy to install and update third-party libraries an ...

  8. 数据库排序sql,order by

    一开始我认为 SELECT * FROM dbo.T_User ORDER BY CreateTime ,IsDel DESC 的执行顺序是先按创建时间倒序排序,再按isdel倒序排序,所以我就没再S ...

  9. C#学习笔记-封装

    前言 说起来惭愧,学了大半年的C#,其实最开始就接触到了封装的部分,但是一直模模糊糊的弄不清楚,也觉得没什么影响就没怎么在意,现在才开始认真的看这部分内容,看懂了过后好多东西清晰了不少,才发现封装这个 ...

  10. DELPHI实现关闭指定进程,自身防杀

    偶然翻到很久以前用DELPHI写的一个小程序,实现功能是在后台默默关闭符合条件的进程,并隐藏自身.编写目的是为了防止办公电脑运行游戏. 实现原理是: 1.程序运行后将自身以不同的名称一式三份存到系统各 ...