Use the increased navigation-bar title in iOS 11

Question

iOS 11 Beta 1 uses the increased navigation-bar title for almost all system-apps (it started doing this in iOS 10 and the Music app). I am wondering if Apple has a public API for this coming in iOS 11, or whether it will stay private for now.

The behavior is that the title has an increased font-size, is left aligned and will move to the navigation-bar once the user scrolls down. I've attached some screens showing this behavior in the Messages app here:

Although I could not find any reference in the UINavigationController and UINavigationBar so far, maybe someone knows some more details!

It's in the documentation: [`prefersLargeTitles `](https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles?changes=latest_minor) — rckoenes, Jun 07 '17 at 09:54
Big NavigationBar, Toolbar titles are available in iOS 11 and you can use it in your apps as well. — Shabir jan, Jun 07 '17 at 10:28
It appears it has to be done in code. The Large Titles selector in Interface Builder doesn't have any effect. — Drew C, Sep 06 '17 at 21:51

score 118 · Accepted Answer · edited Jan 07 '20 at 02:04

118

The only change done to UINavigationBar API for iOS 11 is prefersLargeTitles.

Documentation here: https://developer.apple.com/documentation/uikit/uinavigationbar/

You can do it to your own apps with one small change: check "Prefers Large Titles" for your navigation bar in IB, or if you prefer to do it in code using:

navigationController?.navigationBar.prefersLargeTitles = true

If you need to change the text attributes of the large title you need to use the new largeTitleTextAttributes property on UINavigationBar:

UINavigationBar.appearance().largeTitleTextAttributes = [
    NSAttributedString.Key.foregroundColor: UIColor.black
]

edited Jan 07 '20 at 02:04

pkamb

33,281
23
160
191

answered Jun 07 '17 at 10:38

Moin Shirazi

4,372
2
26
38

I know this is a completely different question but I'm not sure if it's worth posting a new question for. Have you found a way to change the large title text color (foreground color)? – Gunnar Torfi Steinarsson Jul 02 '17 at 01:38
1

I think its still a bug .... please check http://www.openradar.me/32658968 – Moin Shirazi Jul 02 '17 at 06:25
The property to change large title attributes is `largeTitleTextAttributes` as answered here: https://stackoverflow.com/a/45020883/106703. I guess this makes sense so the large and regular titles can be styled independently. – Daniel Wood Jul 19 '17 at 11:23
@DanielWood can you please edit it in the same answer.. it will be helpful for other users too – Moin Shirazi Jul 19 '17 at 11:24
Just to update the answer: `NSForegroundColorAttributeName` has been renamed to `NSAttributedStringKey.foregroundColor` . – emmics Oct 08 '17 at 15:36
i have an issue with ios 11 as well, I m updating a 2016 app (ios 8) and for some reason the navigation is broken. the navigation bar is covered with a bar with a uniform background color. using prefersLargeTitles make it worst as the navigation bar disappears – Nico AD Jan 21 '18 at 12:27
This seems to have no effect for me. – ScottyBlades Apr 25 '21 at 19:09

kgaidis · Answer 2 · 2017-06-14T02:11:57.540

UINavigationBar has a prefersLargeTitles: Bool property. Docs here.

class UINavigationBar {
   var prefersLargeTitles: Bool
}

UINavigationItem has a largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode property. Docs here.

class UINavigationItem {
   var largeTitleDisplayMode: LargeTitleDisplayMode
}

Both of these can be modified in the Interface Builder.

To turn on this behavior set navigationController.navigationBar.prefersLargeTitles to true. Then you can control each individual view controller in the navigation controller stack by setting navigationItem.largeTitleDisplayMode.

The general design guidelines by Apple are that large titles shouldn't be used everywhere (for example, the Clock app does not use them), and it's generally preferred that only the first level of the navigation controller uses the large titles. However, these are just general guidelines.

Large titles are introduced in What's New in Cocoa Touch video (7:37).

score 8 · Answer 3 · edited Jan 07 '20 at 01:05

8

Just check "Prefers Large Titles" in the Navigation Bar attribute inspector in Storyboard / Interface Builder:

edited Jan 07 '20 at 01:05

pkamb

33,281
23
160
191

answered Dec 25 '17 at 15:06

Maor

3,340
3
29
38

score 7 · Answer 4 · answered Sep 21 '17 at 17:34

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationController?.navigationBar.topItem?.title = "Hello"
    navigationController?.navigationItem.largeTitleDisplayMode = .automatic

    let attributes = [
        NSAttributedStringKey.foregroundColor : UIColor.red,
        ]

    navigationController?.navigationBar.largeTitleTextAttributes = attributes
} else {
    // Fallback on earlier versions
}

score 6 · Answer 5 · answered Jun 19 '17 at 10:19

6

if #available(iOS 11.0, *) {
    self.navigationController?.navigationBar.prefersLargeTitles = true
    self.navigationItem.largeTitleDisplayMode = .always
} else {
    // Fallback on earlier versions
}

Note that there are some bugs in beta 1 which cause the large title to only appear when you manually scroll up.

answered Jun 19 '17 at 10:19

Jordi Bruin

1,588
1
11
20

Jordi, I have a UICollectionView inside my root UIViewController. When I scroll, than push another VC than go back to the root one, the Navigation Bar collapse to the small one (even if i'm adding your code). Does it the same bug as you described? – Roi Mulia Sep 15 '17 at 03:10
Hi @RoiMulia, that sounds like a different bug. When you return to the previous VC, is the content still scrolled? If so it's expected behaviour because the large navbar should only be shown when scrolled all the way to the top I believe. – Jordi Bruin Sep 15 '17 at 10:14
Yes, The content is still scrolled. What's even more weird, is that after I go to the root VC and the title collapse, if I scroll again (no matter what direction) the titles go back to beings large (anon smooth animation). Seems like a bug? – Roi Mulia Sep 15 '17 at 12:23

score 0 · Answer 6 · edited Jan 07 '20 at 01:05

0

Since large titles are available since iOS 11 you also have to check for iOS version:

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = true
}

edited Jan 07 '20 at 01:05

pkamb

33,281
23
160
191

answered Jul 03 '19 at 07:28

Lavrin Pristazh

132
2
11

Use the increased navigation-bar title in iOS 11

6 Answers6

Linked