轮播图iOS

导语

在不少项目中，都会有图片轮播这个功能，现在网上关于图片轮播的框架层出不穷，千奇百怪，笔者根据自己的思路，用两个imageView也实现了图片轮播，这里说说笔者的主要思路以及大概步骤，具体代码请看这里，如果觉得好用，请献上你的star。

该轮播框架的优势：

文件少，代码简洁

不依赖任何其他第三方库，耦合度低

同时支持本地图片及网络图片

可修改分页控件位置，显示或隐藏

自定义分页控件的图片，就是这么个性

自带图片缓存，一次加载，永久使用

性能好，占用内存少，轮播流畅

实际使用

我们先看demo，代码如下



运行效果



轮播实现步骤

接下来，笔者将从各方面逐一分析。

层级结构

最底层是一个UIView，上面有一个UIScrollView以及UIPageControl，scrollView上有两个UIImageView，imageView宽高 = scrollview宽高 = view宽高



轮播原理

假设轮播控件的宽度为x高度为y，我们设置scrollview的contentSize.width为3x，并让scrollview的水平偏移量为x，既显示最中间内容



将imageView添加到scrollview内容视图的中间位置



接下来使用代理方法scrollViewDidScroll来监听scrollview的滚动，定义一个枚举变量来记录滚动的方向

使用KVO来监听direction属性值的改变

判断滚动的方向，当偏移量大于x，表示左移，则将otherImageView加在右边，偏移量小于x，表示右移，则将otherImageView加在左边



通过代理方法scrollViewDidEndDecelerating来监听滚动结束，结束后，会变成以下两种情况：



此时，scrollview的偏移量为0或者2x，我们通过代码再次将scrollview的偏移量设置为x，并将currImageView的图片修改为otherImageView的图片

那么我们看到的还是currImageView，只不过展示的是下一张图片，如图，又变成了最初的效果



自动滚动

轮播的功能实现了，接下来添加定时器让它自动滚动，相当简单

注意：setContentOffset:animated:方法执行完毕后不会调用scrollview的scrollViewDidEndDecelerating方法，但是会调用scrollViewDidEndScrollingAnimation方法，因此我们要在该方法中调用pauseScroll

拖拽时停止自动滚动

当我们手动拖拽图片时，需要停止自动滚动，此时我们只需要让定时器失效就行了，当停止拖拽时，重新启动定时器

加载图片

实际开发中，我们很少会轮播本地图片，大部分都是服务器获取的，也有可能既有本地图片，也有网络图片，那要如何来加载呢？

定义4个属性

NSArray imageArray：暴露在.h文件中，外界将要加载的图片或路径数组赋值给该属性

NSMutableArray images：用来存放图片的数组

NSMutableDictionary imageDic：用来缓存图片的字典，key为URL

NSMutableDictionary operationDic：用来保存下载操作的字典，key为URL

判断外界传入的是图片还是路径，如果是图片，直接加入图片数组中，如果是路径，先添加一个占位图片，然后根据路径去下载图片

下载图片，先从缓存中取，如果有，则替换之前的占位图片，如果没有，去沙盒中取，如果有，替换占位图片，并添加到缓存中，如果没有，开启异步线程下载

监听图片点击

当图片被点击的时候，我们往往需要执行某些操作，因此需要监听图片的点击，思路如下

1.定义一个block属性暴露给外界void(^imageClickBlock)(NSInteger index)

（不会block的可以用代理，或者看这里）

2.设置currImageView的userInteractionEnabled为YES

3.给currImageView添加一个点击的手势

4.在手势方法里调用block，并传入图片索引