Open the Main.storyboard and select a compact width device, iPhone 6, for instance. Start by removing the entire view that contains the six contact information labels. Then, look for UIStackView in the Object Library. You'll notice that you can either select a vertical or a horizontal stack. We'll need a vertical stack; drag it out to the storyboard.
Next, drag a UILabel out from the Object Inspector. Drag it right to the Document Outline on the left side and drop it in the stack view. This is easier than dropping it in the view and trying to get it on the stack view because there are all kinds of layout errors right now.
Once you've added the UILabel, rearrange the views so they are positioned roughly the same as before. Manually resize the scroll view's content view if it will make your job easier. Once you've done this, constrain the stack view eight points from the left, bottom, and right of the superview. Also, constrain the vertical space between the notes container view and the stack view to eight points.
If you update the frames now, you should end up with a result similar to the following screenshot:
Now, switch to a regular-width device and vary this width trait. Select the vertical constraint between the stack view and the notes section and deactivate it for the Regular Width, Any Height, and Any Gamut configurations. Similar to how we deactivated constraints earlier, deactivate the constraint that places the right edge of the stack view eight points from the superview.
Manually rearrange the views so that they look as they did before for Regular Width, and add the required constraints. You will need an equal-width constraint between the left and the right, a horizontal spacing constraint of eight points between the left and the right, and finally, a vertical spacing constraint between the contact name and the stack view.
After adding these constraints, drag five more labels to the stack view. You'll see that the layout changes without you having to add any constraints. Neat, isn't it? Let's explore some of the available settings for the stack view. Select the stack view and look at the Attributes Inspector.
You'll notice that you can change the stack axis. Currently, it's set to vertical so the views are placed one above the other. Setting them as horizontal will position them next to each other. The alignment determines how the views inside of the stack view are aligned. This doesn't change the text alignment at all. It only changes the alignment of the views. Change this value to see what happens (the value you should end up using for this layout is Fill).
Changing the distribution doesn't do anything for this stack view. That's because the height is dynamically set based on the contents. If you had a stack view with a fixed height, this would determine how the labels were distributed over the entire available height. The Spacing setting determines how much room there should be between the views inside of the stack view. Set this value to 4 so we have some room for the labels to breathe.
To show you how powerful UIStackView really is, we'll refactor the two container views that contain the notes and the contact details.