UIKit navigation bar 的 back 按鈕設定

• 預設的 back 按鈕文字
• 設定 back 按鈕的顏色
• 設定 back 按鈕的文字
• 隱藏 back 按鈕的文字
• 設定 back 按鈕的圖案

預設的 back 按鈕文字

• 當前一頁的 navigation bar 沒有標題時。

back 按鈕顯示 Back。App 若有設定中文版，在中文介面的 iOS 將顯示返回。

ps: 專案的 Localization 有加入 Chinese, Traditional 才代表 App 有設定中文版。

• 當前一頁的 navigation bar 有標題時。

back 按鈕將顯示前一頁 navigation bar 的標題。

設定 back 按鈕的顏色

• 方法1: 設定 asset 的 AccentColor。

iOS 14 以上版本限定，套用到所有的 back button。

• 方法2: 設定 Global Tint

點選 storyboard 裡的任一元件，從 File inspector 設定 Global Tint，套用到所有的 back button。

• 方法3: 設定 navigation bar 的 Tint Color

設定 navigation bar 的 Tint Color，套用到 navigation bar 上的 back button。

從程式設定的方法如下。

navigationController?.navigationBar.tintColor = .orange

以下寫法則可套用到所有的 back button。

UINavigationBar.appearance().tintColor = .orange

• 方法4: 設定 titleTextAttributes

套用到 navigation bar 上的 back button。

let barAppearance =  UINavigationBarAppearance()
let buttonAppearance = UIBarButtonItemAppearance(style: .plain)
buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.systemOrange]
barAppearance.backButtonAppearance = buttonAppearance
navigationController?.navigationBar.standardAppearance = barAppearance     
navigationController?.navigationBar.scrollEdgeAppearance = barAppearance

ps: 若將 navigationController?.navigationBar 改成 UINavigationBar.appearance()，將套用到所有的 back button。

UINavigationBar.appearance().standardAppearance = barAppearance
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

值得注意的，此方法只會修改文字顏色，< 的顏色並沒有改變。若要修改 < 的顏色，還是要用前面提到的三個方法。

設定 back 按鈕的文字

在前一頁的 view controller 設定 navigationItem.backButtonTitle。

以下圖為例，我們想將尼羅河謀殺案頁面的 back 按鈕從河上謀殺案改成回到前一頁。我們必須在前一頁的 view controller 設定 navigationItem.backButtonTitle。

• 方法 1: 從 Interface Builder 設定

點選上圖紅色框框 controller 裡的 navigation Item。

在 Back Button 的欄位輸入 back 按鈕的文字。

• 方法 2: 從程式設定

假設前一頁的 view controller 類別為 ViewController。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationItem.backButtonTitle = "回到前一頁"
    }
}

隱藏 back 按鈕的文字

在前一頁的 view controller 設定 navigationItem.backButtonTitle。

以下圖為例，我們希望尼羅河謀殺案頁面的 back 按鈕只有 <，沒有文字。因此我們必須在前一頁的 view controller 設定 navigationItem.backButtonTitle。

• 方法 1: 從 Interface Builder 設定

點選上圖紅色框框 controller 裡的 navigation Item。

在 Back Button 輸入一個空白後按 enter。

• 方法 2: 從程式設定

假設前一頁的 view controller 類別為 ViewController。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationItem.backButtonTitle = ""
    }
}

將 backButtonTitle 設成空字串，讓 back 按鈕不再顯示文字。

設定 back 按鈕的圖片

• iOS 13 以上版本

呼叫 setBackIndicatorImage(_:transitionMaskImage:)，傳入 back 按鈕的圖片。

let barAppearance =  UINavigationBarAppearance()
let backButtonBackgroundImage = UIImage(systemName: "list.bullet")      
barAppearance.setBackIndicatorImage(backButtonBackgroundImage, transitionMaskImage: backButtonBackgroundImage)
navigationController?.navigationBar.standardAppearance = barAppearance
navigationController?.navigationBar.scrollEdgeAppearance = barAppearance

ps: 若將 navigationController?.navigationBar 改成 UINavigationBar.appearance()，將套用到所有的 back button。

UINavigationBar.appearance().standardAppearance = barAppearance
UINavigationBar.appearance().scrollEdgeAppearance = barAppearance

除了使用 SF Symbol，我們也可以使用 asset 的圖片。建議採用適當大小的單色圖片，若是圖片太大將造成可怕的排版問題。

let barAppearance =  UINavigationBarAppearance()
let backButtonBackgroundImage = UIImage(named: "peter")       
barAppearance.setBackIndicatorImage(backButtonBackgroundImage, transitionMaskImage: backButtonBackgroundImage)

• iOS 13 之前的版本

let backButtonBackgroundImage = UIImage(systemName: "list.bullet")
let barAppearance = UINavigationBar.appearance()
barAppearance.backIndicatorImage = backButtonBackgroundImage
barAppearance.backIndicatorTransitionMaskImage = backButtonBackgroundImage