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.