CODEWITHSUNDEEP
iosiphoneuinavigationbarxcode9-betaios11
Hans Knöchel
Hans Knöchel

Reputation: 11552

Use the increased navigation-bar title in iOS 11

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:

enter image description here

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

Upvotes: 64

Views: 62650

Answers (6)

Moin Shirazi
Moin Shirazi

Reputation: 4425

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
]

Upvotes: 118

Lavrin Pristazh
Lavrin Pristazh

Reputation: 131

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
}

Upvotes: 0

Maor
Maor

Reputation: 3430

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

enter image description here

Upvotes: 8

Sai Sandeep
Sai Sandeep

Reputation: 149

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
}

Upvotes: 7

Jordi Bruin
Jordi Bruin

Reputation: 1588

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.

Upvotes: 6

kgaidis
kgaidis

Reputation: 15639

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).

Upvotes: 12

Related Questions