Creating adaptive layouts with Auto Layout

At the beginning of this chapter, you learned what adaptive layouts are and why they are essential. You learned a little bit about size classes and the traitCollection property. In this section, you'll deep dive into these topics by implementing an adaptive contact details page. You'll learn some best practices to implement a layout that is tailored to work well with different size classes. You will learn how to do this in code as well as storyboards because it's not always possible to define your entire layout in a storyboard. Refer to the following diagram to see what the layout is going to look like:

The detail page you're going to set up contains some information about the contact the user has tapped, and the user can add some notes for this contact. On small screens, the layout will be a simple, one-column layout. On larger screens, the layout will adapt to make good use of the screen by splitting into a two-column layout. First, you'll create this layout in Interface Builder. Once you're done, you will make some tweaks to the layout in code.