Use the enlarged name of the navigation bar in iOS 11

Question

iOS 11 Beta 1 uses the enlarged title bar of the navigation bar for almost all system applications (it started to do this in iOS 10 and the Music app). I am wondering if Apple has a public API for this in iOS 11, or while it remains closed.

The behavior is that the title has an increased font size, is left-justified and moves to the navigation bar after the user scrolls down. I have attached several screens showing this behavior in the Messages application here:

Although I still haven't found links to the UINavigationController and UINavigationBar , maybe someone knows some details!

Answer 1

The only change, prefersLargetitles in the UINavigationBar API for iOS 11, is prefersLargetitles only for prefersLargetitles . check here

You can do this for your own applications with one small change: check the “Prefers big headers” box for the navigation bar in IB or, if you prefer to do this in code, using

 navigationController?.navigationBar.prefersLargeTitles = true 

edit

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

 UINavigationBar.appearance().largeTitleTextAttributes = [ NSForegroundColorAttributeName: UIColor.white ] 

Update for Swift 4.2:

Since NSForegroundColorAttributeName been renamed to NSAttributedString.Key.foregroundColor , use:

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

Answer 2

UINavigationBar has the prefersLargeTitles: Bool property. The docs are here .

 class UINavigationBar { var prefersLargeTitles: Bool } 

UINavigationItem has the largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode property largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode . The docs are here .

 class UINavigationItem { var largeTitleDisplayMode: LargeTitleDisplayMode } 

Both of them can be changed in Interface Builder.

To enable this behavior, set navigationController.navigationBar.prefersLargeTitles to true . You can then control each individual view controller in the navigation controller stack by setting navigationItem.largeTitleDisplayMode .

Apple's general design principles are that large headers should not be used everywhere (for example, the Clock application does not use them), and they usually prefer that only the first level of the navigation controller use large headers. However, these are just general recommendations.

Whats new in Cocoa Touch video (7:37).

Answer 3

Just check “Prefers large headers” in the attribute inspector of the navigation bar.

Answer 4

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

Please note that there are some bugs in the beta version that cause a large header to appear when viewed manually.

Answer 5

 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 } 

Answer 6

Since large headers are available starting with iOS 11, you should also check the iOS version:

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