今回は初学者向けに、Swift で NavigationBar
の戻るボタンをカスタマイズする際のベストプラクティスを紹介したいと思います🧑🔧
ちなみに今回のゴールは下記のようになります。
before | after |
---|---|
![]() |
![]() |
コード
まず前提として覚えておく必要があるのは、戻るボタンは Image
と Text
から構成されているということです。下記のコードでは、navigationController?.navigationBar.backIndicatorImage = hogeImage
で Image
を、navigationItem.backBarButtonItem = backItem
で Text
をそれぞれカスタマイズしています。
下記の setBackBarButton()
をナビゲーションのルートで呼び出すことで、それ以降に登場する戻るボタンを共通のものにすることができます。
func setBackBarButton() { let backItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil) backItem.tintColor = .black navigationItem.backBarButtonItem = backItem navigationController?.navigationBar.backIndicatorImage = hogeImage navigationController?.navigationBar.backIndicatorTransitionMaskImage = hogeImage }
navigationBar
のそれぞれのプロパティの説明は下記の通りです。
backIndicatorImage
backIndicatorImage
は、戻るボタンの横に表示される Image
を表します。
document: https://developer.apple.com/documentation/uikit/uinavigationbar/1624942-backindicatorimage
backIndicatorTransitionMaskImage
backIndicatorTransitionMaskImage
は、画面遷移時にコンテンツのマスクとして使用される画像を表します。
また、遷移先で navigationItem.backBarButtonItem = backItem
を呼び出すことで戻るボタンをカスタマイズすることもできますが、この場合システム標準のスライドバックなどができなくなってしまうので注意が必要です。