WWDC 2017: Large Titles and Safe Area Layout Guides
The UI in iOS 11 is mostly unchanged from that of iOS 10, but it does add a new variation to the navigation bar.
Larger Navigation Bar Titles
iOS 11 added a property to
UINavigationItem that enables a large, out-of-line title in the navigation bar. Apple recommends that this larger title be enabled for the first view controller in a navigation controller, but you can use it with any view controller.
To display a large title, set the navigation item’s
let vc = UIViewController() vc.navigationItem.largeTitleDisplayMode = .always
Is That It?
Yes, that’s pretty much it. Now our app went from this:
Oh no, something went wrong. This is what happens when the offset for the content was hardcoded; the taller title breaks the assumed fixed height, and we get unwanted overlap. If we’d used
topLayoutGuide, then we’d be fine. But iOS 11 also deprecates
Safe Area Layout Guides
bottomLayoutGuide as a new way to create constraints between your views and a superview. These guides are used in tvOS to help insure that important areas of your view aren’t cut off because of overscan. These guides can also be used as new anchors for your views within a
UIViewController to make sure that the
UITabBar isn’t blocking your content.
If you are familiar with writing programmatic constraints, using these new guides couldn’t be easier. Let’s see if we can fix our app using these new layout guides:
topLabel.topAnchor.constraint( - equalTo: view.topAnchor, - constant: 64 + equalTo: view.safeAreaLayoutGuide.topAnchor ).isActive = true
With that fix, our content moves back beneath even the large-titled Navigation Bar:
If your constraints were created through Interface Builder, you can also opt into using the new layout guides. Open your Storyboard, view the File Inspector and select “Use Safe Area Layout Guides.”
Whether your project uses hardcoded offsets or
bottomLayoutGuide, we recommend using