iOS开发--轮播图
在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代码请看这里,如果觉得好用,请献上你的star。
该轮播框架的优势:
文件少,代码简洁
不依赖任何其他第三方库,耦合度低
同时支持本地图片及网络图片
可修改分页控件位置,显示或隐藏
自定义分页控件的图片,就是这么个性
自带图片缓存,一次加载,永久使用
性能好,占用内存少,轮播流畅
实际使用
我们先看demo,代码如下
运行效果
轮播实现步骤
接下来,笔者将从各方面逐一分析。
层级结构
最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView宽高 = scrollview宽高 = view宽高
轮播原理
假设轮播控件的宽度为x高度为y,我们设置scrollview的contentSize.width为3x,并让scrollview的水平偏移量为x,既显示最中间内容
1
2
|
scrollView.contentSize = CGSizeMake(3x, y); scrollView.contentOffset = CGPointMake(x, 0); |
将imageView添加到scrollview内容视图的中间位置
接下来使用代理方法scrollViewDidScroll来监听scrollview的滚动,定义一个枚举变量来记录滚动的方向
1
2
3
4
5
6
7
8
|
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属性值的改变
1
|
[self addObserver:self forKeyPath:@ "direction" options:NSKeyValueObservingOptionNew context:nil]; |
判断滚动的方向,当偏移量大于x,表示左移,则将otherImageView加在右边,偏移量小于x,表示右移,则将otherImageView加在左边
1
2
3
4
5
6
|
- (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的图片
1
2
3
4
5
6
7
8
9
10
|
- (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,只不过展示的是下一张图片,如图,又变成了最初的效果
自动滚动
轮播的功能实现了,接下来添加定时器让它自动滚动,相当简单
1
2
3
4
5
6
7
8
9
|
- (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
1
2
3
|
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { [self pauseScroll]; } |
拖拽时停止自动滚动
当我们手动拖拽图片时,需要停止自动滚动,此时我们只需要让定时器失效就行了,当停止拖拽时,重新启动定时器
1
2
3
4
5
6
7
|
- (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
判断外界传入的是图片还是路径,如果是图片,直接加入图片数组中,如果是路径,先添加一个占位图片,然后根据路径去下载图片
1
2
3
4
5
6
7
|
_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]; //下载网络图片 } } |
下载图片,先从缓存中取,如果有,则替换之前的占位图片,如果没有,去沙盒中取,如果有,替换占位图片,并添加到缓存中,如果没有,开启异步线程下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
- (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)
(不会block的可以用代理,或者看这里)
2.设置currImageView的userInteractionEnabled为YES
3.给currImageView添加一个点击的手势
4.在手势方法里调用block,并传入图片索引
结束语
上面是笔者的主要思路以及部分代码,需要源码的请前往笔者的github下载:https://github.com/codingZero/XRCarouselView,记得献上你的星星哦
iOS开发--轮播图的更多相关文章
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- JavaScript面向对象的方式开发轮播图插件
轮播图是很多页面必不可少的组件.这里来使用面向对象方式开发一个插件.减去开发的痛楚 首先需要寻找对象:只有一个对象,轮播图!关键点在于找到这个对象所拥有的属性以及方法,通过代码实现出来,这是面向对象最 ...
- iOS中 轮播图放哪最合适? 技术分享
我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICol ...
- [DeviceOne开发]-轮播图和多模板的简单示例
一.简介 这个例子是利用Slideview组件实现循环轮播的效果,同时这个slideview作为一个listview的最上面的一行数, 1. listview有2个模板,一个是以slideview为核 ...
- iOS 无限轮播图的两种实现
首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永 ...
随机推荐
- ASP.NET&AJAX&JSON - 动态读取数据
因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...
- MATLAB连通域标记函数
L = bwlabel(BW,n)返回一个和BW大小相同的L矩阵,包含了标记了BW中每个连通区域的类别标签,这些标签的值为1.2.num(连通区域的个数).n的值为4或8,表示是按4连通寻找区域,还是 ...
- Kinect帮助文档翻译之一 入门
最近在玩Kinect,使用的是Unity,发现网上好像没有什么教程.自己就只有抱着英文版帮助文档啃,真是苦逼 本人英语也不好,大家将就着看吧 Kinect入门帮助 如何运行示例 1 下载并 ...
- Differences Between Xcode Project Templates for iOS Apps
Differences Between Xcode Project Templates for iOS Apps When you create a new iOS app project in Xc ...
- 玩耍Hibernate之缓存
2.在持久化层,对象分为哪些状态?分别列出来. 答:瞬时态(Transient).持久态(Persistent).脱管态(Detached). 瞬时态(Transient) 是对象是创建时,瞬时对象在 ...
- ASP.Net MVC中数据库数据导出Excel,供HTTP下载(转)
转自http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于web ...
- Shell采集系统cpu 内存 磁盘 网络信息
cpu信息采集 cpu使用率 采集算法 通过/proc/stat文件采集并计算CPU总使用率或者单个核使用率.以cpu0为例,算法如下: 1. cat /proc/stat | grep ‘cpu0’ ...
- 详谈socket请求Web服务器过程
最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...
- socket 套接字
网络:交换机,路由器,网线 交换机:分配.. 路由器:找寻网络线路 网络架构: 应用层 ---> 表示层 ---> 会话层 ---> 传输层 ---> 网络层 ---> ...
- 【Java】Eclipse导出jar包与javadoc
1.导出jar包 2.导出javadoc 3.jar包添加javadoc 4.出错解决 参考资料: http://www.cnblogs.com/cyh123/p/3345889.html http: ...