实现主页的导航栏渐变效果过程中遇到的坑!

---恢复内容开始---

  项目最近要实现导航栏的渐变效果,类似于京东手机App的主页导航栏效果。首页导航栏下拉渐变显示,上拉隐藏,只剩下个按钮和搜索框。

  虽然之前没有做过,可是大概是实现思路还是有的。我的想法就是监听当前页主体集合视图的偏移量,来修改导航栏颜色的透明度。

  起手就干。

   

  做着做着就发现,导航栏的修改,并不是想象中那么容易。

  1.导航栏的结构复杂

    如果你给导航栏设置backGroundColor 这是没有用的,因为我们平时肉眼看到的导航栏视图,其实是backgroundView后面的一层

  imageView ,所以要设置导航栏颜色,是要把一张有颜色的图片付给这个imageView。

    

  2.导航栏的局限性

    导航控制器是一个整体,如果你在一个页面里,跳转到另外一个页面,实际上是导航栈的堆栈过程,就是说,还是那个导航栏。所以,

  我没有办法去实现自定义当前页面的导航栏。

  3.跳转动画的坑

    如果在父页面把导航栏隐藏,跳转到子页面的时候,就会出现导航栏的出现和消失十分突兀的情况。那是因为,如果你在导航控制器

  的viewWillDisappear或类似方法里面隐藏导航栏,在被跳转到的页面里面显示导航栏的话,这两个页面的视图在跳转期间是同时出现的,

  这就会造成导航栏的隐藏和显示的时机不正确,而且上面正常的跳转动画。 所以这种方法也是行不通的。

  可是得把大概得功能做出来先,我就索性把主页的导航栏直接给隐藏掉了,自定义两个功能按钮和一个uitextField放到self.view上面去,

  并且设置他们的frame根据主体集合视图的偏移量去改变。(就是跟着页面走)

  另外还需要在这三个控件的下方铺设一个64高度的uiview ,来伪造一个导航栏。

    主体的实现代码如上图。

    

    那么,最大的问题来了!

    就是跳转动画,非常突兀。

    我用了一整天的时间去调,找各种demo。发现还是解决不鸟这个bug。

    请教公司大神,直接给我设一个属性!!!!

    就好了。 主页导航栏的隐藏,正常的跳转动画。类似的效果就是把个页面的导航栏独立开来,所以就可以实现正常的动画效果! 无缝跳转。

    没有突兀的出现和消失,也没有出现跳转时的导航栏消失。

     

    此时我的内心是奔溃的。

         

  最终的效果如图。

  

  就是这句代码,解决了我一天的困扰!!!

  印象十分深刻,所以纪录下来。

  

  属性是来自于这个框架。是一个关于全屏幕手势的框架,没想到却能解决我这个问题,也算是一个意外发现。

  强力推荐。

---恢复内容结束---

原文地址:https://www.cnblogs.com/ChanYuCung/p/6126008.html