Auto Layout: Free iOS Development Tutorial

Topics Covered in This IOS Development Tutorial:

Basic Stacks, Constraints, Content Hugging Priority, Compression Resistance Priority

Exercise Preview

Exercise Overview

In this exercise we’ll explore stack views and reveal some of the secrets to iPhone auto layout.

Getting Started

1. Launch Xcode.

2. Go to File > New > Project.

3. Under iOS and Application double–click on Application.

4. Set the following:

   • Product Name: Auto Layout
   • Team: None (Or choose your team if you have one)
   • Organization Name: Your Name
   • Organization Identifier: com. YourName
   • Interface: Storyboard
   • Language: Swift
   • Leave Use Core Data unchecked. Core Data allows users to actually save data on their devices.
   • We won’t be learning how to perform tests for this app, so uncheck Include Tests if it isn’t already.
5. Click Next.
6. Navigate into the Desktop > Class Files > yourname-iOS App Dev 1 Class folder.
7. Check Create Git repository on My Mac if it is not already checked. (This can be used to track changes you make over time.)

8. Click Create to finish specifying the location of the new Xcode project.

Laying Out the UI

1. We need some images for our design. In the Project navigator , select Assets.xcassets.
2. Switch to the Desktop and navigate to yourname–iOS App Dev 1 Class > Auto Layout Images.
3. Open that folder and select all four images.
4. With Xcode still visible, drag the images to the Assets catalog.
5. In the Project navigator, click on Main.storyboard.
6. At the bottom of the Editor, set the view to iPhone 13 Pro.
7. From the Object library drag out an Image View.
8. In the Attributes inspector, set the Image to flowers.
9. Center the image on the view using the blue guides.
10. In the Attributes inspector under View > Content Mode, select Aspect Fit. This will keep the proper aspect ratio (width to height) for the image.
11. From the Object library, pull out a Label and put it above the image.
12. Also pull out a Button and put it below the image.
13. Change the label text to Flowers and make Alignment centered.
14. Change the button text to Edit.
15. Select all three objects: the label, image, and button.
16. Click on the Embed in button and choose the Stack View option. The image should magically enlarge! This is because the objects are filling all available space in the stack.
17. In the Document Outline, CTRL–drag the Stack View to the View. Choose Leading Space to Safe Area. This tells it how far from the left edge of the phone to place the stack.
18. Do the same thing three more times and choose the following:
    • Trailing Space to Safe Area (right edge)
    • Top Space to Safe Area (top edge)
    • Bottom Space to Safe Area (bottom edge)
19. While Stack View is still selected, in the Size inspector, next to Align Trailing to:, click Edit and change the Constant to 0.
20. Press Esc to get out of that dialog.

21. Do the same thing to the other three constraints, changing the Constant to 0.

    We just told Xcode that we want the stack to go to the very edges of any iPhone. It won’t go quite that far since there is some default margin.

22. While Stack View is still selected, in the Attributes inspector, under Stack View, add the following:
    • Alignment: Fill
    • Distribution: Fill
    • Spacing: 8

You may notice the button is floating in a large space at the bottom. We can fix that by changing the – wait for it – content hugging and compression resistance priorities.

25. Select the flowers image.
26. Go into the Size inspector. Scroll down, and under Content Hugging Priority add the following:
    • Horizontal: 250
    • Vertical: 249
27. Right there under Content Compression Resistance Priority add the following:
    • Horizontal: 750
    • Vertical: 749

Because these vertical values are slightly less than the other objects, the image will be the first one to change size vs. the others. The image will scale while the other objects stay stuck to the outside of the stack view. (The other objects still have default values of 250 and 750.)

26. At the bottom of the Editor, try different-sized phones to see how the image scales and the label and button hug the margin.

Remember when we changed the Constant to 0 for Trailing Space and the other constraints? We’re going to change them again to illustrate how that works.

27. To see this effect best, click on the iPhone 4s at the bottom of your screen.
28. In the Document Outline select the Stack View.
29. In the Size inspector, next to Align Trailing to:, click Edit and change the Constant to 25. Watch the effect after each change.
30. Do the same thing to the other three constraints, changing the Constant to 25.
31. At the bottom of the Editor, set the view back to iPhone 13 Pro. Try different-sized phones to see how the margin around the outside is bigger. The major variation from phone to phone happens to the image due to the content hugging and compression resistance priorities.