iOS 11 の大きなタイトルのナビゲーションコントローラの表示方法

この記事は「Cocoa Advent Calendar 2017」の参加記事です。

iOS 11で大きなタイトルのナビゲーションコントローラが使えるようになりました。分かりやすい実例は、標準アプリの「ミュージック」だと思います。タブで画面を切り替えると、各画面のタイトルが大きく表示されます。アプリでもこの大きなタイトルのナビゲーションコントローラが使えるようになっています。

目次

使い方の概要

次のようにすると、大きなタイトルのナビゲーションコントローラが表示されます。

  1. 「UINavigationBar」クラスに「prefersLargeTitles」というプロパティが追加されています。これを「true」にします。
  2. 「UINavigationItem」クラスの「largeTitleDisplayMode」プロパティに、「always」または「automatic」を設定します。

「largeTitleDisplayMode」プロパティは、3つの値が使用できます。「automatic」「always」「never」です。この中で「never」を指定すると従来の表示になります。「UINavigationBar」クラスの「prefersLargeTitles」を「true」にしていないと、どの値を指定しても変化しないので注意が必要です。
以下のコードは、テスト用に外から「largeTitleDisplayMode」を設定していますが、普通は各ビューコントローラの「viewDidLoad」メソッドなどで設定すれば良いと思います。

@IBAction func showAutomatic(_ sender: Any) {
    let tableViewController = ModeSelectorTableViewController(style: .plain)
    tableViewController.title = "Automatic"
    tableViewController.navigationItem.largeTitleDisplayMode = .automatic
    let navigationController = UINavigationController(rootViewController: tableViewController)
    navigationController.navigationBar.prefersLargeTitles = true
    self.present(navigationController, animated: true, completion: nil)
}

「largeTitleDisplayMode」の値による動作の違い

大きなタイトル表示は、上位のビューコントローラの設定に影響を受けます。値による動作の違いは次のようになっています。

「always」の動作

「always」は上位のビューコントローラの設定に関係無く、常に大きなタイトル表示を行います。この「常に」というのが紛らわしく、スクロールさせても小さな表示にならないという意味ではありません。「always」を指定した場合でも、スクロールさせて、トップが非表示になる位置になるとタイトル部分が小さくなります。

スクロールしていないとき

alwaysでスクロールさせたとき

「never」の動作

「never」は上位のビューコントローラの設定に関係無く、大きなタイトル表示を行いません。

neverを指定したとき

「automatic」の動作

「automatic」は上位のビューコントローラが「always」なら大きなタイトル表示を行い、「never」なら大きなタイトル表示を行わないという動作です。つまり、上位のビューコントローラの設定を引き継ぎます。ルートビューコントローラに指定した場合は、大きなタイトル表示を行います。

上位がalwaysのとき

上位がneverのとき

「leftBarButtonItem」や「rightBarButtonItem」、「prompt」の表示位置

大きなタイトルで表示されているときは、「leftBarButtonItem」や「rightBarButtonItem」はタイトルよりも上に表示されます。スクロールするなどして、小さな表示になると、タイトルの左右に表示されます。「prompt」は常にタイトルの上に表示されます。

iPhone XやiPadのときは?

iPhone XやiPadのときも同じような表示になります。デバイスに合わせて大きさは調整されますが。

著書紹介

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

目次