6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iPhoneアプリのヘッダー(ナビゲーションバー)の色を変更する

Last updated at Posted at 2019-02-23

要旨

この画像のようにNavigationControllerを作って、NavigationBarの色、タイトルの色、時間表示や電池表示の色を変更する方法を紹介します。
スクリーンショット 2019-02-22 9.29.37.png

手順

XcodeでSingle View Appを作成した状態からスタートします。

XcodeのMain.storyboardを表示した状態で、Editor > Embed in > Navigation Controller と選択します。
スクリーンショット 2019-02-22 9.06.38.png

そうすると、Navigation Controllerが追加されると思います。
スクリーンショット 2019-02-22 9.07.32.png

次にNavigation ItemをView Controllerの画面にドラッグ&ドロップします。すると、タイトルが表示されるようになります。
スクリーンショット 2019-02-22 9.11.54.png

で、このナビゲーションバーの色を変更したいわけなのですが、色の指定はソースコードに記述します。
ViewController.swiftviewDidLoad()メソッドの中に、以下のように記述します。

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.navigationController!.navigationBar.barStyle = .black
        self.navigationController!.navigationBar.barTintColor = #colorLiteral(red: 0.1725490196, green: 0.1725490196, blue: 0.1725490196, alpha: 1)
        self.navigationController!.navigationBar.tintColor = .white
        self.navigationController!.navigationBar.titleTextAttributes = [
            .foregroundColor: UIColor.white
        ]
    }
}

このような見た目になります。
スクリーンショット 2019-02-22 9.29.37.png

それぞれのパラメーターは下の画像のようになっています。tintColorこちらのリンクにあるように、ナビゲーションアイテムの色を変えるパラメーターのようです。
色の指定は.white.blueのように指定もできるし、#colorLiteral(red: green: blue: alpha:)のように指定するとカラーパレットが開けて細かく色指定することもできます。
スクリーンショット 2019-02-22 9.29.37.png

barStyleについては、default(何も指定しない)、blackblackTrunslucentの3つから選べます。

defaultの場合はこうなります。
スクリーンショット 2019-02-23 13.02.15.png

blackTrunslucentの場合はこうなります。blackと変わらないですね。。。スクロールしたら背景が透けるのかと思ったのですが、そうでもないみたいです。ごめんなさい。ここはよくわからないです。
スクリーンショット 2019-02-23 13.05.33.png

ここまで読んでいただいてありがとうございました。

参考

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?