咱们经常运用 UINavigationController 做页面导航,当 push 到下一级页面的时分,系统会默许给咱们导航栏上添加一个回来按钮,便利回来上一级,默许的回来按钮长这样:

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

可是大多时分咱们并不想运用这种样式,iOS 供给了两个特点 backIndicatorImagebackIndicatorTransitionMaskImage 来修正默许的回来箭头。

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

单个页面设置

咱们先在 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 ControllerNavigation Bar,然后在右侧的工具栏中将 BackMask 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新知”,每天准时共享一个新知识,这里只是同步,想要及时学到就来重视我吧!