28
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ios11からのNavigationBarを実装する(largeTitleDisplayMode)

Last updated at Posted at 2017-10-07

ios11のnavigationBarを実装する

ios11からnavigationBarの以下のようにデザインが変わりました.NavigationBarに新しくlargeTitleDisplayModeというパラメータが加わりました.自分は最初にios11のデザインを見たとき,tableViewのHeaderか何かと思っていていました(笑)
largeTitleDisplayModeには.automatic.always.neverの三つがあります..alwaysだと左側の画像のように,.neverだと右側の画像のようにios10までと同じになります.今回はlargeTitleDisplayModeをViewControllerごとに使い分けてみたいと思います.
1-twlxNSHjlqM5WAv1FlhWHA.jpeg

StoryBoardで

StoryBoardで設定する場合,NavigationBarのinspectorからPrefers Large Titlesにチェックをつけます.
スクリーンショット 2017-10-07 22.24.38.png
viewController毎に変更したい場合は,Navigation ItemからLage Titleより設定できます.上で説明した通り,.automatic.always.neverの三種類で,大きくしたくないなら.neverにします.
スクリーンショット 2017-10-07 22.31.22.png

コードで

実装はそれぞれのViewControlerで下記のように実装します.
iOS11からの機能なのでそれ以下のバージョンを対応する場合は場合分けが必要です.

// ViewController.swift
override func viewDidLoad() {
   super.viewDidLoad()
   self.navigationItem.title = "iOS 11 Sample"
   // iOS 11 からの機能
   if #available(iOS 11.0, *) {
      // ここで Large Title が有効になります
      self.navigationController?.navigationBar.prefersLargeTitles = true
   } else {
      // 基本書かなくても良いと思います
      // Fallback on earlier versions
   }
   if #available(iOS 11.0, *) {
      // この ViewController でどうするか
      self.navigationItem.largeTitleDisplayMode = .always
   } else {
      // 基本書かなくても良いと思います
      // Fallback on earlier versions
   }
}

参考

iOS 11 的放大版 navigation bar
WWDC17 で気になったセッションについて

28
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?