2024/3/4

【Swift UIKit】ナビゲーションバーの背景色やボタン色を変更する方法！

この記事からわかること

SwiftのUIKitでNavigationBarの背景色を変更する方法
ボタンの色を変えるには？
UINavigationBarAppearanceクラスの使い方

index

[open]

ナビゲーションバーに背景色を変更する方法
barTintColorは期待通りに動作しない
タイトル(文字)の色を変更する
ボタンの文字色を変更する
デフォルトの「戻る」ボタンの色を変更する
カスタムボタン1つ1つの色を変更する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

SwiftのUIKitでコードからNavigationBar(ナビゲーションバー)の色を変更をする方法をまとめていきます。この記事ではUINavigationControllerの使い方は解説していないので以下記事を参考にしてください。

ナビゲーションバーに背景色を変更する方法

【Swift UIKit】コードでNavigationBarItemを実装する方法と使い方

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