UIStackView Tutorial for iOS: Introducing Stack Views

Converting the What to See Section

Converting this section is similar to what you’ve already done.

1. First, select the WHAT TO SEE label and <whatToSeeLabel> below it.
2. Click the Embed In button and choose Stack View.
3. Click the Pin button.
4. Check Constrain to margins and add the following four constraints:

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

5. Set the stack view’s Alignment to Fill.

Your storyboard should now look like this:

This leaves you with just the weather section left.

Converting the Weather Section

The weather section is more complex than the others because of the Hide button.

To convert the weather section, you could create a nested stack view by embedding the WEATHER label and the Hide button into a horizontal stack view. Then, embed that horizontal stack view and the <weatherInfoLabel> into a vertical stack view.

It would look something like this:

Notice that the WEATHER label has expanded to equal the height of the Hide button. This will result in extra space between the baseline of the WEATHER label and the text below it.

Remember that alignment specifies positioning perpendicular to the stack view. So, you could set the alignment to Bottom:

However, you don’t want the height of the Hide button to dictate the height of the stack view.

Instead, you’ll eliminate the Hide button from all stack views.

The Hide button will remain a subview of the top-level view, and you’ll add a constraint from it to the WEATHER label — which will be in a stack view. That’s right, you’ll add a constraint from a button outside of a stack view to a label within a stack view!

Select the WEATHER label and <weatherInfoLabel> below it, and then stack them in a Stack View.

Click the Add New Constraints button, checkmark Constrain to margins and add the following four constraints:

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

Set the stack view’s Alignment to Fill:

You need a constraint between the Hide button’s left edge and the WEATHER label’s right edge, so having the WEATHER label fill the stack view won’t work.

However, you do want the bottom <weatherInfoLabel> to fill the stack view.

You can accomplish this by embedding just the WEATHER label into a vertical stack view. Remember that the alignment of a vertical stack view can be set to .leading, and if you stretch the stack view beyond its intrinsic width, its subviews will remain aligned to the leading side.

Select the WEATHER label using the document outline, or by using the Control-Shift-click method. Then, embed it in a new stack view.

Set Alignment to Leading, and make sure the Axis is set to Vertical:

Perfect! The outer stack view is stretching the inner stack view to fill the width, but the inner stack view allows the label to keep its original width!

Build and run. Uh-oh. Why is the Hide button hanging out in the middle of the text?

When you embedded the WEATHER label in a stack view, any constraints between it and the Hide button were removed.

To add new constraints, Control-drag the Hide button to the WEATHER label.

Hold down Shift to select multiple options, and select Horizontal Spacing and First Baseline. Then press Enter, or click anywhere outside the pop-up view:

Build and run. The Hide button should now be positioned correctly. Since the label set to hidden is embedded in a stack view, pressing Hide hides the label and adjusts the views below it — all without having to manually adjust any constraints.

Now that all the sections are in unique stack views, you’re set to embed them into an outer stack view, which will make the final two tasks trivial.

Top-level Stack View

Command-click to select all five top-level stack views in the outline view.

Then embed them all in one Stack View:

Click the Add New Constraints button, check Constrain to margins and add constraints of 0 to all edges. Then set Spacing to 20 and Alignment to Fill. Your storyboard scene should now look like this:

Build and run:

Whoops! Looks like the hide button lost its constraints again when the WEATHER stack view was embedded in the outer stack view. No problem, just add constraints to it again in the same way you did before:

• Control-drag from the Hide button to the WEATHER label.
• Hold down Shift.
• Select both Horizontal Spacing and Baseline.
• Press Enter, or click anywhere outside the pop-up view.

Build and run. The Hide button is now in the right position.

Repositioning Views

Now that all the sections are in a top-level stack view, you’ll modify the position of the WHAT TO SEE section so that it’s above the WEATHER section.

Select the middle stack view from the outline view and drag it between the first and second view.

Size Class Configurations

Finally, turn your attention to the one remaining task on your list. In landscape mode, vertical space is at a premium, so you want to bring the sections of the stack view closer together. To do this, you’ll use size classes to set the spacing of the top-level stack view to 10 instead of 20 when the vertical size class is compact.

Select the top-level stack view and in the Attributes inspector, click the + button next to Spacing:

Choose Any Width and Compact Height, then select Add Variation.

Set the Spacing to 10 in the new hC field:

Build and run. The spacing in portrait mode should remain unchanged. Rotate the simulator and note that the spacing between the sections has decreased and the buttons now have ample space from the bottom of the view:

If you didn’t add a top-level stack view, you still could have used size classes to set the vertical spacing to 10 on each of the four constraints that separate the five sections, but isn’t it so much better to set it in a single place?

You have better things to do with your time, like animation!