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.