ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
平时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)