Why layout controls visual structure in iOS Swift - Build It to Prove It

Build: Simple Layout Demo

This screen shows how layout controls the visual structure by arranging colored boxes vertically with spacing.

Target UI

---------------------
|      Header       |
|-------------------|
|  [Red Box]        |
|                   |
|  [Green Box]      |
|                   |
|  [Blue Box]       |
|                   |
|      Footer       |
---------------------

Use a vertical stack to arrange three colored boxes (red, green, blue) with equal spacing.

Add a header label at the top and a footer label at the bottom.

Boxes should have fixed height and fill the width with some margin.

Use Auto Layout constraints or SwiftUI layout modifiers to control the structure.

Starter Code

iOS Swift

import SwiftUI

struct SimpleLayoutDemo: View {
    var body: some View {
        VStack {
            Text("Header")
                .font(.headline)
                .padding()
            // TODO: Add colored boxes here
            Spacer()
            Text("Footer")
                .font(.footnote)
                .padding()
        }
        .padding()
    }
}

struct SimpleLayoutDemo_Previews: PreviewProvider {
    static var previews: some View {
        SimpleLayoutDemo()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct SimpleLayoutDemo: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Header")
                .font(.headline)
                .padding()
            Rectangle()
                .fill(Color.red)
                .frame(height: 100)
                .cornerRadius(8)
                .padding(.horizontal)
            Rectangle()
                .fill(Color.green)
                .frame(height: 100)
                .cornerRadius(8)
                .padding(.horizontal)
            Rectangle()
                .fill(Color.blue)
                .frame(height: 100)
                .cornerRadius(8)
                .padding(.horizontal)
            Spacer()
            Text("Footer")
                .font(.footnote)
                .padding()
        }
        .padding()
    }
}

struct SimpleLayoutDemo_Previews: PreviewProvider {
    static var previews: some View {
        SimpleLayoutDemo()
    }
}

This example uses a vertical stack (VStack) to arrange the header, three colored boxes, and footer vertically.

The spacing: 20 adds space between each element, controlling the visual gaps.

Each colored box is a Rectangle with fixed height and horizontal padding to fill the width with margins.

The Spacer() pushes the footer to the bottom, showing how layout controls the position of elements on screen.

This demonstrates how layout structures the visual appearance by controlling size, spacing, and alignment.

Final Result

Completed Screen

---------------------
|      Header       |
|-------------------|
|  [Red Box]        |
|                   |
|  [Green Box]      |
|                   |
|  [Blue Box]       |
|                   |
|      Footer       |
---------------------

The screen shows a header at top, three colored boxes stacked vertically with space, and a footer at bottom.

Boxes do not respond to taps but visually demonstrate layout control.

If screen size changes, boxes keep their height and horizontal margins, maintaining structure.

Stretch Goal

Add a button below the blue box that toggles the visibility of the green box.

💡 Hint

Use @State to track visibility and a Button with an action to toggle it. Use conditional views inside VStack.

Practice

1. What is the main purpose of layout in an iOS app's user interface?

easy

A. To control where UI elements appear on the screen

B. To write the app's business logic

C. To handle user input events

D. To manage app data storage

Solution

1. Step 1: Understand layout role

   Layout defines the position and size of UI elements on the screen.

2. Step 2: Differentiate from other app parts

   Business logic, input handling, and data storage are separate from layout.

3. Final Answer:

   To control where UI elements appear on the screen -> Option A

4. Quick Check:

   Layout = control UI element positions [OK]

Hint: Layout means placing UI parts on screen [OK]

Common Mistakes:

• Confusing layout with app logic
• Thinking layout manages data
• Mixing layout with event handling

2. Which SwiftUI code snippet correctly sets a fixed frame size for a Text view?

easy

A. Text("Hello").fixedSize(100, 50)

B. Text("Hello").size(width: 100, height: 50)

C. Text("Hello").frame(width: 100, height: 50)

D. Text("Hello").setFrame(100, 50)

Solution

1. Step 1: Recall SwiftUI frame syntax

   The correct method to set size is .frame(width:height:).

2. Step 2: Check each option

   Only Text("Hello").frame(width: 100, height: 50) uses the correct method and parameters.

3. Final Answer:

   Text("Hello").frame(width: 100, height: 50) -> Option C

4. Quick Check:

   Use .frame(width:height:) to fix size [OK]

Hint: Use .frame(width:height:) to fix size [OK]

Common Mistakes:

• Using non-existent methods like .size or .setFrame
• Confusing fixedSize with frame
• Wrong parameter syntax

3. Given this SwiftUI code, what will be the vertical order of the Text views on screen?

VStack {
  Text("Top")
  Text("Middle")
  Text("Bottom")
}

medium

A. Top, Middle, Bottom from top to bottom

B. Bottom, Middle, Top from top to bottom

C. Middle, Top, Bottom from top to bottom

D. All texts overlap at the same position

Solution

1. Step 1: Understand VStack behavior

   VStack stacks views vertically in the order they appear, top to bottom.

2. Step 2: Apply to given code

   Text views appear in order: "Top", then "Middle", then "Bottom" vertically.

3. Final Answer:

   Top, Middle, Bottom from top to bottom -> Option A

4. Quick Check:

   VStack stacks views vertically in code order [OK]

Hint: VStack stacks views vertically top to bottom [OK]

Common Mistakes:

• Thinking VStack stacks horizontally
• Assuming reverse order
• Believing views overlap by default

4. What is wrong with this SwiftUI code that tries to center a Text view?

Text("Hello")
  .frame(width: 200, height: 50)
  .position(x: 100, y: 25)

medium

A. Missing .center() modifier to center the text

B. Using .position overrides frame alignment causing unexpected layout

C. frame width and height must be equal to center

D. Text views cannot be positioned manually

Solution

1. Step 1: Understand .position effect

   .position sets absolute coordinates, ignoring frame alignment.

2. Step 2: Analyze code behavior

   Using .position after .frame moves the view to fixed point, which may not center as expected.

3. Final Answer:

   Using .position overrides frame alignment causing unexpected layout -> Option B

4. Quick Check:

   .position sets absolute position, can override frame [OK]

Hint: .position sets absolute location, can override frame [OK]

Common Mistakes:

• Thinking .center() modifier exists
• Assuming frame size controls position alone
• Believing Text cannot be positioned manually

5. You want a button to stay at the bottom of the screen on all device sizes using SwiftUI. Which layout approach is best?

hard

A. Place the button inside an HStack without Spacer

B. Set fixed frame and position with .position(x:y:) for the button

C. Use only .padding() on the button without layout containers

D. Use VStack with Spacer() above the button to push it down

Solution

1. Step 1: Understand flexible layout needs

   To keep a button at bottom on all screen sizes, flexible layout is needed.

2. Step 2: Evaluate options

   Using VStack with Spacer() pushes the button down flexibly. Fixed position may break on different sizes.

3. Final Answer:

   Use VStack with Spacer() above the button to push it down -> Option D

4. Quick Check:

   Spacer() in VStack pushes views to edges flexibly [OK]

Hint: Use Spacer() in VStack to push button to bottom [OK]

Common Mistakes:

• Using fixed .position breaks on different screen sizes
• Relying only on padding for positioning
• Ignoring flexible layout containers