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 master stack views and unlock the fundamental principles behind iPhone auto layout. Stack views are the backbone of modern iOS interface design, providing a declarative approach to building responsive layouts that adapt seamlessly across Apple's diverse device ecosystem. By the end of this tutorial, you'll understand how to leverage content hugging and compression resistance priorities—essential concepts that separate novice developers from those who build truly professional iOS applications.

Getting Started

Let's begin by setting up a new Xcode project that will serve as our playground for exploring auto layout fundamentals.

1. Launch Xcode.

2. Go to File > New > Project.

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

4. Configure your project with the following settings:

   • Product Name: Auto Layout
   • Team: None (Or select your development team if you have one configured)
   • Organization Name: Your Name
   • Organization Identifier: com.YourName
   • Interface: Storyboard
   • Language: Swift
   • Leave Use Core Data unchecked. Core Data enables persistent storage on devices, which we won't need for this layout-focused exercise.
   • Uncheck Include Tests if it's selected, as we'll focus purely on interface development for this tutorial.
5. Click Next.
6. Navigate to Desktop > Class Files > yourname-iOS App Dev 1 Class folder.
7. Ensure Create Git repository on My Mac is checked. Version control is a professional best practice that will track your progress and allow you to experiment fearlessly.

8. Click Create to finalize your project setup.

Laying Out the UI

Now we'll construct a responsive interface that demonstrates the power of stack views. This section will show you how stack views automatically handle complex layout calculations that would otherwise require dozens of individual constraints.

1. First, we'll add the visual assets our interface requires. 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 directly into the Assets catalog. This centralized asset management is crucial for supporting multiple device resolutions and accessibility features.
5. In the Project navigator, click on Main.storyboard to begin building your interface.
6. At the bottom of the Editor, set the view to iPhone 13 Pro. This provides a representative canvas for modern iOS development.
7. From the Object library drag out an Image View.
8. In the Attributes inspector, set the Image property to flowers.
9. Center the image on the view using Xcode's blue alignment guides—these intelligent guides help maintain visual consistency.
10. In the Attributes inspector under View > Content Mode, select Aspect Fit. This preserves the image's aspect ratio, preventing distortion across different screen sizes—a hallmark of professional iOS apps.
11. From the Object library, add a Label and position it above the image.
12. Add a Button and place it below the image, creating a logical visual hierarchy.
13. Change the label text to Flowers and set Alignment to centered for visual balance.
14. Change the button text to Edit.
15. Select all three elements: the label, image, and button. This multi-selection is key to creating unified layout groups.
16. Click the Embed in button and choose Stack View. Notice how the image immediately expands—stack views automatically distribute available space among their children, demonstrating their intelligent layout behavior.
17. In the Document Outline, CTRL–drag from the Stack View to the View. Choose Leading Space to Safe Area. This establishes the stack's relationship to the device's safe area, ensuring your content respects system UI elements like the Dynamic Island and home indicator.
18. Repeat this process three more times, adding these essential constraints:
    • Trailing Space to Safe Area (defines the right boundary)
    • Top Space to Safe Area (establishes top positioning)
    • Bottom Space to Safe Area (anchors bottom positioning)
19. With Stack View selected, navigate to the Size inspector. Next to Align Trailing to:, click Edit and change the Constant to 0.
20. Press Esc to dismiss the dialog.

21. Apply the same modification to the remaining three constraints, setting each Constant to 0.

    By setting these constants to zero, you're instructing the stack view to utilize the full safe area while respecting system-defined margins. This approach ensures your interface looks polished across all iOS devices while maintaining appropriate spacing from screen edges.

22. With the Stack View still selected, configure these critical properties in the Attributes inspector:
    • Alignment: Fill — ensures elements stretch to fill available width
    • Distribution: Fill — allows elements to expand and contract as needed
    • Spacing: 8 — provides consistent visual breathing room between elements

You'll likely notice the button appears to float in excessive space at the bottom. This is where content hugging and compression resistance priorities come into play—these sophisticated layout tools give you precise control over how elements behave when space is limited or abundant.

1. Select the flowers image view.
2. Navigate to the Size inspector and scroll down to Content Hugging Priority. Configure these values:
   • Horizontal: 250
   • Vertical: 249
3. In the Content Compression Resistance Priority section immediately below, set:
   • Horizontal: 750
   • Vertical: 749

These priority adjustments are crucial: by setting the image's vertical values slightly lower than the default (250 and 750), you're designating the image as the "flexible" element in your layout. When the stack view needs to distribute or compress space, it will prioritize maintaining the label and button at their intrinsic sizes while allowing the image to scale dynamically.

1. Test your responsive design by selecting different device sizes at the bottom of the Editor. Observe how the image scales intelligently while the label and button maintain consistent positioning—this is professional-grade responsive design in action.

Let's explore how constraint constants affect your layout's visual breathing room. We'll modify the margin constraints to demonstrate their impact on the overall design aesthetic.

1. For optimal visualization of this concept, select iPhone 4s at the bottom of your screen—the smaller canvas will make spacing changes more apparent.
2. In the Document Outline, select the Stack View.
3. In the Size inspector, locate Align Trailing to:, click Edit and change the Constant to 25. Watch how this immediately affects your layout's visual balance.
4. Apply this same 25-point constant to the remaining three constraints, observing how each change enhances the interface's professional appearance.
5. Return to iPhone 13 Pro view and test across different device sizes. Notice how the consistent 25-point margin creates a refined, app-store-ready appearance while the image continues to scale responsively due to your priority configurations.