GeometryReader for adaptive layouts in iOS Swift - Mini App: Build & Ship

Build: Adaptive Layout Screen

This screen uses GeometryReader to adapt the layout of two colored boxes based on the available screen size. The boxes adjust their width and height dynamically to fit nicely on any device orientation or size.

Target UI

┌───────────────────────────────┐
│ Adaptive Layout Screen         │
├───────────────────────────────┤
│ ┌───────────────┐ ┌───────────┐│
│ │   Red Box     │ │ Blue Box  ││
│ │ (width adapts)│ │(width adapts)││
│ └───────────────┘ └───────────┘│
│                               │
└───────────────────────────────┘

Use GeometryReader to get the screen width and height

Place two colored rectangles side by side horizontally

Each rectangle's width should be half of the available width minus some spacing

Height of rectangles should be 150 points

Add some spacing between the rectangles

Use SwiftUI and ensure the layout adapts to screen size changes

Starter Code

iOS Swift

import SwiftUI

struct AdaptiveLayoutView: View {
    var body: some View {
        GeometryReader { geometry in
            // TODO: Add your layout code here
        }
    }
}

struct AdaptiveLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        AdaptiveLayoutView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct AdaptiveLayoutView: View {
    var body: some View {
        GeometryReader { geometry in
            let spacing: CGFloat = 20
            let boxWidth = (geometry.size.width - spacing) / 2
            HStack(spacing: spacing) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: boxWidth, height: 150)
                    .cornerRadius(10)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: boxWidth, height: 150)
                    .cornerRadius(10)
            }
            .padding()
        }
    }
}

struct AdaptiveLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        AdaptiveLayoutView()
    }
}

We use GeometryReader to get the available width of the screen. We define a spacing constant for space between the two boxes. Then we calculate boxWidth as half the total width minus the spacing. Inside an HStack with the defined spacing, we place two colored rectangles (red and blue). Each rectangle has the calculated width and a fixed height of 150 points. We add corner radius for nicer visuals and padding around the stack. This layout automatically adjusts when the screen size changes, such as rotating the device.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Adaptive Layout Screen         │
├───────────────────────────────┤
│ ┌───────────────┐ ┌───────────┐│
│ │   Red Box     │ │ Blue Box  ││
│ │ (width adapts)│ │(width adapts)││
│ └───────────────┘ └───────────┘│
│                               │
└───────────────────────────────┘

When the device rotates, the two boxes resize their width to always fill the screen width with spacing.

The height remains fixed at 150 points.

The layout remains side by side in landscape and portrait modes.

Stretch Goal

Add a Text label below each colored box that shows the current width of that box in points.

💡 Hint

Use GeometryReader inside each box or pass the calculated width as a parameter to a custom view that shows the width as text.