【Swift/iOS】ナビゲーションバーのカスタマイズ

ナビゲーションコントローラー(Navigation Controller)を利用した時に自動で適用されるナビゲーションバー(Navigation Bar)のカスタマイズ方法について解説します。

storybord上でもある程度のカスタマイズはできますが、本記事では、原則コードで実装する方法を紹介していきます。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】Version10.1
【Swift】4.2.1
【iOS】12.1.3

表示文字列の設定(UINavigationItem)

ナビゲーションバーに表示する文字列(タイトルやBackボタンなどのアイテム)は、UINavigationItemクラスにて設定します。

タイトル文字列の設定(.title)

タイトル文字列の設定は、.titleプロパティで設定します。デフォルト値はnilです。

【図1:タイトル文字列の設定】

Backボタン文字列の変更(.backBarButtonItem)

デフォルトの状態では前画面のタイトルが表示されます。

図2:デフォルトのBackボタン

前画面のタイトルが無い(nil)の場合は、代わりにBackが表示されます。また、前画面のタイトルが長すぎて画面に表示しきれない場合も同様にBackが表示されます。

図3:前画面タイトルがnilの場合のBackボタン

Backボタンのカスタマイズは、前画面のViewControllerに紐付いているUINavigationItemにて行います。

実際にBackボタンを表示する画面ではなくて、遷移元のViewControllerで設定する事に注意して下さい。

図4:Backボタン文字列の変更

外観のカスタマイズ(UINavigationBar)

ナビゲーションバーの外観はUINavigationBarクラスで設定します。

以降で示すコードは、基本的にナビゲーションコントロール配下の先頭画面(rootView)のviewDidLoad()に記述します。

スタイルの変更(.barStyle)

ナビゲーションバーのスタイル変更は.barStyleオプションにて行います。

デフォルトのスタイルは、ナビゲーションバー全体に白いすりガラスのようなエフェクトがかかり、タイトル文字およびステータスバーの文字が黒色です。

図5:デフォルトの外観スタイル(明るいすりガラス)

次のように.blackを指定すると、黒いすりガラスのようなエフェクトがかかり、タイトル文字およびステータスバーの文字が白色になります。

図6:.black指定の外観スタイル(暗いすりガラス)

ここで使われている「すりガラスのようなエフェクト」は、UIVisualEffectViewクラスによって実現されています。

半透明化(.translucent)

.translucentプロパティはナビゲーションバーの半透明化の有無を示すフラグで、デフォルト値はtrueです。

trueの状態では.barStyleの値に応じて、白or黒のすりガラスのようなエフェクトが掛かります。

背景画像が設定されている場合(.setBackgroundImage)は、ナビゲーションバーが半透明になります。

図5:デフォルトの外観スタイル(明るいすりガラス)

この値がfalseの場合は、.barStyleの値に応じて、背景色が白or黒の単色になります。

背景画像が設定されている場合(.setBackgroundImage)は、ナビゲーションバーは透過無しで表示されます。

図7:半透明化無効にした場合

上2つの画像を見比べるとわかるように、isTranslucent = falseにすると、ビューの開始位置がナビゲーションバーの下にずれるようです。レイアウトに影響すると思われますので、ご注意下さい。

背景色の設定(.barTintColor)

.barTintColorオプションでナビゲーションバーの背景色を指定します。デフォルト値はnilです。

この値が設定された場合、.translucentオプション値に関係なく、半透明化は無効になります。

図8:ナビゲーションバーの背景色設定

なお、背景画像(.setBackgroundImage)が設定された場合は、画像の方が優先され、本オプションの設定は無効となります。

タイトル色の変更(.titleTextAttributes)

ナビゲーションバータイトル色のデフォルト値は、スタイル指定(.barStyle)によって、黒or白が設定されます。

.titleTextAtteibutesプロパティにて、文字の装飾を変更する事が可能です。

図9:タイトル色の変更

アイテムの色変更(.tintColor)

Backボタンなどナビゲーションバーアイテム色のデフォルト値は、スタイル指定(.barStyle)によって、黒or白が設定されます。

.tintColorプロパティにて、アイテム色の変更が可能です。

図10:アイテム色の変更

 

背景画像の設定(.setBackgroundImage)

setBackgroundImage()メソッドにて、ナビゲーションバーの背景画像を設定できます。

.translucent=trueの場合、半透明での表示となります。

図11:背景画像の設定

ナビゲーションバーの透明化

次の組み合わせで、ナビゲーションバーを透明化する事ができます。

図12:ナビゲーションバーの透明化

まとめ

  • ナビゲーションバーに表示する文字列(タイトル、アイテム)は、UINavigationItemクラスで各画面毎に定義する。
  • ナビゲーションバーのスタイルは、UINavigationController.UINavigationBarクラスで共通定義する。
swift
スポンサーリンク
スポンサーリンク
カピ通信

コメント