可以任意定制导航栏背景的一个思路

可以任意定制导航栏背景的一个思路

在实际开发中经常遇到设计师给的视觉稿：有些页面导航栏背景是透明的，有些页面则是常规导航栏。 由于导航栏是所有子页面共用的，一旦其中某个页面单独设置了导航栏背景，就需要负责保存之前的状态，在消失的时候恢复原来的状态。 系统提供如下方法来设置完全透明的导航栏背景 UIImage *clearImage = [UIImage imageWithColor:[UIColor clearColor]]; [[UINavigationBar appearance] setBackgroundImage:clearImage forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault]; [UINavigationBar appearance].shadowImage = clearImage; 如果使用上面的方法来满足视觉稿的效果，需要解决两个问题：

1. 每个页面需要频繁地保存和恢复状态
2. 在页面之间切换时需要保证导航栏的过渡效果自然

那么，网络上做的比较好的APP，它们是采用了什么方式来解决这两个问题的呢？

微博

微博的个人主页页面导航栏是透明的，使用之前介绍的方法设置之后的就是这效果。

当滑动返回的时候，看一看它是怎么解决导航栏过渡问题的

其实，我们看到的只是导航栏的一个快照，只是一张图片而已，真实的导航栏已经被掉包，y 坐标被设为了 -64，整个导航栏已经被移出屏幕外了。 微博是给每个子页面都创建一个当前页面的导航栏快照，页面间切换的时候先隐藏原始导航栏，再显示导航栏快照，在切换结束时再把真实的导航栏移回原位。

微信

微信的收付款页面导航栏是透明的，使用之前介绍的方法设置之后的就是这效果。

页面切换时，导航栏的过渡效果和微博完全不一样，这说明微信自己研究了一套方法，来看看到底是什么

原来是做了一个假的导航栏，这个假的导航栏除了背景没有别的多余的东西了，真的导航栏还在，只是背景是全透明的，这样页面切换的时候过渡效果就比较自然。

总结得出思路

微博和微信的思路都是把导航栏的背景设置控制在当前的页面中，这样在页面切换时就不会受到影响，同时也解决了开头提到的问题。 如果要在现有项目中进行全局调整，借鉴上面分析得出的思路，一个比较好的方案就是：

1. 把导航栏全局设置为透明（在 BaseNavigationController 中设置）
2. 每个页面都要有一个「假的」导航栏（在 BaseViewController 中设置）
3. 基类（BaseViewController）提供设置「假导航栏」背景的方法

有了可行的思路，代码就很简单了，我已经把以上思路实践到公司的项目中进行改造，实际效果挺不错。