Nested Stack Views: Free iOS Development Tutorial

Topics covered in this iOS Development tutorial:

Nested Stacks, Constraints, Content Hugging Priority, Compression Resistance Priority, Image vs. Text Field Priority

Exercise Preview

Exercise Overview

Nested stacks are your friends, if you know how to manage them. Here we’ll work with multiple nested stacks and elements, including images and text fields. Be aware that until you put all your constraints in, these stacks can look very out of control.

Laying Out the UI

1. In Xcode, create a new project and name it Nested Stacks. Save it into your class folder.
2. In the Project navigator, select Assets.
3. Let’s bring in the images. Switch to the Desktop and navigate to yourname–iOS App Dev 1 Class > Auto Layout Images.
4. Select all four images.
5. With Xcode still visible, drag the files to the Assets catalog.
6. In the Project navigator, click on Main.
7. At the bottom of the Editor, set the view to iPhone 13 Pro.

8. Following the above layout as a rough guide, from the Object library, pull out:

   • an image view
   • three labels
   • three text fields
   • three buttons
   • a Text View for the Notes section.
9. Change the text in the labels to First, Middle, and Last as shown above.
10. Change the Buttons to Save, Cancel, and Clear as above.
11. Click on the text view with all the text. In the Attributes inspector, replace the mound of text with Notes:.
12. Make the Style of the Notes: text Bold and Size 17.
13. Click on the Image View. Give it the image square_flowers.
14. Click on the top text field.
15. In the Attributes inspector, add the text Enter First Name.
16. Stretch the field across if you can’t see all the text.
17. Do the same thing for the Middle Name and Last Name text fields.
18. Select all three text fields!
19. In the Attributes inspector, under Color, click on the word Default. Choose Light Gray Color.
20. Scroll down to where you see Background (under the View section).
21. Click on the blue arrows to bring up the popup menu, and choose Other.
22. From the Colors panel, pick the second from the left, the RGB Sliders.
23. Click on the menu for RGB Sliders and choose Gray Scale Slider.
24. Under Brightness enter 97% and close the panel.
25. Click on the Notes: field.

26. Also under Background, select Light Gray Color.

It’s Stacking Time

You are now going to create many nested stacks. It’s always best to start from the inside with stacking.

1. Select the First label and the Enter First Name text field. You may need to select these in the Document Outline if the labels are hidden behind the text fields.
2. Click on the Embed in button and select the Stack View option.

3. Name the stack First Name Stack in the Document Outline.

   Don’t worry about how it looks yet. We’ll add all constraints after nesting our stacks.

4. Follow the same steps for the Middle Name Stack and Last Name Stack.
5. Select the three stacks you just created in the Document Outline.
6. Embed in Stack, and name it Name Rows Stack.
7. Select the flowers image and the Name Rows Stack.
8. Embed in Stack, and name that one Upper Stack (don’t worry about the crazy image size!).
9. Select the three buttons.
10. Embed in Stack, and name it Button Stack.
11. Select the Upper Stack, the Notes: text view, and the Button Stack.

12. Embed in Stack, and name it Root Stack.

Adding Constraints to the Stacks

First let’s constrain the Root Stack to establish our boundaries.

1. Ctrl–drag from the Root Stack to the View four times, selecting the following:
   • Leading Space to Safe Area.
   • Trailing Space to Safe Area
   • Top Space to Safe Area
   • Bottom Space to Safe Area
2. While Root Stack is still selected, in the Size inspector, next to Align Trailing to:, click Edit and change the Constant to –10.
3. Next to Align Leading to:, click Edit and change the Constant to 10.
   

4. Change the Top Constant to 20 and the Bottom Constant to –20.

   Now we can see the border of the layout. Clearly it needs tweaking!

5. Click on the square-flowers in the Document Outline. (You may need to expand the Root Stack and Upper Stack to see it. )
6. Ctrl–drag the square-flowers to itself in the Document Outline. Choose Aspect Ratio.
7. In the Size inspector, Edit that constraint to make sure the Multiplier is 1. This will keep the image square no matter how it is resized.
8. Ctrl–drag from the Enter First Name text field to the Enter Middle Name text field. Choose Equal Widths.

9. Do the same thing with Enter First Name and Enter Last Name. This will keep our text fields the same size no matter what happens.

We Must Have Attribution

Time to add some attributes to all these elements.

1. Select the First Name Stack.
2. In the Attributes inspector:
   • Alignment: First Baseline (aligns to the first baseline of the text label)
   • Spacing: 8
3. Repeat for the Middle Name and Last Name stacks.
4. Select the Name Rows Stack:
   • Alignment: Fill
   • Distribution: Fill
   • Spacing: 8
5. Select the Upper Stack:
   • Alignment: Fill
   • Distribution: Fill
   • Spacing: 8
6. Select the Button Stack:
   • Alignment: First Baseline
   • Distribution: Fill Equally
   • Spacing: 8
7. Select the Root Stack:
   • Alignment: Fill
   • Distribution: Fill
   • Spacing: 8

CHCR (Content-Hugging and Compression-Resistance)

Remember in the 60s and 70s there was a band called CCR (Creedence Clearwater Revival)? Well now there is CHCR (Content-Hugging and Compression-Resistance). With CHCR we can specify what elements scale when the iPhone needs to be flexible.

1. Select the flowers image.

2. Go into the Size inspector. Scroll down, and under Content Hugging Priority add the following:
   • Horizontal: 250
   • Vertical: 250
3. Right there under Content Compression Resistance Priority add the following:
   • Horizontal: 48
   • Vertical: 48

   We have to set the image’s content compression very low to make sure it reduces in size vs. the text fields in the name rows. If the number is set too high the image could expand and change the width and height of the entire Upper Stack.

4. Select the Notes: text view.

5. Go into the Size inspector. Scroll down, and under Content Hugging Priority add the following:
   • Horizontal: 250
   • Vertical: 249
6. Right there under Content Compression Resistance Priority add the following:
   • Horizontal: 250
   • Vertical: 250

   We want the Notes: text view to do all of the vertical expanding/contracting to keep the other parts of the layout stable. Therefore we make the text view’s vertical content hugging lower than any other element (249 is the lowest).

7. Select the First, Middle, and Last Name labels. Use the Cmd key and select them in the Document Outline.

8. Go into the Size inspector. Scroll down, and under Content Hugging Priority add the following if they are not already there:
   • Horizontal: 251
   • Vertical: 251
9. Right there under Content Compression Resistance Priority add the following:
   • Horizontal: 750
   • Vertical: 750

   We want these labels to change the least, so we give them the highest values for CHCR.

10. Select the First, Middle, and Last Name text fields.

11. Go into the Size inspector. Scroll down, and under Content Hugging Priority add the following:
    • Horizontal: 48
    • Vertical: 250
12. Right there under Content Compression Resistance Priority add the following:
    • Horizontal: 749
    • Vertical: 750

    These text fields need to be horizontally flexible, as they should always look fine no matter how wide they are. But vertically we don’t want them to change. So we give a low value to horizontal content hugging, and a lower value to horizontal content compression resistance.

    The layout still looks off at the top, and the Notes view will not display as expected. Sometimes even Xcode can’t display constraints properly. In this case you need the Simulator to make sure everything is in place.

13. Run the simulator to see how everything looks.