GeometryReader for adaptive layouts in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GeometryReader that fills the available space.

iOS Swift

GeometryReader { geometry in
    Color.blue
        .frame(width: geometry.size.[1], height: geometry.size.height)
}

Drag options to blanks, or click blank then click option'

Adepth

Bheight

Cwidth

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width for the frame width.

Trying to access non-existing properties like depth or length.

The geometry.size.width gives the width of the available space inside GeometryReader.

2fill in blank

medium

Complete the code to center a Text view inside GeometryReader using its size.

iOS Swift

GeometryReader { geometry in
    Text("Hello")
        .position(x: geometry.size.width / [1], y: geometry.size.height / 2)
}

Drag options to blanks, or click blank then click option'

A2

B3

C4

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Dividing by 1 or 3 which does not center the view.

Dividing height instead of width for x position.

Dividing width by 2 centers the Text horizontally inside GeometryReader.

3fill in blank

hard

Fix the error in the code to make the Rectangle adapt to half the GeometryReader's width.

iOS Swift

GeometryReader { geometry in
    Rectangle()
        .frame(width: geometry.size.[1] / 2, height: 100)
}

Drag options to blanks, or click blank then click option'

Aheight

Bsize

Cframe

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width for the frame width.

Trying to access non-existing properties like size or frame.

The width property of geometry.size gives the full width; dividing it by 2 sets half width.

4fill in blank

hard

Fill both blanks to create a VStack that adapts its padding based on GeometryReader's width.

iOS Swift

GeometryReader { geometry in
    VStack {
        Text("Adaptive Padding")
    }
    .padding(geometry.size.[1] / [2])
}

Drag options to blanks, or click blank then click option'

Awidth

Bheight

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width for padding.

Dividing by 3 instead of 2 for padding.

Padding is set to half the width by dividing geometry.size.width by 2.

5fill in blank

hard

Fill all three blanks to create a Text view that changes font size and position based on GeometryReader's size.

iOS Swift

GeometryReader { geometry in
    Text("Responsive Text")
        .font(.system(size: geometry.size.[1] / [2]))
        .position(x: geometry.size.width / [3], y: geometry.size.height / 2)
}

Drag options to blanks, or click blank then click option'

Aheight

Bwidth

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using height for font size instead of width.

Using wrong divisors for font size or position.

The font size is based on half the width (width / 2), and the x position is one third of the width (width / 3), centering vertically.

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