新的一周开始了,今天这篇笔记,是记录我最近学到的用UICollectionView实现了无限图片轮播器的方法。我们可以看到,现在市面上,很多iOS app都会用到图片轮播的技术,实现出来的效果也是非常不错,值得记录下来跟大家分享交流。
作为一个iOS开发者,我们要做一个iOS app,主要就是搞定两个方面:对接数据、搭建界面。数据包含网络数据和模型,通过搭建UI界面,把数据展现出来,实现效果。由于,这是我自己做的一个简易的图片轮播器,所以准备的数据都是本地图片,如下所示:
随意的找了3张图片,分别命名为01、02、03。图片准备好了,接下来开始搭建界面,如下代码所示:创建一个新的demo,把3张图片放到image文件夹中,创建一个继承于UICollectionView 的 HomeLoopView。
首先,在控制器中,加载本地图片数据,如下代码所示:
打印结果如下:
紧接着,我们要把图片数据对接到CollectionView上面去展示出来,那么我们就要在HomeLoopView创建一个init方法,来对接数据,如下代码所示:
我们把HomeLoopView添加到ViewController上面,让它成为控制器的子视图,如下代码所示:
紧接着,我们创建一个HomeLoopViewFlowlayout,继承于UICollectionViewFlowLayout,实现一个CollectionView的效果,如下代码所示:
然后,我们自定义一个UICollectionViewCell,取名为HomeLoopViewCell,由于数组中存的是二进制图像,所以,我们需要将二进制图像转化为图像,如下代码所示:
紧接着,我们在LoopView中引用Layout和Cell的头文件名,同时注册一个cellID,让LoopView遵守CollectionView的数据源方法和代理方法。
ok,我们接下来来实现无限轮播效果。遵守代理和数据源方法,注册cell。
我们假设numberOfItemsInSection 有2组:
以上的代码写完之后,运行程序,可以实现滚到第一组的第一张图片,和第二组的最后一张图片,还没有达到我们无限的轮播的效果,所以,我们必须要通过代理方法,监听图片的偏移量,如果偏移量为0,就让它的偏移量为_imgUrls.count,否则就为_imgUrls.count-1,如下所示:
最终实现的效果:
补充:现在有一些图片轮播器,左右滚动图片的时候,滚着滚着就会出现卡顿现象,这样的用户体验不太好,不妨可以试试,扩大数据源的数据,果断搞个100组。