WXNavigationBar

类似微信一样的导航栏

Features
Requirements
安装
实现原理
开始使用
- 基于 UINavigationController 的配置
- 基于 UIViewController 的配置
高级用法
注意点
- Child View Controller
License

Features

支持设置导航栏背景颜色
支持设置导航栏背景图片
支持Large Title模式
支持iOS 13 暗黑模式
支持全屏手势返回
同使用UINavigationBar一样简单

Requirements

iOS 9.0+
Xcode 11.0+
Swift 5.0+

安装

CocoaPods

WXNavigationBar 可以通过CocoaPods安装，在Podfile中添加

use_frameworks!

pod 'WXNavigationBar', '~> 2.3.6'

Carthage

WXNavigationBar 也可以通过Carthage进行安装，你可以添加如下代码到 Cartfile中：

github alexiscn/WXNavigationBar

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/alexiscn/WXNavigationBar.git", .upToNextMajor(from: "2.3.6"))
]

实现原理

WXNavigationBar通过将系统导航栏设为透明，在View中添加一个NavigationBar相同大小，相同位置的View作为假的导航栏。

原始的UINavigationBar还是用于处理手势相关逻辑，WXNavigationBar用于展示部分，比如背景颜色、背景图片等。

所以你可以像平常使用UINavigationBar一样，当你需要处理导航栏显示的时候，使用WXNavigationBar。

开始使用

在AppDelegate.swift中配置:

import WXNavigationBar

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // ...
    WXNavigationBar.setup()    
}

使用WXNavigationBar不需要特殊的初始化配置，默认的就如同微信中的导航栏一样。当你需要配置时，有两种方式可以配置。使用WXNavigationBar.NavBar中的属性对UINavigationController进行配置，该配置对所有的ViewController都生效，或者重写UIViewController中的相关属性对UIViewController进行配置。

基于 UINavigationController 的配置

在AppDelegate.swift中全局配置

import WXNavigationBar

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // ...
    
    // configure WXNavigationBar
    // WXNavigationBar.NavBar.backImage = UIImage(named: "xxx")    
}

有如下的这些配置选项：

/// 导航栏返回按钮
public static var backImage: UIImage? = Utility.backImage

/// 自定义视图定制导航栏返回按钮
public static var backButtonCustomView: UIView? = nil
        
/// 导航栏背景图片
public static var backgroundImage: UIImage? = nil

/// 导航栏背景颜色
public static var backgroundColor: UIColor = UIColor(white: 237.0/255, alpha: 1.0)

/// 导航栏的tintColor
public static var tintColor = UIColor(white: 24.0/255, alpha: 1.0)

/// 导航栏底部阴影图片
public static var shadowImage: UIImage? = UIImage()

/// 是否启用全屏左滑手势
public static var fullscreenPopGestureEnabled = false

基于 UIViewController 的配置

你也可以通过重写 WXNavigationBar支持的属性对制定的ViewController进行配置。

背景颜色

你可以通过如下属性设置导航栏的背景颜色

/// Background color of fake NavigationBar
/// Default color is UIColor(white: 237.0/255, alpha: 1.0)
override var wx_navigationBarBackgroundColor: UIColor? {
    return .white
}

背景图片

你可以配置导航栏的背景图片：

override var wx_navigationBarBackgroundImage: UIImage? {
    return UIImage(named: "icons_navigation_bar")
}

系统样式的导航栏

当你需要使用系统样式得导航栏时，可以将 wx_useSystemBlurNavBar设为true:

override var wx_useSystemBlurNavBar: Bool {
    return true
}

导航栏 barTintColor

override var wx_barBarTintColor: UIColor? {
    return .red
}

导航栏 tintColor

override var wx_barTintColor: UIColor? {
    return .black
}

导航栏阴影图片

你可以设置导航栏底部黑线图片，比如是纯色的图片，或是渐变的图片。

override var wx_shadowImage: UIImage? {
    return UIImage(named: "icons_navigation_bar_shadow_line")
}

导航栏阴影图片

为了方便起见，可以使用wx_shadowImageTintColor来指定导航栏底部黑线的颜色，如果使用了wx_shadowImageTintColor，则wx_shadowImage会被忽略。

override var wx_shadowImageTintColor: UIColor? {
    return .red
}

导航栏返回按钮图片

你可以给特定的ViewController设置特定的返回按钮图片：

override var wx_backImage: UIImage? {
    return UIImage(named: "icons_view_controller_back_image")
}

导航栏返回按钮自定义

你可以创建自定义视图来设定自定义返回按钮：

override var wx_backButtonCustomView: UIView? {
    let label = UILabel()
    label.text = "back"
    label.textAlignment = .center
    return label
}

禁用返回手势

你可以在特定的ViewController中禁用手势返回：

override var wx_disableInteractivePopGesture: Bool {
    return true
}

启用全屏返回手势

你可以在特定的ViewController启用全屏手势返回。默认是整个页面都会响应手势返回，通过wx_interactivePopMaxAllowedDistanceToLeftEdge修改距离页面边缘的距离。

override var wx_fullScreenInteractivePopEnabled: Bool {
    return true
}

全屏手势返回距离

override wx_interactivePopMaxAllowedDistanceToLeftEdge: CGFloat {
    return view.bounds.width * 0.5
}

高级用法

这里列出了WXNavigationBar的一些高级用法：

导航栏透明

有多种方式可以设置导航栏透明：

设置透明度

wx_navigationBar.alpha = 0

设置隐藏

wx_navigationBar.isHidden = true

设置背景颜色

override var wx_navigationBarBackgroundColor: UIColor? {
    return .clear
}

动态更新导航栏样式

参考 MomentViewController