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

3,956 阅读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 没有)。