iOS-Main-细讲图片轮播

前言:在做应用程序的时候，我们考虑一下，有个细节。网络，其实不难，做APP其实我们就是考虑的两个方面一是数据，二是UI。通常AFN异步，拿过来字典转模型，做完字典转模型又做UI的事情，其实AFN就是发送一个请求，回来就算完了。要么一个get,要么一个POST。数据呢，分为一个本地，一个网络，最终呢，都是要转成模型。如图所示:

基本思路
要做什莫

第一部分：准备数据

• 1.创建一个名为 "UI-图片轮播器" 的工程，配置好环境。拖入素材。
  创建工程，拖入素材
  [了解]:
  属性和成员变量的区别?
  - 属性: 提供了getter & setter / 成员变量
  - 成员变量
  - 真正保存数据的是"成员变量"

• 2 创建一个数组存储图片url的成员变量，并加载数据.代码及打印结果如下:

  
  示例代码
  打印结果
  若fileName = nil

第二部分：搭建界面

基本思路:封装一个轮播器的视图，传入urls即可，用collectView来做。如图所示:

思维导图
为了便于封装
LoopView
创建类
创建类
导入头文件
创建界面
这时候，运行会报错
需要一个非空的layout
没有初始化layout
为了方便外部的调用，通常我们会，把layout写在collectView内部，如下图:
内部封装

第二部分：传递数据

思维导图

改造init,如下图所示:

改造init

测试数据是否传输成功

打断点
为外界提供接口
如果，这回运行，仍然会报错
如下图详解:
图解

再次运行:

获取数据成功

第三部分：设置数据源

思维导图

遵守数据源，设置协议

遵守数据源，设置协议

实现协议->标识符->注册

实现协议
标识符
注册
为了看到显示，我们可以给它设置一个随机颜色
随机颜色

第四部分：自定义Cell布局

思维导图
创建一个布局的子类
创建布局的子类
查看父类
1
准备layout
导入头文件改写系统layout
打印出来的collectionView大小，我们写的是一样的，如下图所示:
打印collectionView大小
这时候我们就会发现:
这时候我们就会发现
collectionView的设置
1
2
3
发现
在以前用collectionView的时候，设置格子的大小，我们需要管理生命周期，但是用这个方法，我们可以将属性一次性设置好。这个方法非常犀利。
用了自定义布局，就不用考虑，一切有关视图生命周期的东西。

第五部分：自定义布局-->显示图像

思维导图

创建cell

创建cell

初始化-打断点测试

初始化
替换系统的cell,只替换了注册中的系统cell
替换系统的cell
运行，测试结果如图:
测试结果

添加图像视图

添加图像视图-测试
更改上图
给外界提供url接口
set方法设置
传值

第五部分：实现轮播，可以左右拖拽

思维导图
做到这个时候，我们发现我们的轮播图只能往右拖，而不能往左拖。而，这个时候我们就要考虑，如果需要轮播图往左拖，我们该怎么办呢？
请看下图的思路:
我们在图片定位于图片位置，在，左边在加上一组:
基本思路
基本思路
我们将，图下的数据源*2 就相当与加上了一组，但是一运行，就会会造成崩溃。
加上一组 *2
会发现数组越界了
数组越界
越界在哪呢？怎么解决呢？
要想解决我们需要，我们已经把图片分成两组，但是因为我们有三张图片，6个位置。我们可以取模%，来解决数组越界问题，如下图:
取模
那么怎么让图片往左移动呢，应该让图片，初始化第二组。我们找到构造函数，让它滚动过去就可以了，如下图:

我们在运行，发现还是往左滑不动，为什莫呢？
说明这里的滚动没有生效。

这里引出一个面试题，在开发中，什莫时候使用过多线程，不要给我说AFN！

先执行数据源方法，在执行滚动方法：
主队列异步走到第二组：
如下图：

1
2

这回我们就可以往左拖了...

提示

第六部分：无限轮播的实现

思维导图

如果，将图片，拖拽到下图那种情况，还要继续往右拖拽怎么办？

滚动到最后一张图片时，将图片定位于下图位置:

定位-右
同样是，当滚动到第一张时，还要往左滚，我们将图片定位于下图样式:
定位-左
那么，我们就要监听它滚动的位置：

遵守协议，设置代理

遵守协议，设置代理
实现方法无限轮播
无限轮播
这时候，还有一个bug，当我们快速滚动时，会造成下的卡顿
原因是,当它跳到最后一张时，他需要做一个contentoffset的一个切换。一当切换了，用户的手势就会不连贯
解决如下:
3
300
这样怎么也不会卡了。。。
整体思路

终于赶完了,完毕!!!