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

2016-10-05 本文已影响514人麦穗0615

前言:
--- 细讲一下，顶部视图下拉放大，其中有很多细节非常值得学习，比如说，分割线的设置，状态栏的设置，向上整体移动和向下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的背景颜色

3. 设置分割线
同样，对于分割线，我们在这个UIView底部，添加一条线，当向上移动时，该线与Nav的底线重合，但是当向下移动时，我们发现这条红线不动，貌似到了图片的脖子处，就此，我们明白，当向下移动时，我们需要改变这条线的位置。
查看层次结构图
查看层次结构图
添加分割线
添加分割线
效果图:
效果图.gif
更改分割线位置
改_lineview
改_lineview
刚才是放大的时候，出现的问题，解决如下:
解决
这样的话，无论放大还是缩小，线的位置永远等于headerView减去自己的位置。

3. 改分割线的颜色
为了，更像
改分割线的颜色
效果图如下:
效果图.gif