如何在 Swift 中設定返回按鈕文字?


預設情況下,檢視控制器在 iOS 中的返回按鈕上顯示“返回”文字和一個箭頭。但是,您可以為返回按鈕項設定自定義標題和圖示。讓我們來看一個如何在 Swift 中設定自定義返回按鈕文字的示例。

在本例中,我們將設定兩個不同的檢視控制器,以檢視返回按鈕的預設行為以及如何設定自定義返回按鈕文字。

第一個檢視控制器設定

在此步驟中,我們將設定第一個檢視控制器以推送第二個檢視控制器。以下是第一個檢視控制器的程式碼。

示例

import UIKit
class FirstViewController: UIViewController {
   private let clickButton = UIButton()
   
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
   
   private func initialSetup() {
  
      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "First Controller"
     
      // button customization
      clickButton.backgroundColor = .darkGray
      clickButton.setTitle("Go to next controller", for: .normal)
      clickButton.setTitleColor(.white, for: .normal)
      clickButton.layer.cornerRadius = 8
      clickButton.addTarget(self, action: #selector(handleClickButtonTapped), for: .touchUpInside)
     
      // adding the constraints to button
      view.addSubview(clickButton)
      clickButton.translatesAutoresizingMaskIntoConstraints = false
      clickButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
      clickButton.widthAnchor.constraint(equalToConstant: 250).isActive = true
      clickButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
      clickButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
   }
   
   @objc private func handleClickButtonTapped() {
      let secondController = SecondViewController()
      self.navigationController?.pushViewController(secondController, animated: true)
   }
}

輸出

第二個檢視控制器設定

在此步驟中,我們將設定第二個檢視控制器。首先,我們將看到返回按鈕的預設行為。以下是設定第二個檢視控制器的程式碼。

示例

import UIKit
class SecondViewController: UIViewController {
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
   
   private func initialSetup() {
   
      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "Second Controller"
   }
}

輸出

在上面的輸出中,您可以看到返回按鈕的預設樣式。為了更改返回按鈕文字,您可以按照下一步操作。

設定返回按鈕文字

在此步驟中,我們將設定自定義返回按鈕文字。要更改返回按鈕文字,您可以根據您的需求建立具有基本自定義的自定義 UIButton。之後,您可以使用 UIBarButtonItem(customView:) 類分配自定義返回按鈕。以下是使用此方法的程式碼。

示例

import UIKit
class SecondViewController: UIViewController {
   private let backButton = UIButton(type: .system)
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
   private func initialSetup() {
   
      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "Second Controller"
     
      // button customization
      backButton.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
      backButton.setTitle("Return", for: .normal)
      backButton.titleLabel?.font = UIFont.systemFont(ofSize: 17, weight: .medium)
      backButton.addTarget(self, action: #selector(handleBackButtonTapped), for: .touchUpInside)
      let backButtonItem = UIBarButtonItem(customView: backButton)
      self.navigationItem.leftBarButtonItem = backButtonItem
   }
   @objc private func handleBackButtonTapped() {
      self.navigationController?.popViewController(animated: true)
   }
}

輸出

在上面的示例中,您可以看到我們如何設定自定義返回按鈕文字。也可以使用自定義按鈕型別自定義返回按鈕。

使用 backBarButtonItem 屬性

使用此屬性,您可以更改從初始檢視控制器推送到導航堆疊中的所有檢視控制器的預設返回按鈕文字。您可以按照以下步驟更改預設返回按鈕文字。

  • 步驟 1 − 實現檢視控制器的 viewWillAppear 方法。

  • 步驟 2 − 使用自定義文字建立 UIBarButtonItem 物件並將其分配給 backBarButtonItem 屬性。

  • 步驟 3 − 將 backBarButtonItem 屬性分配給檢視控制器類的 navigationItem 屬性。

這是一個示例

override func viewWillAppear(_ animated: Bool) {
   super.viewWillAppear(animated)
   self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "Return", style: .plain, target: nil, action: nil)
}

在此示例中,覆蓋了 UIViewController 的 viewWillAppear 方法,並將 navigationItem 屬性的 backBarButtonItem 屬性設定為建立具有適當文字的 UIBarButtonItem。透過以這種方式設定 backBarButtonItem 屬性,更改了導航欄中顯示的返回按鈕的文字,無論何時將此檢視控制器移動到導航堆疊中。

透過 UINavigationController 推送到導航堆疊中的所有 UIViewControllers 都相容此方法。如果您使用其他型別的導航(如標籤欄),則需要使用不同的技術來更改返回按鈕文字。

結論

您可以透過使用 UIBarButtonItem(customView:) 類將帶文字的自定義按鈕分配給返回按鈕。此類返回一個條形按鈕項並將其分配給檢視控制器的 navigationItem 屬性。

您還可以使用檢視控制器類的 navigationItem.backBarButtonItem 屬性為返回按鈕設定自定義文字。

更新於: 2023-03-27

2K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告