美文网首页Swift
iOS Swift5从0到1系列(六):学习UINavigati

iOS Swift5从0到1系列(六):学习UINavigati

作者: 青叶小小 | 来源:发表于2021-03-11 00:12 被阅读0次

    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 没有)。

    相关文章

      网友评论

        本文标题:iOS Swift5从0到1系列(六):学习UINavigati

        本文链接:https://www.haomeiwen.com/subject/gnanqltx.html