前言:
--- 细讲一下,顶部视图下拉放大,其中有很多细节非常值得学习,比如说,分割线的设置,状态栏的设置,向上整体移动和向下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
第八部分 设置状态栏颜色
- 1. 需求
当图片越来模糊的时候,状态栏越来越黑- 2.解决
实例代码1
实例代码2
最终结果:请看第一张gif图.
网友评论