iOS开发 • 实例——用UICollectionView实现一个简易的图片无限轮播器

     新的一周开始了，今天这篇笔记，是记录我最近学到的用UICollectionView实现了无限图片轮播器的方法。我们可以看到，现在市面上，很多iOS app都会用到图片轮播的技术，实现出来的效果也是非常不错，值得记录下来跟大家分享交流。

     作为一个iOS开发者，我们要做一个iOS app，主要就是搞定两个方面：对接数据、搭建界面。数据包含网络数据和模型，通过搭建UI界面，把数据展现出来，实现效果。由于，这是我自己做的一个简易的图片轮播器，所以准备的数据都是本地图片，如下所示：

01.jpg

02.jpg

03.jpg

      随意的找了3张图片，分别命名为01、02、03。图片准备好了，接下来开始搭建界面，如下代码所示：创建一个新的demo，把3张图片放到image文件夹中，创建一个继承于UICollectionView 的 HomeLoopView。

创建一个继承于UICollectionView的HomeLoopView

首先，在控制器中，加载本地图片数据，如下代码所示：

通过for循环加载本地图片数据，保存在数组中

打印结果如下：

成功加载保存到数组中

      紧接着，我们要把图片数据对接到CollectionView上面去展示出来，那么我们就要在HomeLoopView创建一个init方法，来对接数据，如下代码所示：

创建一个initWithUrl方法

      我们把HomeLoopView添加到ViewController上面，让它成为控制器的子视图，如下代码所示：

     紧接着，我们创建一个HomeLoopViewFlowlayout，继承于UICollectionViewFlowLayout，实现一个CollectionView的效果，如下代码所示：

      然后，我们自定义一个UICollectionViewCell，取名为HomeLoopViewCell，由于数组中存的是二进制图像，所以，我们需要将二进制图像转化为图像，如下代码所示：

collectionviewCell的frame是根据之前的layout已经确定好的！

      紧接着，我们在LoopView中引用Layout和Cell的头文件名，同时注册一个cellID,让LoopView遵守CollectionView的数据源方法和代理方法。

让HomeLoopView独立的处理轮播器相关的所有代码逻辑

ok，我们接下来来实现无限轮播效果。遵守代理和数据源方法，注册cell。

默认位置为第二组的第一张图片，安排任务在主线程上面执行

我们假设numberOfItemsInSection 有2组：

一组有3张图片，现在有2组，程序运行时，默认位置为第二组的第一张照片。

取模是为了防止数组越界

     以上的代码写完之后，运行程序，可以实现滚到第一组的第一张图片，和第二组的最后一张图片，还没有达到我们无限的轮播的效果，所以，我们必须要通过代理方法，监听图片的偏移量，如果偏移量为0，就让它的偏移量为_imgUrls.count，否则就为_imgUrls.count-1，如下所示：

最终实现的效果：

补充：现在有一些图片轮播器，左右滚动图片的时候，滚着滚着就会出现卡顿现象，这样的用户体验不太好，不妨可以试试，扩大数据源的数据，果断搞个100组。