Large Title and Search in iOS 11

Two nice things named as UI refinements in the navigation bar were announced on the latest WWDC :

  1. The view controller title is large now. It dynamically changes its size when the user is scrolling the screen context down and up.
  2. The search controller is part of the navigation bar. It is not visible on a just opened view controller, but it appears when the user scrolls the screen down and dissapears when the screen is scrolled up.

Let’s begin from the large title. Almost all projects contain a navigation controller. In order to setup the large title in the navigation bar of this controller, a new property prefersLargeTitles should be set to true. For example, the following line can be added to a viewDidLoad function of a view controller:

self.navigationController?.navigationBar.prefersLargeTitles = true

This view controller and all view controllers pushed after it will have new large titles. Or better to say, titles with a dynamic size: initially they are large and you as a user will pay attention on it, but when the content of such view controller is scrolled, the title size becomes small and it gives much more space for the scrolling content.

In case you don’t need the large title in a view controller pushed later, for example in a detail view controller of the master-detail application, you can change the mode:

self.navigationController?.navigationItem.largeTitleDisplayMode = .never

From this point the title in this detail view controller and in all other controllers pushed after it will have the small size.

The mode can be also .always or .automatic. The names are self-explained: .automatic means that the large title mode is used in the current view controller if it is large in the previous view controller. always — the large title is shown always and does not matter what is the mode in the previous view controller.

One more point: it is possible to change the appearance of this new title. For example, the folowing code makes it green:

UINavigationBar.appearance().largeTitleTextAttributes = 
[NSAttributedStringKey.foregroundColor: UIColor.green]

Or a blue and smaller:

UINavigationBar.appearance().largeTitleTextAttributes = 
[NSAttributedStringKey.foregroundColor:UIColor.blue,
NSAttributedStringKey.font:UIFont.boldSystemFont(ofSize: 22)]

Now about the search controller:

let search = UISearchController(searchResultsController: nil)
search.searchResultsUpdater = self
self.navigationItem.searchController = search

The code below creates a new search controller and assign it to the navigation bar. The view controller (self in the code below) should conform to the UISearchResultsUpdating protocol to make the search working.

The demo project (with a country list as it is shown on the screenshots above) is available in Git.

Reference:

  1. WWDC 2017. What’s New in Cocoa Touch
  2. WWDC 2017. Updating Your App for iOS 11