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.

Practice

1. What is the main purpose of using GeometryReader in SwiftUI layouts?

easy

A. To add animations to views

B. To create fixed-size views that never change

C. To handle user input events

D. To get the size and position of the container to create adaptive layouts

Solution

1. Step 1: Understand GeometryReader role

   GeometryReader provides the size and position of its container view.

2. Step 2: Use size for adaptive layouts

   This size info helps adjust child views to fit different screen sizes.

3. Final Answer:

   To get the size and position of the container to create adaptive layouts -> Option D

4. Quick Check:

   GeometryReader = adaptive layout helper [OK]

Hint: GeometryReader gives container size for flexible layouts [OK]

Common Mistakes:

• Thinking GeometryReader fixes view size
• Confusing GeometryReader with animation tools
• Using GeometryReader for user input handling

2. Which of the following is the correct syntax to access the width of the container inside a GeometryReader closure?

easy

A. geometry.frame.width

B. geometry.width

C. geometry.size.width

D. geometry.container.width

Solution

1. Step 1: Recall GeometryReader parameter

   The closure parameter is usually named geometry and has a size property.

2. Step 2: Access width correctly

   The width is accessed as geometry.size.width, not geometry.width or others.

3. Final Answer:

   geometry.size.width -> Option C

4. Quick Check:

   Width = geometry.size.width [OK]

Hint: Use geometry.size.width to get container width [OK]

Common Mistakes:

• Using geometry.width instead of geometry.size.width
• Trying geometry.frame.width which doesn't exist
• Using geometry.container.width which is invalid

3. Given this SwiftUI code snippet, what will be the width of the red rectangle when the screen width is 300 points?

GeometryReader { geometry in
  Rectangle()
    .fill(Color.red)
    .frame(width: geometry.size.width / 2, height: 100)
}

medium

A. 300 points

B. 150 points

C. 100 points

D. 75 points

Solution

1. Step 1: Identify container width

   The screen width is given as 300 points, so geometry.size.width = 300.

2. Step 2: Calculate rectangle width

   The frame width is geometry.size.width / 2 = 300 / 2 = 150 points.

3. Final Answer:

   150 points -> Option B

4. Quick Check:

   300 / 2 = 150 [OK]

Hint: Divide geometry.size.width by 2 for half width [OK]

Common Mistakes:

• Using full width instead of half
• Confusing height with width
• Ignoring geometry.size and using fixed numbers

4. What is wrong with this SwiftUI code using GeometryReader?

GeometryReader { geometry in
  Text("Hello")
    .frame(width: geometry.width, height: 50)
}

medium

A. geometry.width is invalid; should use geometry.size.width

B. Text cannot be inside GeometryReader

C. frame height must be dynamic, not fixed

D. Missing .background modifier

Solution

1. Step 1: Check geometry property usage

   The code uses geometry.width, but GeometryProxy has no width property directly.

2. Step 2: Correct property to use

   The correct property is geometry.size.width to get container width.

3. Final Answer:

   geometry.width is invalid; should use geometry.size.width -> Option A

4. Quick Check:

   Use geometry.size.width, not geometry.width [OK]

Hint: Always use geometry.size.width, not geometry.width [OK]

Common Mistakes:

• Using geometry.width instead of geometry.size.width
• Thinking Text can't be inside GeometryReader
• Believing frame height must be dynamic

5. You want a square view that always fills half the screen width and keeps its height equal to its width using GeometryReader. Which code snippet correctly achieves this?

hard

A. GeometryReader { geometry in
Rectangle()
.frame(width: geometry.size.width / 2, height: geometry.size.width / 2)
}

B. GeometryReader { geometry in
Rectangle()
.frame(width: geometry.size.height / 2, height: geometry.size.width / 2)
}

C. GeometryReader { geometry in
Rectangle()
.frame(width: geometry.size.width / 2, height: geometry.size.height / 2)
}

D. GeometryReader { geometry in
Rectangle()
.frame(width: geometry.size.width, height: geometry.size.width / 2)
}

Solution

1. Step 1: Determine width for half screen

   Use geometry.size.width / 2 for width to fill half the screen width.

2. Step 2: Set height equal to width

   Height must match width to keep the view square, so height = geometry.size.width / 2.

3. Final Answer:

   Rectangle with width and height both geometry.size.width / 2 -> Option A

4. Quick Check:

   Square size = half screen width [OK]

Hint: Set width and height equal using geometry.size.width / 2 [OK]

Common Mistakes:

• Mixing width and height from different geometry properties
• Using height from geometry.size.height which varies by device height
• Setting unequal width and height causing non-square shape