iOS Swift5从0到1系列（六）：学习UINavigationController（4）：自定义导航栏+完美过渡+统一返回按钮

UINavigationController 小系列 【源码 Github 传送门】：

学习UINavigationController（1）：基础
学习UINavigationController（2）：底部TabBar的显示与隐藏
学习UINavigationController（3）：NavigationBar 显示与隐藏
学习UINavigationController（4）：自定义导航栏+完美过渡+统一返回按钮

一、前言

上篇，我们虽然给出了统一处理 navigationBar 的显示与隐藏，但用户体验非常差，在上篇最后，我说到了自定义导航栏，我们能够实现如下功能：

• ViewController 控制各自的导航栏；
• push & pop 相互不会影响；
• 基于以上两点，即便颜色、背景不一样，都能较为完美的过渡；

废话不多说，直接开干！

二、自定义导航栏

2.1、透明化导航栏

在添加自定义导航栏前，我们需要做一件事，就是修改一个导航栏，怎么修改呢？有两种办法：

• 通过 isHidden 来隐藏导航栏；
• 直接将半透明的背景变为全透明；

我们考虑到隐藏导航栏可能会存在不确定的系统因素影响，因此，我们建议还是保留系统导航栏，只不过将其完全透明化，以及还可以利用系统的渐变过渡动画，提升用户体验；而完全透明化的方式很简单，通过设置 navigationBar.setBackgroundImage:for: 的方式来设置一张透明的 UIImage 即可；UIImage() 直接构造就是透明的，因为此时 cgImage 默认为 nil 。

同时，导航栏下还有一条阴影线条，该线条也是一个 UIImage，因此，同样将其透明化；其它代码不变，我们统一在基类 BaseViewController 中修改即可，如下图（左）：

transparent-nav-bar.png

然后运行，可以看到上图中，我们的导航栏已经透明，只剩下一个标题。

在上一篇我就提到过，修改 navigationBar 将会影响当前 navigationController 栈中所有的 ViewController，因此，所有页面的导航栏都将透明，接下来，我们将提供一个方法，来添加一个新的导航栏背景（提前透露：该新加的导航栏背景，实际是覆盖在原来的导航栏之上而已）。

2.2、添加导航栏背景（覆盖原始导航栏）

我们先来看一下修改后的运行图，直观感受一下：

self-def-navigation-bar.gif

整体效果应该说，对比上一篇，那种糟糕的用户体验，这次几乎完全达到了我们想要的结果，同样，还是统一处理，在基类 BaseViewController 中修改即可，代码如下：

class BaseViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置导航栏背景为透明色图片
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        // 设置导航栏阴影为透明色图片
        navigationController?.navigationBar.shadowImage = UIImage()
    }
    
    // 添加自定义导航栏背景
    func addNavBar(_ color: UIColor) {
        // 目前有点小瑕疵，高度是写死的，并没有考虑到 SafeArea
        // 我会在之后的一篇中分析 SafeArea 时，给出如何正确的适配不同机型
        let size = CGSize(width: view.bounds.width, height: 91)
        let navImageView = UIImageView(image: UIImage(size: size, color: color))
        view.addSubview(navImageView)
    }
}

在需要使用的地方，调用一下该方法即可，例如，在二级页面中调用：

class ViewController: BaseViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
        title = "二级页面"
        addNavBar(.cyan)
    }
}

如果想完全让首页的导航栏不可见，我们只需把 title 去掉，就真的完全透明不可见了。

三、统一返回按钮

我们已经完成了大部分的统一工作，我想，如果我不把统一返回按钮的方案给出来，就感觉整体方案少了点什么，在 UINavigationController 最后，我再给出导航栏上左侧按钮的统一封装，基本上就完成了 UINavigationController 这个小系列，实现也很简单，估计大家都想到了，在 BaseViewController 中统一修改就行，但你还记得我之前说的那个 backBarButtomItem 和 leftBarButtomItem 的规则吗？

代码实现如下：

class BaseViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /// 如果所有的 ChildViewController 都继承于 BaseViewController，且想在 viewDidLoad 中统一设置导航栏的『左按钮』，
        /// 那么，只能设置 backBarButtonItem ，而不能设置 leftBarButtonItem，原因如下：
        ///
        /// previousVC 是上一个页面，nextVC 是下一个页面，当发生 push 时，有如下规则：
        /// 1、如果 nextVC 的 leftBarButtonItem != nil，那么将在 navigationBar 的左边显示 nextVC 指定的 leftBarButtonItem；
        /// 2、如果 nextVC 的 leftBarButtonItem == nil，previousVC 的 backBarButtonItem != nil，那么将在 navigationBar 的左边显示 previousVC 指定的 backBarButtonItem；
        /// 3、如果两者都为 nil 则：
        ///   3.1、nextVC 的 navigationItem.hidesBackButton = YES，那么 navigationBar 将隐藏左侧按钮；
        ///   3.2、否则 navigationBar的左边将显示系统提供的默认返回按钮；
        ///
        /// 我们从以上规则中发现：
        /// 1、leftBarButtonItem 的优先级比 backBarButtonItem 要高；
        /// 2、backBarButtonItem 是来自上一个页面，如果当前 VC 是第一个页面，那么它没有上一个页面，也就没有 backBarButtonItem；
        /// 3、leftBarButtonItem 是来自当前页面，与上个页面无关，因此，如果当前 VC 是第一个页面，那么设置了 leftBarButtonItem 就会很奇怪；
        ///
        navigationItem.backBarButtonItem = UIBarButtonItem.init(title: "返回", image: nil, primaryAction: nil, menu: nil)
        navigationItem.backBarButtonItem?.tintColor = .black
        
        ......
    }
    ......
}

运行后如下图：

back-with-text.png

如果想只留箭头，去掉文字呢？嗯，设置一下 image，优先级比文字高：

back-without-text.png

OK！至此，本小小系列 UINavigationController 总算圆满完结~ 另外，Swift 上所有的实现，OC 完全可以实现，所有的思路和实现和 Swift 一样，只是 api 名字有一点点不同（OC 有前缀，Swift 没有）。