如何修改导航栏返回按钮图标

我们经常使用 UINavigationController 做页面导航，当 push 到下一级页面的时候，系统会默认给我们导航栏上增加一个返回按钮，方便返回上一级，默认的返回按钮长这样：

但是大多时候我们并不想使用这种样式，iOS 提供了两个属性 backIndicatorImage 和 backIndicatorTransitionMaskImage 来修改默认的返回箭头。

接下来讲讲如何修改这个返回图标。

单个页面设置

我们先在 Assets 里增加我们想要自定义的返回图片：

然后在需要设置的页面 viewDidLoad 里设置这两个属性即可：

class ViewController1: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        navigationController?.navigationBar.backIndicatorImage = UIImage(named: "back")
        navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named: "back")
    }
}

再次运行程序，将会看到返回按钮已经被替换为我们自定义的图标：

全局设置

更多时候，一个 App 为了保持全局统一性，会将所有的导航栏返回按钮都设置成同一个图标，这时只需要在 AppDelegate 中启动成功的时候为整体的 UINavigationBar.appearance() 设置这两个属性：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    
    let backImage = UIImage(named: "back")
    UINavigationBar.appearance().backIndicatorImage = backImage
    UINavigationBar.appearance().backIndicatorTransitionMaskImage = backImage

    return true
}

设置完成之后，所有 push 的页面返回按钮都为 back 图标了。

通过 Storyboard 设置

除了使用代码设置之外，还可以使用 Storyboard 来操作，选中 Navigation Controller 的 Navigation Bar，然后在右侧的工具栏中将 Back 和 Mask Back 设置成自定义按钮即可。

iOS 13 更新

在 iOS 13 中为了更方便地设置导航栏的外观，UINavigationBar 上增加了三个属性：

/// Describes the appearance attributes for the navigation bar to use when it is displayed with its standard height.
@available(iOS 13.0, *)
@NSCopying open var standardAppearance: UINavigationBarAppearance

/// Describes the appearance attributes for the navigation bar to use when it is displayed with its compact height. If not set, the standardAppearance will be used instead.
@available(iOS 13.0, *)
@NSCopying open var compactAppearance: UINavigationBarAppearance?

/// Describes the appearance attributes for the navigation bar to use when an associated UIScrollView has reached the edge abutting the bar (the top edge for the navigation bar). If not set, a modified standardAppearance will be used instead.
@available(iOS 13.0, *)
@NSCopying open var scrollEdgeAppearance: UINavigationBarAppearance?

• standardAppearance：当导航栏以标准高度显示时使用的外观属性。

• compactAppearance：当导航栏以紧凑高度（比如小屏手机横屏时）显示时使用的外观属性。如果未设置，将使用 standardAppearance。

• scrollEdgeAppearance：当这个页面上有 UIScrollView，并且滚动到达与导航栏相邻的边缘（导航栏的顶部边缘）时使用的导航栏的外观属性。如果未设置，将使用修改后的 standardAppearance

我们来分别试一下这三个属性，我又向 Assets 里添加了两张图标：

然后在 AppDelegate 里设置这是三个属性：

let image = UIImage(named: "back")
let image1 = UIImage(named: "back1")
let image2 = UIImage(named: "back2")

let appearance = UINavigationBarAppearance()
appearance.configureWithDefaultBackground()
appearance.setBackIndicatorImage(image, transitionMaskImage: image)

let appearance1 = UINavigationBarAppearance()
appearance1.configureWithDefaultBackground()
appearance1.setBackIndicatorImage(image1, transitionMaskImage: image1)

let appearance2 = UINavigationBarAppearance()
appearance2.configureWithDefaultBackground()
appearance2.setBackIndicatorImage(image2, transitionMaskImage: image2)

// 默认导航栏外观
UINavigationBar.appearance().standardAppearance = appearance
// 紧凑型导航栏外观
UINavigationBar.appearance().compactAppearance = appearance1
// UIScrollView 滚动到导航栏顶部的时候外观
UINavigationBar.appearance().scrollEdgeAppearance = appearance2

看下效果：

通过这三个属性，你可以在不同状态下设置不同的返回按钮。

iOS 15 更新

在 iOS 15 中，又增加了一个新的外观属性，compactScrollEdgeAppearance 当导航栏以紧凑型显示并且有的 UIScrollView 的时候并且已滚动到导航栏的顶部边缘时要使用的外观属性。如果未设置，则首先读取 scrollEdgeAppearance，如果也没设置，则读取 compactAppearance，如果仍没设置，最后保底使用 standardAppearance。

/// Describes the appearance attributes for the navigation bar to use when it is displayed with its compact heights, and an associated UIScrollView has reached the edge abutting the bar. If not set, first the scrollEdgeAppearance will be tried, and if that is nil then compactAppearance followed by a modified standardAppearance.
@available(iOS 15.0, *)
@NSCopying open var compactScrollEdgeAppearance: UINavigationBarAppearance?

最后看下这个效果：

点击下方公众号卡片，关注我，每天分享一个关于 iOS 的新知识

本文同步自微信公众号 “iOS新知”，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！