iOS-Main-细讲图片轮播

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

iOS-Main-细讲图片轮播_第2张图片
要做什莫
第一部分:准备数据
  • 1.创建一个名为 "UI-图片轮播器" 的工程,配置好环境。拖入素材。
    iOS-Main-细讲图片轮播_第3张图片
    创建工程,拖入素材

    [了解]:
    属性和成员变量的区别?
    - 属性: 提供了getter & setter / 成员变量
    - 成员变量
    - 真正保存数据的是"成员变量"
  • 2 创建一个数组存储图片url的成员变量,并加载数据.代码及打印结果如下:


    iOS-Main-细讲图片轮播_第4张图片
    示例代码

    iOS-Main-细讲图片轮播_第5张图片
    打印结果

    iOS-Main-细讲图片轮播_第6张图片
    若fileName = nil
第二部分:搭建界面

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

iOS-Main-细讲图片轮播_第7张图片
思维导图

为了便于封装
iOS-Main-细讲图片轮播_第8张图片
LoopView

创建类
iOS-Main-细讲图片轮播_第9张图片
创建类

iOS-Main-细讲图片轮播_第10张图片
导入头文件

iOS-Main-细讲图片轮播_第11张图片
创建界面

这时候,运行会报错
需要一个非空的layout
iOS-Main-细讲图片轮播_第12张图片
没有初始化layout

为了方便外部的调用,通常我们会,把layout写在collectView内部,如下图:
iOS-Main-细讲图片轮播_第13张图片
内部封装

第二部分:传递数据
iOS-Main-细讲图片轮播_第14张图片
思维导图

改造init,如下图所示:


iOS-Main-细讲图片轮播_第15张图片
改造init

测试数据是否传输成功


iOS-Main-细讲图片轮播_第16张图片
打断点

iOS-Main-细讲图片轮播_第17张图片
为外界提供接口

如果,这回运行,仍然会报错
如下图详解:
iOS-Main-细讲图片轮播_第18张图片
图解

再次运行:


iOS-Main-细讲图片轮播_第19张图片
获取数据成功
第三部分:设置数据源
iOS-Main-细讲图片轮播_第20张图片
思维导图

遵守数据源,设置协议


iOS-Main-细讲图片轮播_第21张图片
遵守数据源,设置协议

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


iOS-Main-细讲图片轮播_第22张图片
实现协议

iOS-Main-细讲图片轮播_第23张图片
标识符

iOS-Main-细讲图片轮播_第24张图片
注册

为了看到显示,我们可以给它设置一个随机颜色
iOS-Main-细讲图片轮播_第25张图片
随机颜色
第四部分:自定义Cell布局

iOS-Main-细讲图片轮播_第26张图片
思维导图

创建一个布局的子类
iOS-Main-细讲图片轮播_第27张图片
创建布局的子类

iOS-Main-细讲图片轮播_第28张图片
查看父类

iOS-Main-细讲图片轮播_第29张图片
1

iOS-Main-细讲图片轮播_第30张图片
准备layout

iOS-Main-细讲图片轮播_第31张图片
导入头文件改写系统layout

打印出来的collectionView大小,我们写的是一样的,如下图所示:
iOS-Main-细讲图片轮播_第32张图片
打印collectionView大小

这时候我们就会发现:
iOS-Main-细讲图片轮播_第33张图片
这时候我们就会发现

collectionView的设置
iOS-Main-细讲图片轮播_第34张图片
1

iOS-Main-细讲图片轮播_第35张图片
2

iOS-Main-细讲图片轮播_第36张图片
3

发现
在以前用collectionView的时候,设置格子的大小,我们需要管理生命周期,但是用这个方法,我们可以将属性一次性设置好。这个方法非常犀利。
用了自定义布局,就不用考虑,一切有关视图生命周期的东西。

第五部分:自定义布局-->显示图像
iOS-Main-细讲图片轮播_第37张图片
思维导图

创建cell


iOS-Main-细讲图片轮播_第38张图片
创建cell

初始化-打断点测试


iOS-Main-细讲图片轮播_第39张图片
初始化

替换系统的cell,只替换了注册中的系统cell
iOS-Main-细讲图片轮播_第40张图片
替换系统的cell

运行,测试结果如图:
iOS-Main-细讲图片轮播_第41张图片
测试结果

添加图像视图


iOS-Main-细讲图片轮播_第42张图片
添加图像视图-测试

iOS-Main-细讲图片轮播_第43张图片
更改上图

iOS-Main-细讲图片轮播_第44张图片
给外界提供url接口

iOS-Main-细讲图片轮播_第45张图片
set方法设置

iOS-Main-细讲图片轮播_第46张图片
传值
第五部分:实现轮播,可以左右拖拽

iOS-Main-细讲图片轮播_第47张图片
思维导图

做到这个时候,我们发现我们的轮播图只能往右拖,而不能往左拖。而,这个时候我们就要考虑, 如果需要轮播图往左拖,我们该怎么办呢?
请看下图的思路:
我们在图片定位于图片位置,在,左边在加上一组:
基本思路
iOS-Main-细讲图片轮播_第48张图片
基本思路

我们将,图下的数据源*2 就相当与加上了一组,但是一运行,就会会造成崩溃。
iOS-Main-细讲图片轮播_第49张图片
加上一组 *2

会发现数组越界了
iOS-Main-细讲图片轮播_第50张图片
数组越界

越界在哪呢?怎么解决呢?
要想解决我们需要,我们已经把图片分成两组,但是因为我们有三张图片,6个位置。我们可以取模%,来解决数组越界问题,如下图:
iOS-Main-细讲图片轮播_第51张图片
取模

那么怎么让图片往左移动呢,应该让图片,初始化第二组。我们找到构造函数,让它滚动过去就可以了,如下图:
iOS-Main-细讲图片轮播_第52张图片

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

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

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


iOS-Main-细讲图片轮播_第53张图片
1

iOS-Main-细讲图片轮播_第54张图片
2

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


iOS-Main-细讲图片轮播_第55张图片

提示
第六部分:无限轮播的实现
iOS-Main-细讲图片轮播_第56张图片
思维导图

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


iOS-Main-细讲图片轮播_第57张图片

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


iOS-Main-细讲图片轮播_第58张图片
定位-右

同样是,当滚动到第一张时,还要往左滚,我们将图片定位于下图样式:
iOS-Main-细讲图片轮播_第59张图片
定位-左

那么,我们就要监听它滚动的位置:

遵守协议,设置代理


iOS-Main-细讲图片轮播_第60张图片
遵守协议,设置代理

实现方法无限轮播
iOS-Main-细讲图片轮播_第61张图片
无限轮播

这时候,还有一个bug,当我们快速滚动时,会造成下的卡顿
原因是,当它跳到最后一张时,他需要做一个contentoffset的一个切换。一当切换了,用户的手势就会不连贯
解决如下:
iOS-Main-细讲图片轮播_第62张图片
3

iOS-Main-细讲图片轮播_第63张图片
300

这样怎么也不会卡了。。。
iOS-Main-细讲图片轮播_第64张图片
整体思路

终于赶完了,完毕!!!

你可能感兴趣的:(iOS-Main-细讲图片轮播)