新的一周开始了，今天这篇笔记，是记录我最近学到的用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组。
网友评论