iOS-Main-细学->顶部视图放大

前言:
--- 细讲一下，顶部视图下拉放大，其中有很多细节非常值得学习，比如说，分割线的设置，状态栏的设置，向上整体移动和向下offset的变化，图片的裁切等。都是我一点一点截的图！终于弄完了！

最终效果图：

最终效果图

共分为 8 个部分

第一部分顶部放大的准备工作
第二部分添加 headerView
第三部分运行时拦截全屏返回手势&导航栏处理细节
第四部分 AFN加载图像的细节YYWebImage的指示器和头文件的导入方法
第五部分图像放大处理
第六部分图像的整体移动简单实现
第七部分设置分割线和透明度
第八部分设置状态栏颜色
demo下载地址

第一部分顶部放大的准备工作

1. 创建一个工程，并嵌入一个Nav,进行基础布置。

嵌入一个Nav

简单布置nav

2.创建一个类ZYHeaderViewController,并设置其背景颜色为白色。

ZYHeaderViewController

将该类的头文件，导入ViewController.m中，并设置跳转。如下图:

设置跳转

当前效果图:

效果图.gif
3.准备tableView

图1

图2

当前效果:

效果图.gif

第二部分添加 headerView

我们使用HMObjcSugar，你可以pod集成.

1. 布置headerView

布置headerView

当前效果图:

效果图

由上述效果图显示，我们的headerView的下面的行是从3、4开始的，出现了这一个问题。我们在看一下视图层次结构。如下:

视图层次结构

我们得知了，1、2行，被headerView挡住了。
2. 总结一下问题
我们要解决的:
1）把导航栏隐藏起来,并设置状态栏

导航栏隐藏起来,并设置状态栏

2）调整表格与headerVIew的间距
我们利用contentInset来调整表格与headerView的间距，如下图:

调整表格与headerView的间距

运行效果图如下:

运行效果图

由上图我们可知，第 0 行，与headerView之间，还多20，那是因为如下图所示的原因，所以这样解决:

解决

效果图:

效果图

滚动指示器的设置
我们从上边的效果图，可得知，滚动显示器却不在了，为什莫呢？如下图分析:

分析

所以呢，在滚动视图的时候，我们就看不到，滚动指示器了。
该怎么设置呢要?

解决滚动指示器问题

效果图:

效果图

第三部分运行时拦截全屏返回手势&导航栏处理细节

1.发现问题

看图

问题:我们知道，上述是可以用手拖动的，但是，我们拖到另一个控制器的时候，我们发现，导航栏消失了，我们返回，回不去了。
怎么解决这个问题呢？
我们知道，我们在tableView这个页面将要显示的时候，隐藏了NAV

显示nav

如图所示，nav，显示了，但是发生了叠加，该怎么解决呢？

animated = YES

第四部分 AFN加载图像的细节YYWebImage的指示器和头文件的导入方法

1. 添加UIImageView

添加UIImageView

2.添加 AFN /YYWebImage

pod

3. AFN 网络加载图片

AFN方法

导入AFN头文件

导入AFN头文件

加载图片，但是不显示

加载图片，但是不显示

从用户的角度考虑，这种情况下，用户会有不好的体验，那我们应该提示用户，应该像下图一样加上一个小菊花，表示在努力工作中ing.

小菊花

小菊花显示

图片加载成功

使用AFN会有个问题，当我们切换的时候，加载的图片总会闪(缓)一下，应为AFN加载图片时，图片如果过大的话，它不会缓存，AFN是用的系统的缓存。

AFN细节

4. YYWebImage 网络加载图片
头文件的导入

头文件的导入

加载图片

加载图片

第五部分图像放大处理

1. 分析
我们要使图片放大处理的话，我们可以使用scrollViewDidScroll：这个代理方法。那么，我们根据什莫让上边的图片放大呢，contentOffset

分析

2. 打印一下contentOffset

图解

3. 设置放大
我们来看放大，我们需要改什莫？
先将headerView和headerViewImage设置成全局，如下图:

headerView-1

headerView-2

headerViewImage-1

headerViewImage-2

下图，达到了下滚放大的效果

下滚放大

但是，我们发现一个问题，图片放大的时候，特别别扭，有点卡顿。那我们怎么解决呢，只有让图片等比例填充即可，如下图:

等比例填充

效果图:

效果图.gif

虽然，这种方法，规避了很多复杂的运算，但是，还有一个很不愉快的问题，当我们返回时，会发生下图这种现象(图像比底View大):

图像比底View大

那我们该怎么办呢？
我们只能裁切一下,如下图:

裁切

效果图：

效果图.gif

问题，解决完毕！！！

第六部分图像的整体移动简单实现

1. 简单的整体移动

简单的整体移动

此时效果图:

效果图.gif

第七部分设置分割线和透明度

1. 问题分析---定点

分析

分析:我们看上面的图，现在我们的需求是，当表格滚到这个位置就不往上滚了，这个效果怎么实现呢？我们看上面是一个状态栏的高度。状态栏 +导航栏的高度是64。

思路

思路:我们让headerView移动到上图位置就不动了,高度我们已经算好了，用headerView - 64 就知道headerView的y值了，定到此位置。

min

当offset = min的时候，是处于图-思路那样
当offset < min的时候，说明，图片慢慢的往上移
当offset > min的时候，说明图片即将移除模拟器
总结如下，当图片在向上整体移动过程中，offset小于min，headerVIew的y值，取 - offset,反之取 - min;

2. 设置透明度

效果图

根据上图，我们分析，我们打印了 offset / min 可知，当整体向上移动的时候从offset / min = 0 开始，到了指定位置offset / min = 1；并且彻底的隐藏，导航栏却显示。

示例代码

效果图:

效果图.gif

但是没有导航栏，那怎么样才能让导航栏出来呢？

2. 设置导航栏
其实，在这种demo中导航栏是没有意思的。步骤如下:

取色

取色

改headerView的背景颜色

改headerView的背景颜色

3. 设置分割线
同样，对于分割线，我们在这个UIView底部，添加一条线，当向上移动时，该线与Nav的底线重合，但是当向下移动时，我们发现这条红线不动，貌似到了图片的脖子处，就此，我们明白，当向下移动时，我们需要改变这条线的位置。
查看层次结构图

查看层次结构图

添加分割线

添加分割线

效果图:

效果图.gif

更改分割线位置

改_lineview

改_lineview

刚才是放大的时候，出现的问题，解决如下:

解决

这样的话，无论放大还是缩小，线的位置永远等于headerView减去自己的位置。

3. 改分割线的颜色
为了，更像

改分割线的颜色

效果图如下:

效果图.gif