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
如何优化页面切换时，导航栏的过渡显的相对自然？
好了，先总结一下，我们遇到的问题：
- 当 UITabBarController 作为 rootViewController 时，嵌套 UINavigationController，在页面切换时，如何做到 TabBar 显示与隐藏自如？
- 有些页面需要隐藏导航栏，有些又面要显示，在页面切换时，如何控制 NavigationBar 显示与隐藏自如？
- 如何自定义不同风格的导航栏？
- 如何做到页面切换时，导航栏的过渡自然而不生硬？
二、掌控 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 在页面切换时，我们确实解决了这个小问题，但是随之又带来了新问题：
- 我们 rootViewController 是 UITabBarController，有 5 个 UINavigationController + VC，难道每个对应的下一级页面都要这么做？
- 实际项目中，我们所有的 UIViewController 肯定都有一个共同的基类：BaseViewController，一般不会有多个这样的基类，但如果在 BaseViewController 的 init 构造器中处理，其结果就会导致和开始的情况一样，push 隐藏，pop 仍旧不会显示，那该如何统一呢？
三、统一处理
3.1、统一基类 BaseViewController
首先，我们要统一基类，现在可能没用，但常识上大家都知道，肯定会封装一些内容，这些封装的内容也会在后续文章中不断的去丰富！
- 新建『New Group』，命名为：BaseControllers；
- 新建『New File...』，选择『Cocoa Touch Class』，如下，然后点完成即可；
base-vc.png
该基类我们暂时什么都不干，然后，将我们之前创建的所有 ViewController 的继承换成该 BaseViewController，例如：
re-inherit.png
3.2、创建继承 UINavigationController 的子类 CustomNavigationController
CustomNavigationController.png
我们先来捋一捋思路：
- 在一级页面中，添加 hidesBottomBarWhenPushed，虽然 push OK，但 pop 不OK；
- 在二级页面中，只有在 init构造器中添加 hidesBottomBarWhenPushed ，push & pop 才都OK；
从这两条中，我们可以看出，hidesBottomBarWhenPushed 属性需要添加在非嵌套在 UITabBarController 的 ViewController 上，且在初始化时添加才能正常，而我们 push 时，实际上是通过 UINavigationController 的 pushViewController 方法来进行跳转的，因此，我们最好的解决方案就是：
- 继承 UINavigationController；
- 重写 pushViewController 方法；
- 根据 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 的显示与隐藏就到这里，欢迎交流！谢谢。
网友评论