新しいUINavigationBar, UINavigationItem & UIRefreshControl #WWDC17 #WWDC2017

WWDC17

#iPhone

#Swift

#iOS

田中賢治

2017.06.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんぬづは、海外ドラマや映画の影響でずっとチャレンジしてみたかった、中華の持ち帰りChineseBoxにようやくありつくことのできた田中です！チャーハンを頼みましたが、思いの外みっちり入っていてこの顔です。

今回の記事は iOS 11 において UINavigationBar 周りで新しいデザインとAPIが公開されたのでそれとその挙動の紹介です。 iOS 11 では以下の画像のような新しいUIが追加になりました。NavigationBar領域が広がり、タイトルが大きく表示されるモードが追加されました。現行のiOS 10における"Music"アプリのライブラリ表示部分のようなデザインです。(ここはUINavigationBarでは無いようですが）

本記事は Apple からベータ版として公開されているドキュメントを情報源としています。そのため、正式版と異なる情報になる可能性があります。ご留意の上、お読みください。

navigationBar.prefersLargeTitles

上記の写真のNavigationBarを実装するには、 UINavigationBar に新しく追加された prefersLargeTitles プロパティを viewDidLoad() など適切な箇所でtrueにする必要があります。

override func viewDidLoad() {
    super.viewDidLoad()
    
    navigationController?.navigationBar.prefersLargeTitles = true
}

navigationItem.largeTitleDisplayMode

また、 UINavigationItem にも largeTitleDisplayMode というプロパティが追加されました。このプロパティは先ほど説明した navigationBar.prefersLargeTitles の表示モード設定です。

以下の三つのケースがあり、デフォルトは automatic です。

case always
case automatic
case never

階層ごとのLargeTitleの設定分けについて

UINavigationController によるPushの画面遷移を用いている場合に、上位階層のViewControllerで navigationBar.prefersLargeTitles をtrueにした場合、その下位階層のViewControllerにもその表示が引きずられてしまいます。

最上位階層はLargeTitleを有効にし、下位階層ではLargeTitleを無効にしたい場合はこの navigationItem.largeTitleDisplayMode をViewControllerごとに設定することで表示設定を変更することができます。

下記は最上位階層のViewControllerでLargeTitleを有効にし、下位階層でLargeTitleを無効にするサンプルコードです。

class TopViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = "Top"
        navigationController?.navigationBar.prefersLargeTitles = true
        navigationItem.largeTitleDisplayMode = .always
    }
}

class SubViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = "Sub"
        navigationItem.largeTitleDisplayMode = .never
    }
}

UIRefreshControl

UITableView や UICollectionView と共に利用することの多い UIRefreshControl は、 UINavigationBar の prefersLargeTitles プロパティがtrueの場合にNavigationBar領域の下ではなく、NavigationBar領域の中で表示されるようになります。