【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法!
この記事からわかること
- SwiftのUIKitでNavigationBarの背景色を変更する方法
- ボタンの色を変えるには?
- UINavigationBarAppearanceクラスの使い方
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
環境
- Xcode:15.0.1
- iOS:17.0
- Swift:5.9
- macOS:Sonoma 14.1
SwiftのUIKitでコードからNavigationBar(ナビゲーションバー)の色を変更をする方法をまとめていきます。この記事ではUINavigationControllerの使い方は解説していないので以下記事を参考にしてください。
ナビゲーションバーに背景色を変更する方法
UINavigationController
のナビゲーションバーの色を変更するにはUINavigationBarAppearance
クラスのbackgroundColor
プロパティを変更してnavigationBar
に以下のように設定します。
let appearance = UINavigationBarAppearance()
// 背景色
appearance.backgroundColor = UIColor.gray
// ナビゲーションバーに反映させる
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
barTintColorは期待通りに動作しない
昔の実装ではbarTintColor
に直接色を渡すことで変更できていましたが、現在では期待通りに動作しないので注意してください。
self.navigationController?.navigationBar.barTintColor = UIColor.red
タイトル(文字)の色を変更する
ナビゲーションバーに表示されるタイトルの文字色を変更したい場合はUINavigationBarAppearance
クラスのtitleTextAttributes
プロパティを変更して反映させます。
self.navigationItem.title = "タイトル"
let appearance = UINavigationBarAppearance()
// タイトル文字色を変更する
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
// largeTitleも変更する
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
appearance.backgroundColor = UIColor.gray
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
ボタンの文字色を変更する
ナビゲーションバーに表示されるボタンの文字色を変更したい場合はUINavigationBarAppearance
クラスのbuttonAppearance
>normal
>titleTextAttributes
プロパティを変更して反映させます。
let textButton = UIBarButtonItem(title: "ボタン", style: .done, target: self, action: #selector(textButtonTapped))
self.navigationItem.rightBarButtonItem = textButton
let appearance = UINavigationBarAppearance()
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
// ボタンの文字色を変更する
appearance.buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.backgroundColor = UIColor.gray
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
しかしこの実装方法ではデフォルトの「戻る」ボタンなどアイコンと文字が表示されているボタンは文字のみ色が変わってしまいます。
デフォルトの「戻る」ボタンの色を変更する
デフォルトの「戻る」ボタンの色をアイコンも含めて変更するにはnavigationBar
>tintColor
プロパティの値を変更すればOKです。
self.navigationController?.navigationBar.tintColor = .white
これでアイコンとテキスト両方の色が変化します。またカスタムでUIBarButtonItem
を追加している場合も全てに色の変化が適応されます。
カスタムボタン1つ1つの色を変更する
カスタムボタンの色を一括ではなく1つ1つ変更したい場合はUIBarButtonItem
のtintColor
で変更することで実装できます。
let textButton = UIBarButtonItem(title: "ボタン", style: .done, target: self, action: #selector(textButtonTapped))
textButton.tintColor = .white
self.navigationItem.rightBarButtonItem = textButton
UIKitで変更したい場合
おすすめ記事:【Swift UI】ナビゲーションバーの背景色を変更する方法!toolbarBackground
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。