iOS开发——高级篇——图片轮播及其无限循环效果
2015-10-20 12:39
567 查看
平时APP中的广告位、或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式。
如图所示,设置好ScrollView及PageControl,ScrollView的contentSize根据图片数量确定,注意启用pagingEnabled这个属性,确保整页移动,同样pageControl也是根据图片数量来确定,每一页代表一张图片。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/eeb8d43247ada30affcc02dc5e05dcd7.png)
图片命名采用数字序号方式,方便使用,需要注意的是,pageControl是由0开始的,也就是0对应image1,1对应image2...依次类推
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/ee17c9bafecaa9e4bea92338f10fa9ba.png)
加载图片并将准备好的图片在ScrollView里设置好位置,即将这些图片一张紧挨着一张排列在ScrollView中。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/50e3e4baf291cef9a0065e8e73ee4eec.png)
通过ScrollView的代理方法,在ScrollView滚动结束的时候根据 contentOffset更新页码。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/ac656de69bf288978c13b7f1fc7f88e6.png)
定时器设置,这里设置为每隔2秒滚动更新一次,实际上就是每隔2秒更新一次页码,根据页码的变化,让ScrollView跟着移动,每次移动一张图片的距离
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/20c91c6407f74babee24ac06ba3f31be.png)
这里还需要注意的是,由于加入定时器有自动轮播的效果了,会与手动拖拽ScrollView冲突,即手动拖拽ScrollView过程中可能ScrollView可能自动移动更新图片了,显然这种效果是不符合用户习惯的,这时需要在ScrollView的代理事件中进行处理,即开始拖拽ScrollView时停止定时器,拖拽结束后再开启定时器。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/71b370332159d317493ac780103e1503.png)
那到这里是不是就结束了呢?我们看看效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/5ae424ec57f9df0a39ddf222b0e957c3.gif)
这里有两个问题:
(1)首先是移动到最后一张图片时无法移动了,如果是制作APP的新特性页面,这样的滚动效果已经可以了,但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的,一般滚动到最后一张图片时,继续拖拽都会移动到第一张图片,实现一种滚动循环效果。
(2)定时器自动轮播图片时,确实图片循环轮播了,但是仔细看会发现,ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置,效果也不够理想。
解决办法下面接着说。
解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边的ImageView也随之变化,两种边界情况:
(1)当屏幕显示最后一张图片时,右边的ImageView也也即下一站图片应该是最开始的第一张图片;
(2)当屏幕显示最开始的第一张图片时,左边的ImageView也即上一张图片应该是最后一张图片。
这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考: /article/4925182.html
相对于之前的效果,有一些改变,主要有:
(1)ScrollView只需要设置三个ImageView即可,并且默认显示中间的ImageView
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/bd2b59106b6cce1c83bdd0cee1f94aba.png)
(2)根据ScrollView的移动情况,迅速变化三个ImageView中图片数据
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/f14b66c4bff957b1ddbbe4eb3df88844.png)
(3)ImageView更新完毕后,偷偷把ScrollView拉回到中间的ImageView位置,这样视觉效果上就实现了无限循环的效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/4ecd6d5c200ea3a472210ab1979a8c2d.png)
效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/c5970cd19fed07fbec422ca71e43d6ad.gif)
但是,这里在加入定时器后实现图片轮播自动循环时遇到了问题,主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突,在code4App上找到其他人一个工程,采用的思路相同,单独封装了ScrollView进行处理,已经解决该问题。
1.图片轮播效果实现
主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播。如图所示,设置好ScrollView及PageControl,ScrollView的contentSize根据图片数量确定,注意启用pagingEnabled这个属性,确保整页移动,同样pageControl也是根据图片数量来确定,每一页代表一张图片。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/eeb8d43247ada30affcc02dc5e05dcd7.png)
图片命名采用数字序号方式,方便使用,需要注意的是,pageControl是由0开始的,也就是0对应image1,1对应image2...依次类推
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/ee17c9bafecaa9e4bea92338f10fa9ba.png)
加载图片并将准备好的图片在ScrollView里设置好位置,即将这些图片一张紧挨着一张排列在ScrollView中。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/50e3e4baf291cef9a0065e8e73ee4eec.png)
通过ScrollView的代理方法,在ScrollView滚动结束的时候根据 contentOffset更新页码。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/ac656de69bf288978c13b7f1fc7f88e6.png)
定时器设置,这里设置为每隔2秒滚动更新一次,实际上就是每隔2秒更新一次页码,根据页码的变化,让ScrollView跟着移动,每次移动一张图片的距离
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/20c91c6407f74babee24ac06ba3f31be.png)
这里还需要注意的是,由于加入定时器有自动轮播的效果了,会与手动拖拽ScrollView冲突,即手动拖拽ScrollView过程中可能ScrollView可能自动移动更新图片了,显然这种效果是不符合用户习惯的,这时需要在ScrollView的代理事件中进行处理,即开始拖拽ScrollView时停止定时器,拖拽结束后再开启定时器。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/71b370332159d317493ac780103e1503.png)
那到这里是不是就结束了呢?我们看看效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/5ae424ec57f9df0a39ddf222b0e957c3.gif)
这里有两个问题:
(1)首先是移动到最后一张图片时无法移动了,如果是制作APP的新特性页面,这样的滚动效果已经可以了,但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的,一般滚动到最后一张图片时,继续拖拽都会移动到第一张图片,实现一种滚动循环效果。
(2)定时器自动轮播图片时,确实图片循环轮播了,但是仔细看会发现,ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置,效果也不够理想。
解决办法下面接着说。
2.图片轮播无限循环效果实现
刚刚说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动。解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边的ImageView也随之变化,两种边界情况:
(1)当屏幕显示最后一张图片时,右边的ImageView也也即下一站图片应该是最开始的第一张图片;
(2)当屏幕显示最开始的第一张图片时,左边的ImageView也即上一张图片应该是最后一张图片。
这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考: /article/4925182.html
相对于之前的效果,有一些改变,主要有:
(1)ScrollView只需要设置三个ImageView即可,并且默认显示中间的ImageView
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/bd2b59106b6cce1c83bdd0cee1f94aba.png)
(2)根据ScrollView的移动情况,迅速变化三个ImageView中图片数据
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/f14b66c4bff957b1ddbbe4eb3df88844.png)
(3)ImageView更新完毕后,偷偷把ScrollView拉回到中间的ImageView位置,这样视觉效果上就实现了无限循环的效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/4ecd6d5c200ea3a472210ab1979a8c2d.png)
效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/01/c5970cd19fed07fbec422ca71e43d6ad.gif)
但是,这里在加入定时器后实现图片轮播自动循环时遇到了问题,主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突,在code4App上找到其他人一个工程,采用的思路相同,单独封装了ScrollView进行处理,已经解决该问题。
可参考:http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4
相关文章推荐
- 项目适配iOS9遇到的一些问题及解决办法
- IOS-TextField知多少
- NSParameterAssert延伸出去的理解
- [转] ios数组基本用法和排序
- [转] 【iOS基础知识】之判断NSString是否为整数、浮点数
- 【IOS 开发学习总结-OC-60】ipad应用开发的一些知识
- iOS将image转90,180,270度的方法
- 使用Xcode和Instruments调试解决iOS内存泄露
- ios8 tableView设置滑动删除时 显示多个按钮
- ios 开发的细节
- IOS的XML文件解析,利用了NSData和NSFileHandle
- xcode7、iOS9 设置启动图片(Launch Image)
- XEditText:带删除功能的EditText;可设置自动添加分隔符分割电话号码、银行卡号等;支持禁止Emoji表情符号输入;自定义右边显示图标作功能选项;仿iOS输入框风格
- iOS远程推送之友盟Push
- iOS 打开第三方导航
- IOS 宏定义
- iOS:KVO的概述与使用
- IOS获取系统通讯录联系人信息
- IOS-NSArray排序
- IOS Label行距间隔 首行缩进的解决 原创