Before we add a new stack view for the columns, remove the following constraints in the compact width display mode:
- Vertical spacing between notes and contact name
- Leading space to superview for notes and contact details
- Trailing space to superview for notes and contact details
- Vertical spacing between notes and contact details
- Bottom space to superview for contact details
In the regular width display mode, delete the following constraints:
- Vertical spacing between contact name and contact details
- Horizontal spacing between notes and contact details
- Equal-width constraint between notes and contact details
With all of these constraints removed, it's time to rebuild. Let's stick with the regular-width device. Select the Stack View, the view that contains the notes label, and the text view. Refer to the following screenshot to make sure that you have the correct views selected:
In the top bar, navigate to Editor | Embed in... | Stack View. This will wrap the selected view in a UIStackView. Now add some constraints to this stack view. We want the container stack view to be positioned eight points from the superview's leading edge, eight points from the trailing edge, and eight points from the bottom. The spacing between the contact name and the stack view should also be eight points.
Now, select the container stack view and go to the Attributes Inspector. Because the stack view now has a predetermined width and we're stacking on the horizontal axis, we can change the distribution. If you set this to Fill Equally, set the alignment to Fill, and set a spacing of eight points, the result will look identical to the previous version that did not use UIStackView, except that this layout involves less constraints, which means less maintenance for you.
Finally, click on the + symbol next to the Axis property. This enables you to add Size Class variations for this property. Select a Compact Width, Any Height, Any Gamut variation and set the Axis to Vertical. If you switch to a compact width device now, the layout will update, back to the single column variation we had before. No extra constraints are needed. This is just one example of the power of UIStackView; there are many more ways in which UIStackView can make your layout work a lot simpler, so make sure you use this component whenever appropriate.
Now let's finish the contacts page by displaying some real data.