iOS 自定义图片无限轮播控件

一：简介

图片轮播功能在App中是一个非常常见的功能，即允许定时滚动，也允许拖拽滚动，也可以点击每张图片触发事件。

---

二：实现方式

图片轮播功能的实现方式有很多中，

• UIScrollView + N个UIImageView
• UIScrollView + 3个UIImageView
• UICollectionView
• 其它方式

1. UIScrollView + N个UIImageView

一般初学者都会采用这种方式：UIView作为父视图，将UIScrollView和UIPageControl添加到父视图UIView上，然后再将所有UIImageView从头到尾依次添加到UIScrollView上，滚动视图的偏移量 offset.x 默认为0。

这种方式最简单易懂，一般图片轮播功能的图片张数在10张以内，因为UIScrollView没有循环利用的功能，假如图片超过10张有很多张（比如100个）那么就要创建100个UIImageView，这是比较浪费内存的，显然这种方式只能玩玩不能用于实际开发当中。

---

2. UIScrollView + 3个UIImageView

方式一当图片个数过多的情况下会创建很多个UIImageView，为了解决这个问题，方式二将采用始终创建3个UIImageView的方式来处理。

该方式采用以UIView作为父视图，UIScrollView和UIPageControl 作为子视图，创建3个UIImageView依次添加到UIScrollView中, 第一张图片显示数组中的最后一张图片，第二张图片显示数组中的第一张图片，第三张图片显示数组中的第二张图片，然后再让UIScrollView的偏移量为一个滚动视图的宽度offset.x = ScreenWidth， 这样用户看到的就是从图片的第一张开始看的，向左滑动看到第二张图片，向右滑动看到最后一张图片，这样的逻辑没毛病，这种逻辑和方式一的逻辑最大的不同是初始化时偏移了一个宽度（假如有7张图片）

当用户向左前进时此时，此时没有什么特殊之处，此时滚动视图会再偏移一个宽度，达到下面的状态

这种状态滚动结束之后如果不进行处理的话，用户就没法继续向左滚动了，因为已经滚动到头了，所以接下来要做特殊逻辑处理：

• 偷偷替换3张图片：
  
  • 将中间的UIImageView0对应的图片换成当前屏幕上UIImageView1的图片images[1];
  • 将最后一个UIImageView1对应的图片换成UIImageView0对应的图片的下一张图片，即images[1];
  • 将第一个UIImageView2对应的图片换成当前屏幕显示的图片的上一张图片即images[0];
    
• 重置UIScrollView的偏移量为一个屏幕宽度offset.x = ScreenWidth;
  

经过上述2个过程，用户又可以进行滚动了，向左向右滚动都没有问题

注意：这种逻辑有一个需要注意的地方就是当用户滚动临界点，比如滚动到最后一张用户还要往后滚动不能出现数组越界错误，下一张应该为第一张图片images[0],不能出现images[7]，当用户滚动第一张时还要继续往前滚动也不能出现数组越界错误, 前面的图片应该为images[6],不能出现images[-1], 数组越界问题需要特殊的控制

该示例只分析了一直向左活动的操作，像右滑动的操作逻辑是和向左的完全一样的

github封装的图片无限轮播的自定义控件 https://github.com/mengday/XXImageLoopView

---

UICollectionView实现方式

方式二解决了UIScrollView没有重用机制的问题，而有重用机制的控件有UITableView和UICollectionView，而UITableView的滚动方向是垂直方向，可以通过对UITableView进行旋转90°，这样就可以水平方向了，但是UITableViewCell中的内容是反的，还要对内容再旋转90°更正方向，这样处理比较麻烦；而UICollectionView是支持水平方向的滚动的，所以UICollectionView即允许水平滚动又有重用机制，所以非常适合，唯一有个缺点是：UICollectionView是不支持无限轮播的，当滚动到头就不能再滚动了，为了实现无限轮播还需要特殊处理

1. 增加图片数组的元素，将原始图片的最后一张插入到第0个位置，将原始图片的第0个元素追加到最后
   

2. 初始化时先便宜一个宽度来显示第一张图片
   

3. 当用户向右滚动到最前面状态时（图一），需要偷偷的立即将当前的偏移量定位到倒数第二个图片（图二），offset.x = CGPointMake（(self.images.count - 1) * ScreenWidth，0）, 这样一来用户就可以能向左滚动又可以向右滚动了
   
   

4. 当用户向右滚动到最后一张图片时（图一），需要偷偷的立即将当前偏移量定位到正数第二个位置（图二），这样用户就又可以即可以向左滑动，又可以向右滑动。
   

---

使用UICollectionView和使用UIScrollView的方式思想差不多