【iOS11】NavigationBarのlargeTitlesの文字をカスタマイズする

はじめに

iOS 11 になって印象的な UI の変更といえば，
設定アプリやミュージックアプリなどのトップに表示される，
でかいフォントの largeTitles ですよね。もうお馴染みです。
Apple 純正アプリ以外で使っているアプリをほとんど見ないし，
実際の業務で使うことはあんまりないと思う？のですが，
個人制作のアプリで一部使ってみようと思って色々調べたので備忘録です。

最初は嫌いだったけど慣れたのか気にならなくなった。

largeTitles を表示する

とりあえず表示するには，
iOS 11 以降であることが必要で下記のようなコードを書けばよいです。

ViewController.swift

self.navigationItem.title = "Settings"

if #available(iOS 11.0, *) {
    // preferslargeTitles を true にする
    self.navigationController?.navigationBar.preferslargeTitles = true
    // .always / .never / .automatic から選ぶ
    self.navigationItem.largeTitlesDisplayMode = .always
} else {
    // iOS 11 未満で何かあれば
}

preferslargeTitles を設定するのは
NavigationController の Root 相当の画面だけでよく，
一度設定すると，push 遷移による遷移先の子画面は全て反映できます。
true だと largeTitles 適用で false だと iOS 10 までと同じです。

largeTitlesDisplayMode は 3 つ設定があり，
.always，.automatic，.never から選択します。
英語の意味通りでこの画面だけは設定しないといった場合は
子画面の ViewController などで never を設定します。

largeTitles をカスタマイズしたい

アプリでは NavigationBar のタイトルは白でカスタムフォントを使っていて
下記のような感じでただ実装しただけだと統一感ない感じになりました。
フォント変えたい・フォントカラー変えたい・・・

largeTitleTextAttributes を使う

NavigationBar のタイトルをカスタマイズしたように(titleTextAttributes)
largeTitleTextAttributes というのがあってこれを使えばよいです。
今回は AmericanTypewriter の Bold フォントでフォントカラーは白にしました。

ViewController.swift

self.navigationItem.title = "Settings"

if #available(iOS 11.0, *) {
    // preferslargeTitles を true にする
    self.navigationController?.navigationBar.preferslargeTitles = true
    // always / never / automatic から選ぶ
    self.navigationItem.largeTitleDisplayMode = .always
    
    // largeTitlesTextAttributes を使ってカスタマイズ
    self.navigationController?.navigationBar.largeTitleTextAttributes = 
    [NSAttributedStringKey.foregroundColor : UIColor.white,
     NSAttributedStringKey.font : UIFont(name: "AmericanTypewriter-Bold", size: 30)!]
     
} else {
    // iOS 11 未満で何かあれば
}

ちゃんとフォントもフォントカラーも変わってくれました。

おわりに

今回は，iOS 11 から使えるようになった，largeTitles の
基本的な実装とカスタマイズについて書きました。

まだまだ受注系の業務アプリだと使うことなさそうですが，
自社プロダクトであったり個人アプリの場合は，
アクセントとしてうまく使える場面があるかなと思います。

ご覧いただきありがとうございました！
こういうやり方もあるよとかこうした方が使いやすいなど
あれば教えていただけたら嬉しいです！！

参考

• largeTitlesTextAttributes