美文网首页iOS好文iOS劝退指南
iOS-Main-细学->顶部视图放大

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

作者: 麦穗0615 | 来源:发表于2016-10-05 18:19 被阅读514次

    前言:
    --- 细讲一下,顶部视图下拉放大,其中有很多细节非常值得学习,比如说,分割线的设置,状态栏的设置,向上整体移动和向下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. 滚动指示器的设置
      我们从上边的效果图,可得知,滚动显示器却不在了,为什莫呢?如下图分析:
      分析
      所以呢,在滚动视图的时候,我们就看不到,滚动指示器了。
      该怎么设置呢要?
      解决滚动指示器问题
      效果图:
      效果图
    第三部分 运行时拦截全屏返回手势&导航栏处理细节
    • 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图.

    相关文章

      网友评论

      • 指尖猿:山上有只马 颜色是黑色的。请问你知道是第几只吗:smile:
        ProfessorFan:我也赞同,写的挺棒的
        麦穗0615:要介绍工作吗?求
      • Lxin_:问一个问题啊,页面没有添加scrollView,是怎么走- (void)scrollViewDidScroll:(UIScrollView *)scrollView 这个方法的啊,求解释啊
        麦穗0615:@Lxin_iOS 是的
        麦穗0615:@Lxin_iOS 因为collection那个继承了scroll:smile:
        Lxin_:@Lxin_iOS 因为tableview继承自scrollView吗?
      • 我唔知啊:过程非常详细,楼主用心了,谢谢!
        麦穗0615:@我唔知啊 哎-期待伯乐啊
        我唔知啊:@_正阳_ 凭你那么细心,找工作没问题的。
        麦穗0615:@我唔知啊 thanks-我也是学习,哎-还在找工作

      本文标题:iOS-Main-细学->顶部视图放大

      本文链接:https://www.haomeiwen.com/subject/gjgsyttx.html