search
LoginSignup
2
Help us understand the problem. What are the problem?

posted at

【iOS】Navigation Barの背景色を変える

はじめに

いっつも忘れてググることになるので忘れないようにメモです。

navigationBarのbackgroundColorではダメ

毎回以下のように書いてしまいます。

navigationController?.navigationBar.backgroundColor = .systemBlue

ですがそれだけだと本当にNavigationBarの部分しか色が変わりません。

image.png

UINavigationBarAppearanceを使いましょう。

iOS13から追加されたUINavigationBarAppearanceでNavigationの装飾を行います。

//UINavigationBarAppearanceをインスタンス化
let appearance = UINavigationBarAppearance()
//configureWithOpaqueBackgroundで以前までの設定を全てリセット
appearance.configureWithOpaqueBackground()
//背景色の設定
appearance.backgroundColor = UIColor.systemBlue
//backgroundEffectはブラーとかを選べる。単色であればNone
appearance.backgroundEffect = .none
//適用する:ScrollEdgeAppearanceに設定しているが、これは複数あるが、navigation全体の背景色の変更はscrollEdgeAppearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

これだけです。

image.png

以上です。

ちなみにAppearanceを使えば色々とNavigationの装飾が出来るようになりますが、それはまた別途記事にします。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
2
Help us understand the problem. What are the problem?