平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式。
###1.图片轮播效果实现
主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播。
如图所示,设置好ScrollView及PageControl,ScrollView的contentSize根据图片数量确定,注意启用pagingEnabled这个属性,确保整页移动,同样pageControl也是根据图片数量来确定,每一页代表一张图片。
contentOffset更新页码。
![](https://box.kancloud.cn/2016-03-22_56f10e22028ef.png)
定时器设置,这里设置为每隔2秒滚动更新一次,实际上就是每隔2秒更新一次页码,根据页码的变化,让ScrollView跟着移动,每次移动一张图片的距离
![](https://box.kancloud.cn/2016-03-22_56f10e2219f52.png)
这里还需要注意的是,由于加入定时器有自动轮播的效果了,会与手动拖拽ScrollView冲突,即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了,显然这种效果是不符合用户习惯的,这时需要在ScrollView的代理事件中进行处理,即开始拖拽ScrollView时停止定时器,拖拽结束后再开启定时器。
![](https://box.kancloud.cn/2016-03-22_56f10e223b49f.png)
那到这里是不是就结束了呢?我们看看效果图:
![](https://box.kancloud.cn/2016-03-22_56f10e227d4f6.gif)
这里有两个问题:
(1)首先是移动到最后一张图片时无法移动了,如果是制作APP的新特性页面,这样的滚动效果已经可以了,但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的,一般滚动到最后一张图片时,继续拖拽都会移动到第一张图片,实现一种滚动循环效果。
(2)定时器自动轮播图片时,确实图片循环轮播了,但是仔细看会发现,ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置,效果也不够理想。
解决办法下面接着说。
###2.图片轮播无限循环效果实现
刚刚说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动。
解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边的ImageView也随之变化,两种边界情况:
(1)当屏幕显示最后一张图片时,右边的ImageView也即下一站图片应该是最开始的第一张图片;
(2)当屏幕显示最开始的第一张图片时,左边的ImageView也即上一张图片应该是最后一张图片。
这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考:http://www.cnblogs.com/kenshincui/p/3913885.html
相对于之前的效果,有一些改变,主要有:
(1)ScrollView只需要设置三个ImageView即可,并且默认显示中间的ImageView
![](https://box.kancloud.cn/2016-03-22_56f10e23d791e.png)
(2)根据ScrollView的移动情况,迅速变化三个ImageView中图片数据
![](https://box.kancloud.cn/2016-03-22_56f10e240a036.png)
(3)ImageView更新完毕后,偷偷把ScrollView拉回到中间的ImageView位置,这样视觉效果上就实现了无限循环的效果
![](https://box.kancloud.cn/2016-03-22_56f10e2423ede.png)
效果图:
![](https://box.kancloud.cn/2016-03-22_56f10e245d66f.gif)
- 前言
- iOS开发中@2x等后缀的图片干嘛用的
- 上传APP至AppStore时打包出现U option must have a non-empty value
- UIbutton文字相关
- 将UIview的image保存到本地的方法
- 百度推送iOS
- 静态库的封装
- 提高IOS开发效率的工具
- iOS开发笔记6:图片轮播及其无限循环效果,ios笔记
- ABPeoplePickerNavigationController系统通讯录使用
- iOS中添加UITapGestureRecognizer手势识别后,UITableView的didSelectRowAtIndexPath失效
- ios搭一个简易计算器(利用masonry布局)