iOS开发笔记6：图片轮播及其无限循环效果

     平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果，实现方式主要有两种，一种是ScrollView+ImageView，另外一种则是经过CollectionView，今天总结的是ScrollView这种方式。

    1.图片轮播效果实现

      主要实现思路是：根据图片总数及宽高设置好ScrollView的大小，每切换一张图片至关于在ScrollView上进行一个图片宽度的移动行为，并加入定时器，实现自动轮播。

      如图所示，设置好ScrollView及PageControl，ScrollView的contentSize根据图片数量肯定，注意启用pagingEnabled这个属性，确保整页移动，一样pageControl也是根据图片数量来肯定，每一页表明一张图片。

      图片命名采用数字序号方式，方便使用，须要注意的是，pageControl是由0开始的，也就是0对应image1，1对应image2...依次类推

     加载图片并将准备好的图片在ScrollView里设置好位置，即将这些图片一张紧挨着一张排列在ScrollView中。

     经过ScrollView的代理方法，在ScrollView滚动结束的时候根据contentOffset更新页码。

     定时器设置，这里设置为每隔2秒滚动更新一次，实际上就是每隔2秒更新一次页码，根据页码的变化，让ScrollView跟着移动，每次移动一张图片的距离

     这里还须要注意的是，因为加入定时器有自动轮播的效果了，会与手动拖拽ScrollView冲突，即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了，显然这种效果是不符合用户习惯的，这时须要在ScrollView的代理事件中进行处理，即开始拖拽ScrollView时中止定时器，拖拽结束后再开启定时器。

      那到这里是否是就结束了呢？咱们看看效果图：

      这里有两个问题：

     （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

      （2）根据ScrollView的移动状况，迅速变化三个ImageView中图片数据

 

       （3）ImageView更新完毕后，偷偷把ScrollView拉回到中间的ImageView位置，这样视觉效果上就实现了无限循环的效果

 

      效果图：

 

      可是，这里在加入定时器后实现图片轮播自动循环时遇到了问题，主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突，在code4App上找到其余人一个工程，采用的思路相同，单独封装了ScrollView进行处理，已经解决该问题。

可参考：http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4