如何撸一个图片轮播器

    图片轮播器是一个在应用中使用率非常高的控件，翻了一遍手机上的app，发现几乎所有的应用中都不乏图片轮播的身影。醒目、美观、信息直面扑来等等特点使得轮播器成了app展示信息的首选。

    其实在github上搜一下可以找到一些优秀的第三方库，比如star较高的 SDCycleScrollView。抱着学习的态度，没有去查看它的源代码，想着自己要是实现一个该怎么做呢？立马动手撸一个，才有了自己的轮播器BLCycleImageView。下面讲大概讲一下在撸的整个过程中思路和收获，希望对各位看官有所帮助(特别是像我一样刚入门但爱折腾的小白)。

一、前期思考准备

    封装一个控件前先需要搞明白这几个问题：

• 这个控件能干啥，大概长什么样子？
• 它需要外部哪些信息？
• 它向外反馈什么信息？
• 选型；使用何种技术实现，在这里就是以什么为父类？

    轮播器长啥样？

    随便打开几个常用的应用看看就知道了（iphone上的App Store首页就有）；功能无非是显示若干图片、显示当前图片是第几张(pagecontroll)、能够左右滑动、能够自动轮播、显示图片描述以及图片缓存等等。

    轮播器要知道哪些信息呢？

    轮播一般是放置类似广告之类的信息，每个时间段投放的广告会不一样，这样就需要接收外部给我的一组图片地址

@property(nonatomic,copy)  NSArray *imageUrlArr;

    那么异步加载这些图片时，难免会碰到网络糟糕的时候，那么这个时候需要一个显示默认的图片。（图片缓存采用第三方库SDWebImage）

@property(nonatomic,strong) UIImage *placeholderImg;

    上面是一个轮播器最基本必须的信息，有了这些信息，轮播器就可以工作了。

    但为了更好的扩展性和定制性，我们还有需要知道很多信息，比如：每张图片需要一个简短的“广告语”、是否显示pagecontroll、是否自动轮播、自动轮播间隔时间等等。不一一列举，具体看下面代码：

@property(nonatomic,copy) NSArray *imageTitles;//图片描述
@property(nonatomic,getter=isShowPageControll) BOOL showPageControll;
@property(nonatomic,getter=isAutoMoving) BOOL autoMoving;//是否自动轮播
@property(nonatomic,assign) NSNumber *autoMoveInterval;//轮播间隔时间
@property(nonatomic,assign) PageControllPositionType pagecontrollPosition;//图片描述位置

    暂时只想到这么多了，这样它就有很好的定制性了，以能满足不同的需求。

    轮播器反馈哪些信息呢？

    当你看到轮播器中一个着装很暴露的漂亮妹子，你是否想点击一下期待看一下大图呢，然后放大，再放大，再放大点呢？哈哈暴露了自己的想法，主要是审美……。 那么就需要响应用户的点击图片的事件：

@protocol CycleImageViewDelegate <NSObject>

@optional
- (void)cycleImageView:(BLCycleImageView *)cycleImageView didClickImage:(NSUInteger)imageIndex;

@end

    到这里一个功能较为完善的轮播器就基本构建起来了，结下来的就是要考虑怎么去实现了。那么就马上动手编码？先等等。

    用什么基础控件来实现轮播器呢？

    考虑一下iOS的那些基础控件能实现轮播器呢？很自然的就想到三个：

• UIPageViewController
• UICollectionView
• UIScrollView

    其实无论用哪种方式实现都是可以，但个人觉得后两种更合适封装成独立的控件，理由很简单，试想将一个controller添加到另外一个controller（subviewcontroller）不是不可以，总觉得怪怪的。至于是用UICollenctionView还是UIScrollView就看各位自己熟悉哪个了。这里BLCycleImageView选择用UIScrollView来实现。

    还有一个问题，怎么实现无限轮播呢？常见有两种做法：

• 1、N＋2的方式；实现原理是当需要轮播N张图片，我们在首尾再加两张图片，在首部加一张图片为第N张，尾部加一张图片为第1张图片。感觉有点乱？……? 看图吧。图引用自Kenshin Cui。

• 2、三个UIImageView;显然第一张方式并不是很好，想想当需要轮播的图片很多(N＝100)时，需要创建大量的UIImageView性能堪忧(当然一般轮播也就10张以内的图，但我们要有这样优化的意识)。实现原路也很简单：始终保持显示中间的UIImageView，滚动时动态更改三个UIImageView的图片即可。如下图中间为初始状态。
  
      至此一个轮播器的前期准备和构思就完成了，剩下的就是码砖了。

二、展示效果与其它收获

    其实最初是想模仿一下网易云课堂自己独立做一个app，一看原版的网易云课堂，首页就是一个轮播。所以当务之急还是先撸一个图片轮播器吧，效果图如下：

    带图片说明文字和不带的效果

    以及最后一张是整个高仿app的效果图

    收获：

    学会了制作动态图，简单的描述一下过程(会的可以忽略)。把iPhone连接到电脑，用mac自带的QuickTime Plaryer －> 文件，新建影片录制－> 保存得到视频文件。将视频(.mov)转化为gif动态图，我借用了一个工具 “GIF Brewery”，具体如何使用如下图：

    其实还有很多收获，比如如何制作cocoapod等等，这里就不再一一说了，欢迎大家拍砖！Github关注这个项目，项目目前有很多可以优化改进的地方，后面在慢慢去更新吧，先走出第一步。觉得还不错的筒靴可以给个star鼓励鼓励！！！

三、写在最后

    虽然是有点重复造轮子的意味，但整个过程学到了很多东西，特别是像我这样刚入门的小白，在自己动手实现的过程中不断的成长，拒绝一味的拿来主义。

    关于模仿app方面，我后面会再模仿几个自己喜欢的app，创新源于模仿嚒。

    最后做个小广告，前段时间写了一个抓包程序(我以前是从事.NET开发的,半年前转做 iOS开发)，从各大网站抓取了一些相关旅游、摄影、深度关注等领域的数据，免得浪费就维护了一个公众号。其实主要是因为我很喜欢旅游，闲暇时喜欢看看别人的旅游故事，毕竟世界那么大，我却没有足够的时间去看看，主要还是没有足够物质基础，不过看看别人的旅游也可以有很多的想象与感悟吧。也算是一种自我激励，”这个地方将来我一定也要去看看“，加油吧！！！

    有和我一样爱好，也在为生活而努力拼搏的小伙伴，可以关注一下。

转载于:https://www.cnblogs.com/busylife/p/6186602.html