UINavigationController 小系列（持续更新）：

学习UINavigationController（1）：基础
学习UINavigationController（2）：底部TabBar的显示与隐藏

一、前言

上篇我们分享了 UINavigationController 基础知识，以及导航栏左侧按钮的显示规则，文章的最后，留了个小问题给让大家思考，如何从一级页面 push 到二级页面时，隐藏 tabbar；当然，pop 时，再显示 tabbar。

我们在源码分析中，有讲到过一个 Bool 变量，不知道大家有没有特别注意过，或者自己去尝试过，如下图：

hidesBottomBarWhenPushed.png

上图我特别标注了该变量，该变量是在 UIViewController 中的，那如何使用呢？

本系列仿京东，我们看到大多数电商APP，一级页面的导航栏都是自定义的，也有可能是隐藏；push 到二级页面会使用系列默认的（颜色、左右按钮个数可自定义），但肯定是显示的；如何控制导航栏的显示与隐藏，以及如何自定义导航栏？

同时，我们还应该想到，不同的APP有不同的风格，而这风格可能是导航栏颜色不同，比如主流电商APP，导航栏可能都是红色的，有些页面则是白色；其它的APP可能因为不同的模块功能而展示不同颜色，或者图片；然而，这里会涉及到，用户侧滑返回是，导航栏的过渡过于生硬，如下图：

navigation-bar-bg-color.gif

如何优化页面切换时，导航栏的过渡显的相对自然？

好了，先总结一下，我们遇到的问题：

1. 当 UITabBarController 作为 rootViewController 时，嵌套 UINavigationController，在页面切换时，如何做到 TabBar 显示与隐藏自如？
2. 有些页面需要隐藏导航栏，有些又面要显示，在页面切换时，如何控制 NavigationBar 显示与隐藏自如？
3. 如何自定义不同风格的导航栏？
4. 如何做到页面切换时，导航栏的过渡自然而不生硬？

二、掌控 TabBar 的显示与隐藏

既然我们已经说了，在 UIViewController 中有 hidesBottomBarWhenPushed = true 才能在 push 到下一个页面时隐藏，那我们就先尝试这个属性，先尝试在 HomeViewController 中尝试一下，代码如下：

class HomeViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "首页"
        
        // 若被 UITabBarController 嵌套，则设置该属性进入下一个页面时，隐藏底部 TabBar
        hidesBottomBarWhenPushed = true
        ......
    }
    ......
}

整体截图如下：

home-vc.png

然后运行一下：

hidesBottomBarWhenPushed.gif

然后我们看到，push 到二级页面，确实隐藏了 TabBar，但是 pop 时， TabBar 却没有再显示...如果，这时也许有的人会说，我把这个属性放到二级页面中呢？我们可以试试：

• 先去掉 HomeViewController 中添加的 hidesBottomBarWhenPushed 代码；
• 修改二级页面，如下：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
        
        title = "二级页面"
        
        // 若被 UITabBarController 嵌套，则设置该属性进入下一个页面时，隐藏底部 TabBar
        hidesBottomBarWhenPushed = true
    }
}

再运行，你会发现，这回没有任何的变化....为什么呢？那是因为，我们放置代码的位置不对，我们要放在 init构造器中才行！代码如下：

class ViewController: UIViewController {
    
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        
        // 若被 UITabBarController 嵌套，则设置该属性进入下一个页面时，隐藏底部 TabBar
        hidesBottomBarWhenPushed = true
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
        
        title = "二级页面"
    }
}

然后运行一下：

run-right.gif

OK! TabBar 在页面切换时，我们确实解决了这个小问题，但是随之又带来了新问题：

1. 我们 rootViewController 是 UITabBarController，有 5 个 UINavigationController + VC，难道每个对应的下一级页面都要这么做？
2. 实际项目中，我们所有的 UIViewController 肯定都有一个共同的基类：BaseViewController，一般不会有多个这样的基类，但如果在 BaseViewController 的 init 构造器中处理，其结果就会导致和开始的情况一样，push 隐藏，pop 仍旧不会显示，那该如何统一呢？

三、统一处理

3.1、统一基类 BaseViewController

首先，我们要统一基类，现在可能没用，但常识上大家都知道，肯定会封装一些内容，这些封装的内容也会在后续文章中不断的去丰富！

1. 新建『New Group』，命名为：BaseControllers；
2. 新建『New File...』，选择『Cocoa Touch Class』，如下，然后点完成即可；

base-vc.png

该基类我们暂时什么都不干，然后，将我们之前创建的所有 ViewController 的继承换成该 BaseViewController，例如：

re-inherit.png

3.2、创建继承 UINavigationController 的子类 CustomNavigationController

CustomNavigationController.png

我们先来捋一捋思路：

1. 在一级页面中，添加 hidesBottomBarWhenPushed，虽然 push OK，但 pop 不OK；
2. 在二级页面中，只有在 init构造器中添加 hidesBottomBarWhenPushed ，push & pop 才都OK；

从这两条中，我们可以看出，hidesBottomBarWhenPushed 属性需要添加在非嵌套在 UITabBarController 的 ViewController 上，且在初始化时添加才能正常，而我们 push 时，实际上是通过 UINavigationController 的 pushViewController 方法来进行跳转的，因此，我们最好的解决方案就是：

1. 继承 UINavigationController；
2. 重写 pushViewController 方法；
3. 根据 UINavigationController 中的 viewControllers 该对象来判断是否需要添加 hidesBottomBarWhenPushed 属性；

具体做法如下：

class CustomNavigationController: UINavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    // 重写 pushViewController 方法，不修改 pushViewController 的逻辑
    // 仅在跳转前，判断目标 VC 是否为一级页面还是二级页面，通过 viewControllers.count 来判断：
    // viewControllers.count > 0，那么目标 VC 肯定是第二个页面（即二级页面）；我们就添加上 hidesBottomBarWhenPushed = true
    override func pushViewController(_ viewController: UIViewController, animated: Bool) {
        if viewControllers.count > 0 {
            viewController.hidesBottomBarWhenPushed = true
        }
        super.pushViewController(viewController, animated: animated)
    }
}

如下图：

cnc-realize.png

然后，修改 MainTabBarController，代码如下：

class MainTabBarController: UITabBarController {
    ......
    func initTabBar() {
        let home = CustomNavigationController(rootViewController: HomeViewController())
        home.tabBarItem.title = "首页"
        ......
    }
}

如下图（5 个 VC 即一级页面，都替换掉）：

modify-main-tabbar-ctrl.png

恢复二级页面的代码：

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

最终，我们再次运行效果如下：

perfect-hides-and-show.gif

完美！至此，本篇内容：正确的控制底部 TabBar 的显示与隐藏就到这里，欢迎交流！谢谢。