怎么把顶部这个navigationbar设置为透明呢,能够让下面的图片显示出来,但是返回按钮不透明?

[图片]
关注者
176
被浏览
48,174

17 个回答

16-5-20 0.0.3版发布

说点儿这个版本bugfix过程中有意思的东西。

先说说之前版本的bug。当我们将UINavigationBar的backgroundImage设置为[UIImage new]时,translucent必须同时为YES,才能实现背景透明的效果,评论中

@justin

给我提了一个iusse,就是设置appearance的translucent为NO时,会有两个bug,第一原来设置了useTransparentNavigationBar为YES的vc,都不透明了,第二pushViewController的时候,fakeBar的位置不正常,向下多了64px。

我开始想修正也很简单,无非就是取一下appearance,然后根据translucent调整一下就好了。但是万万没想到,appearance的translucent竟然在任何情况下都返回NO,看代码,有兴趣的同学可以试一下

UINavigationBar.appearance.translucent = NO;
NSLog(@"%@", @(UINavigationBar.appearance.translucent)); //always return 0

解决这个问题并不难,只要在HHBaseVeiwController的viewWillAppear里用静态变量保存一下首次出现时navbar的当前translucent就可以了。但是有意思的是为什么我们手动设置了YES,返回值还是0,难道是apple的bug?

这个就涉及到_UIAppearance的东西了,首先我们看UINavigationBar的translucent是有一个UI_APPEARANCE_SELECTOR,这个表示我的当前属性是可以通过appearance proxy进行设置,所以问题来了,_UIAppearance为什么在invoke UINavigationBar的isTranslucent时,一直返回NO

挖个坑,等我有时间上hopper看一下

--------------------------------------------------------------------------------------------

16-1-27 更新

原型开源

github.com/shuoshi/HHNa

可以直接用pod安装,么么哒

现在切换的时候有title会有1px的抖动,设置完背景的话就好了,我查查原因,看github更新吧~

----------------------------------------------------------------------------------------------

原答案

这个问题我看过无数应用了,市面上99%以上的app都没处理好这个细节,只有微信红包处理的还不错。有几个应用用的是flipboardNavigationBar,直接用addChildViewController模拟系统的navigationbar,就不说了,我这里只讲讲系统的怎么优雅地实现非透明nav和透明nav界面,透明nav和非透明nav界面的滑动返回和取消

我们先来看一下微博怎么做得处理,在从微博列表页进入个人页面的时候,你仔细看一下

列表页的头部navbar直接透明了,再来看一下从个人详情页返回的时候

上面直接罩了一层navbar,然后滑动返回取消的时候,上面这层直接消失了

不过微博这个算是不错了,100分满分的话,我给它50分好了

然后我们来看看QQ

QQ采用了disclove的动画方式,较为平滑的处理了这个问题

唯一的问题在于取消的时候会因为在聊天页面的viewWillAppear里动画UIView animation didFinish的处理中,最终会让navbar显示出来,所以取消后,会先看到一条navBar,之后瞬间消失

这个也就是个70分的水平,毕竟返回后再取消的次数比较少

最后我来说说微信是怎么处理的,看到那个微信的红包领取页面滑动返回的那个瞬间,我知道,只有微信会在这么细节的处理上尽心竭力,只有微信能做到如此丝般顺滑,那么微信是怎么做到的呢

借助cycript和Clutch,我看到了一个可疑的函数:addFakeNaviBar,在滑动返回时,看了下两个controller的view层级结构,终于了解到在滑动返回时,微信将共用的这个navbar做了一个背景透明处理,同时将非透明navbar界面上加了一个假的navbar,只有背景色,没有navigationItem

最后来看看我司的 “会会”

从非透明到透明

从透明到不透明

这个版本还在开发中,还没上线到appstore,等我发完版没什么问题了,就把原型开源出来

你问我怎么知道那些应用是怎么做的?妈蛋,我几乎尝试了所有的可能,从自定义animator,到childViewController,最后cycript微信,我容易吗?!你试试几个月不停重构同一块代码试试,就这个细节,现在随便一个应用,我看上一眼就知道它到底怎么实现的这块东西

这个问题我已经解决了,并且将代码开源了出来。传送门在这:

DanisFabric/RainbowNavigation · GitHub

由于zhihu不能放gif,所以可以到Github主页去看具体的动图。

具体思路:

1. 这篇文章能够做到UINavigationBar动态改变颜色:

动态修改UINavigationBar的背景色

2. 我定制UINavigationController的delegate,来实现在Push/Pop操作时改变颜色

优点:

1. 轻松集成,将navigationController绑定给RainbowNavigation就OK了

2. 因为RainbowNavigation是通过delegate苹果自己提供的转场api来做的,所以不会对你使用UINavigationController造成任何影响