【Swift】Navigation Barの設定。バーの色や背景画像をカスタマイズする。(Swift 2.1、XCode 7.2)

2020年6月16日

Navigation Barのアトリビュートインスペクタ

本記事ではNavigation Bar(以下、ナビゲーションバー)の設定について説明する。

Navigation Barのアトリビュートインスペクタ

 

Style

ナビゲーションバーの表示スタイルを「Default」、「Black」、「Black Translucent」の中から選択する。

「Default」は白のベタ塗りで、タイトル文字色が黒になる。

Navigation BarのStyleを「Default」に指定

 

「Black」は黒のベタ塗りで、タイトル文字色が白になる。

Navigation BarのStyleを「Black」に指定

 

「Black Translucent」は黒の曇りガラスのような効果によって後ろのビューがぼんやり見えるようになるが、iOS7からは非推奨になっている。曇りガラス効果は「Translucent」のチェックで決めることができるので問題ない。初期状態はチェックが入っている。

下図はStyleに「Default」、Translucentにチェックを入れたナビゲーションバー。初期状態はこの表示になる。

Style「Default」で透過

 

下図はStyleが「Black」、Translucentにチェックを入れたナビゲーションバー。

Style「Black」で透過

 

以降の説明はStyleが「Default」、Translucentにチェックが入っているものとして話を進める。

 

Bar Tint

ナビゲーションバーの色は白黒に限らず好きな色に変更できる。下図は緑に設定した結果。Bar Tintを設定すると曇りガラスの効果が無くなってしまうのが残念だ。

Bar Tintを緑に設定した

 

Shadow Image

Shadow Image(以下、シャドウイメージ)とは、ナビゲーションバーの下にある線のことで、これに画像を設定できる。

Shadow Image

 

しかし、シャドウイメージにファイル名を設定するだけでは画像は表示されない。公式リファレンスには以下のように記述されている。

For a custom shadow image to be shown, a custom background image must also be set with the setBackgroundImage:forBarMetrics: method. If the default background image is used, then the default shadow image will be used regardless of the value of this property.(公式リファレンス)

 

つまり、ナビゲーションバーに背景画像を設定しないと、シャドウイメージを設定しても無意味ということだ。では背景画像とシャドウイメージを両方設定したら表示されるかを確認しよう。

背景画像
Navigation Barの背景

 

シャドウイメージ用の画像
mokume_test2

 

ナビゲーションバーの背景画像はストーリーボードから設定できないので、UINavigationControllerのサブクラスを作成し、以下のコードのように「画面遷移後の呼び出しメソッド」が呼び出されたタイミングで背景画像とシャドウイメージを設定するようにした。

もちろん、シャドウイメージはストーリーボードから設定しても大丈夫。

 

以下は実際のプレイ動画。背景画像とシャドウイメージが表示された。

ちなみに、以下のコードのように画像未設定のUIImageのインスタンスを背景画像とシャドウイメージに設定すると、ナビゲーションバーが透明になる。

 

以下は実際のプレイ動画

 

Back Image

項目名を見ると一瞬、背景画像の設定だと思ってしまうが、背景画像ではなく「戻るボタン」の画像の設定である。

公式リファレンスに以下の注意文がある。

If you want to customize the back indicator image, you must also set backIndicatorTransitionMaskImage.(公式リファレンス)

 

つまり、次に説明する「Back Mask」と同時に設定しなければ表示されないということだ。

 

Back Mask

Back Imageと一緒に設定することで戻るボタンの背景を変えることができる。では以下の赤い矢印の画像をBack ImageとBack Maskに設定し、どのように表示されるか確認してみよう。

戻るボタン

 

下図は実行結果。ボタンの画像が青色になった。

ボタンの画像はナビゲーションバーのtintColorに設定されている色に塗りつぶされてしまうのだ

戻るボタンの画像を変更した結果

 

そこで、TestNavigationController.swiftを以下のコードに変更して、ナビゲーションバーのボタンの文字色を赤に変更するとどうなるか。

 

下図は実行結果。ボタンの画像と文字色が赤色になった。

戻るボタンの画像が文字色と同じになった

 

どうやら、「戻るボタン」に設定された画像はレンダリングモードがOriginalにならないためにtintColorと同じになるようだ。

戻るボタンそのものを表示するには以下のコードのようにして、画像のレンダリングモードをAlwaysOriginalに変更しておく。

 

下図は実行結果。ボタンの画像が本来の色で表示された。

レンダリングモードをOriginalにして戻るボタンを表示

 

そもそもボタンの画像はいらないという場合は、以下のコードのように画像未設定のUIImageインスタンスをボタンの画像に設定する。

 

以下は実行結果。ボタンの画像が無くなった。

戻るボタンの画像を表示しない

 

Title Font

ナビゲーションバーのタイトルのフォント種類とサイズを指定する。

 

Title Color

ナビゲーションバーのタイトルのフォントカラーを指定する。

 

Title Shadow

ナビゲーションバーのタイトルの近くに表示する影の色を指定する。

影を配置する場所は「Default Position」と「Custom Offset」の2つから選択する。「Custom Offset」ではタイトルからの垂直方向と水平方向の距離を指定する。

下図はTitle Fontに「System Medium 30」、Title Colorに紫色、Title Shadowに緑色、Custom OffsetのHorizontalに「2」、Verticalに「2」を設定して実行した結果。

Navigation Barのフォントを設定