【Swift】Navigation Barの使い方。タイトルを画像にしたり、高さや行数を変更する方法。(Swift 2.1、XCode 7.2)

2020年6月16日

ナビゲーションバーのタイトルをカスタマイズする

本記事では、Navigation Item(以下、ナビゲーションアイテム)に設定するタイトルをカスタマイズする方法を説明する。

Navigation Bar

 

タイトルを画像にする

まずはタイトルを画像に変更してみよう。作業開始前のXcodeプロジェクトをGitHubに置いたので、手順を試してみる人はご利用されたし。
⇒「テスト用プロジェクト

 

ViewController.swiftを以下のコードに変更する。

ナビゲーションアイテムはtitleプロパティの他にtitleViewというプロパティも持っていて、titleViewプロパティに値を設定するとそれが優先されてタイトルに表示される。

 

ストーリーボードを開き、下図赤枠のView Controllerを選択する。黄緑枠のアイデンティティインスペクタボタンを押して設定画面を開き、Classに「ViewController」を設定する。

これで昼、夕方の両方の画面にViewControllerクラスが使われるようになった。

Custom ClassにViewControllerを指定

 

以下は実際のプレイ動画。タイトルに画像が表示されるようになった。

 

カスタムクラスでタイトルを画像にする

先ほどの実装の欠点は、新しいビューコントローラーを作る度にタイトルに画像を設定するコードを書かなければならない点である。単純なコードなので苦労はしないが、冗長なコードを増やさないためにもナビゲーションアイテムのタイトルを設定する箇所は1つにしておきたい。

そこでNavigation Controller(以下、ナビゲーションコントローラー)のサブクラスを作り、画面遷移時のデリゲートメソッドでタイトルに画像を設定する。なお、先ほどのViewController.swiftの変更は元に戻しておくこと。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestNavigationController」、Subclass ofに「UINavigationController」を入力し、Nextボタンを押す。

クラス名、サブクラス名を入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存先を指定する

 

TestNavigationController.swiftを以下のコードに変更する。

「画面遷移後の呼び出しメソッド」でナビゲーションバーにスタックされているナビゲーションアイテムの中の一番上のアイテムのtitleViewプロパティに画像を設定している。

ナビゲーションアイテムはナビゲーションバーの中に配列で保持されていて、push、popで出し入れされながら画面遷移時に利用されるので、一番上のアイテムが画面遷移後のナビゲーションアイテムになる。

 

以下は実際のプレイ動画。画面遷移が終わってから画像が現れるのが気になるところではある。

 

ナビゲーションバーの高さを調整する

ナビゲーションバーの高さは画像の大きさに合わせて自動で伸縮することはないので、以下の画像のように、大きい画像をタイトルに設定すると画像がナビゲーションバーをはみ出してしまう。

通常のナビゲーションバーの高さ

 

そこで、ナビゲーションバーの高さを変更しよう。

TestNavigationController.swiftを以下のコードに変更する。

 

以下は実際のプレイ動画。ナビゲーションバーの高さが広くなった。

しかし、「画面遷移後の呼び出しメソッド」は別の画面に移動したときに実行されるため、画面端末の向きを縦横に切り替えると高さが元に戻ってしまう。

 

ナビゲーションバーの体裁を変更するにはナビゲーションバーのサブクラスを使う必要があるようだ。⇒「stackoverflowの投稿

そこでナビゲーションバーのサブクラスを作ってバーの高さを調整してみよう。メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestNavigationBar」、Subclass ofに「UINavigationBar」を入力し、Nextボタンを押す。

Navigation Barのサブクラス名を指定する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存先を指定する

 

TestNavigationBar.swiftを以下のコードに変更する。ビューの表示が更新されるときに「ビューのサイズを返すメソッド」「サブビューのレイアウトを行うメソッド」が呼び出される。

「ビューのサイズを返すメソッド」では、ビューの高さを80に変更してサイズを返している。「サブビューのレイアウトを行うメソッド」では、サブビューがUIImageViewクラスだった場合にY座標を15に変更している。

 

ストーリーボードを開き、下図赤枠の「Navigation Bar」を選択する。黄緑枠のアイデンティティインスペクタボタンを押して設定画面を表示し、Classに「TestNavigationBar」を設定する。これでナビゲーションバーの表示にカスタムクラスが使われるようになった。

Navigation Barにカスタムクラスを設定する

 

以下は実際のプレイ動画。端末の向きを変更してもナビゲーションバーの高さが80で保たれるようになった。

 

タイトルを2行で表示する

titleViewには画像に限らずUIViewクラスを継承している部品なら何でも設定できる。例えば、TextNavigationController.swiftを以下のコードに変更すると、タイトルとサブタイトルの2行が表示される。

タイトルを2行で表示