A good strategy to implement a layout like this is to add constraints that apply to all versions of the design first. These constraints will be active for any Size Class. By doing this, you can implement a general layout first and then apply tweaks for Size Class specific changes. When you implement your layout like this, you'll have a minimum amount of constraints in your design. Having fewer constraints often means that it's easier to maintain and tweak your layout later.
By default, Interface Builder is configured to apply constraints to all Size classes. This means that the width Size Class can be any and the height Size Class can be any as well. If you want to add constraints that only apply to a specific Size Class variation, you can use the Vary for Traits button in the bottom-right corner of the device preview section. Before you press this button, you should select the type of device that has the specific traits that you want to add a variation for. Try to click around a little bit to get a feel for how this works. Make sure you exit the Vary for Traits mode before you continue. Also, remove the UILabel that you added to the details page earlier; we don't need it anymore.
When a user taps on the notes text input, a keyboard will appear. If this happens on a phone in landscape mode, we can be pretty certain that the notes input field will be covered by the keyboard. This behavior is not great because users like to be able to see what they're typing in a text field. To fix this, we can contain the entire contact details page in a scroll view. By doing this, the user can still scroll around to see everything they've typed.
Implementing a scroll view like this has proven to be non-trivial in Auto Layout. So let's get that out of the way first. After that, we can immediately begin implementing the scrollable layout for the contact details page. The following steps outline the process of implementing the full contact details page:
- Add a scroll view that will contain the entire layout.
- Lay out the image and label.
- Lay out the contact's image size for large screens.
- Lay out the bottom section of the contact details page.
- Lay out the bottom section of the contact details page for small screens.