---恢复内容开始---
项目最近要实现导航栏的渐变效果,类似于京东手机App的主页导航栏效果。首页导航栏下拉渐变显示,上拉隐藏,只剩下个按钮和搜索框。
虽然之前没有做过,可是大概是实现思路还是有的。我的想法就是监听当前页主体集合视图的偏移量,来修改导航栏颜色的透明度。
起手就干。
做着做着就发现,导航栏的修改,并不是想象中那么容易。
1.导航栏的结构复杂
如果你给导航栏设置backGroundColor 这是没有用的,因为我们平时肉眼看到的导航栏视图,其实是backgroundView后面的一层
imageView ,所以要设置导航栏颜色,是要把一张有颜色的图片付给这个imageView。
2.导航栏的局限性
导航控制器是一个整体,如果你在一个页面里,跳转到另外一个页面,实际上是导航栈的堆栈过程,就是说,还是那个导航栏。所以,
我没有办法去实现自定义当前页面的导航栏。
3.跳转动画的坑
如果在父页面把导航栏隐藏,跳转到子页面的时候,就会出现导航栏的出现和消失十分突兀的情况。那是因为,如果你在导航控制器
的viewWillDisappear或类似方法里面隐藏导航栏,在被跳转到的页面里面显示导航栏的话,这两个页面的视图在跳转期间是同时出现的,
这就会造成导航栏的隐藏和显示的时机不正确,而且上面正常的跳转动画。 所以这种方法也是行不通的。
可是得把大概得功能做出来先,我就索性把主页的导航栏直接给隐藏掉了,自定义两个功能按钮和一个uitextField放到self.view上面去,
并且设置他们的frame根据主体集合视图的偏移量去改变。(就是跟着页面走)
另外还需要在这三个控件的下方铺设一个64高度的uiview ,来伪造一个导航栏。
主体的实现代码如上图。
那么,最大的问题来了!
就是跳转动画,非常突兀。
我用了一整天的时间去调,找各种demo。发现还是解决不鸟这个bug。
请教公司大神,直接给我设一个属性!!!!
就好了。 主页导航栏的隐藏,正常的跳转动画。类似的效果就是把个页面的导航栏独立开来,所以就可以实现正常的动画效果! 无缝跳转。
没有突兀的出现和消失,也没有出现跳转时的导航栏消失。
此时我的内心是奔溃的。
最终的效果如图。
就是这句代码,解决了我一天的困扰!!!
印象十分深刻,所以纪录下来。
属性是来自于这个框架。是一个关于全屏幕手势的框架,没想到却能解决我这个问题,也算是一个意外发现。
强力推荐。
---恢复内容结束---