2016/07/11更新

[Swift] ナビゲーションバーのデザインを変更する

このエントリーをはてなブックマークに追加            

こんにちは、久しぶりに古いiPhoneアプリをSwiftで改修中の@yoheiMuneです。
今日はiOSアプリでデザイン変更を最も行う箇所の1つである、UINavigationBar周りのデザイン変更方法をブログに残したいと思います。

画像

目次




今回変更するデザイン(3点)

この記事では、以下3点の色を変更する方法を記載しています。
画像


アプリケーション全体でナビゲーションのデザインを変更する

アプリケーション全体でデザインを変更する場合には、以下のように行います。
// AppDelegate.swiftなどで、アプリ起動時に処理を行う

// 色
let greenColor = UIColor(red: 24.0/255.0, green: 225.0/255.0, blue: 144.0/255.0, alpha:1)
let whiteColor = UIColor(red: 236.0/255.0, green: 254.0/255.0, blue: 234.0/255.0, alpha:1)
let redColor = UIColor.redColor()

// ① ナビゲーションバーの背景色
UINavigationBar.appearance().barTintColor = greenColor

// ② ナビゲーションバーのタイトルの色
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: whiteColor]

// ③ ナビゲーションバー上のアイテムの色
UINavigationBar.appearance().tintColor = redColor
ポイントとしてはUINavigationBar.appearance()に指定することで、アプリケーション全体でデザインを変更することができます。

ただ、1点注意ポイントがあります。上記のコードはナビゲーションバーがwindowに追加される前でないと効果がないということです。なので通常はAppDelegate.swiftなどで実装を行います。



ナビゲーションバー個別にデザインを変更する

アプリケーション全体ではなく、ナビゲーションバーごとに設定することもできます。その場合には以下のように実装します。
// この変更はいつでもOKです。
// 以下の例では、UINavigationController上のViewControllerで実装しています。
override func viewWillAppear(animated: Bool) { super.viewDidAppear(animated) // 色 let greenColor = UIColor(red: 24.0/255.0, green: 225.0/255.0, blue: 144.0/255.0, alpha:1) let whiteColor = UIColor(red: 236.0/255.0, green: 254.0/255.0, blue: 234.0/255.0, alpha:1) let redColor = UIColor.redColor() // ① ナビゲーションバーの背景色 self.navigationController?.navigationBar.barTintColor = greenColor // ② ナビゲーションバーのタイトルの色 self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: whiteColor] // ③ ナビゲーションバー上のアイテムの色 self.navigationController?.navigationBar.tintColor = redColor }
ここではUINavigationControllerの個別のインスタンスに色を指定しています。アプリケーション起動後にデザインを変更していきたい場合には、こちらの方法を使います。



最後に

今日はiOSアプリのUINavigationについてデザインを変更する方法をブログに書きました。Swiftアプリはデザインカスタマイズがいろいろとできますが、都度調べて大変なので、ちょこちょことブログに残すことが大切かなーと思う今日この頃です。

最後になりますが本ブログでは、フロントエンド・Swift・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。