Frame modifier in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the size of the red rectangle after applying the frame modifier?

Consider this SwiftUI code snippet:

Rectangle()
  .fill(Color.red)
  .frame(width: 100, height: 50)

What will be the size of the red rectangle displayed on screen?

iOS Swift

Rectangle()
  .fill(Color.red)
  .frame(width: 100, height: 50)

A Width 100 points and height 50 points

B Width and height fill the parent view

C Width 50 points and height 100 points

D Size depends on the device screen size

💡 Hint

The frame modifier sets the exact size of the view.

The frame modifier with width and height sets the view's size explicitly to those values.

❓ ui_behavior

intermediate

How does the frame modifier affect alignment inside a VStack?

Given this SwiftUI code:

VStack {
  Text("Hello")
    .frame(width: 200, height: 50, alignment: .leading)
  Text("World")
}

How will the "Hello" text be aligned inside its frame?

iOS Swift

VStack {
  Text("Hello")
    .frame(width: 200, height: 50, alignment: .leading)
  Text("World")
}

A "Hello" text aligned to the right inside the 200x50 frame

B "Hello" text centered inside the 200x50 frame

C "Hello" text aligned to the left inside the 200x50 frame

D Alignment has no effect inside frame modifier

💡 Hint

The alignment parameter controls content position inside the frame.

The alignment: .leading parameter aligns the text to the left inside the frame.

❓ lifecycle

advanced

What happens if you apply multiple frame modifiers with different sizes?

Analyze this SwiftUI code:

Circle()
  .frame(width: 100, height: 100)
  .frame(width: 200, height: 50)

What will be the final size of the Circle on screen?

iOS Swift

Circle()
  .frame(width: 100, height: 100)
  .frame(width: 200, height: 50)

A Width 100 points and height 100 points (first frame applied)

B Width 200 points and height 50 points (last frame applied)

C Width 200 points and height 100 points (mixed sizes)

D Circle will fill the parent view ignoring frames

💡 Hint

Modifiers are applied in order, last one affects final size.

The last frame modifier sets the final size to width 200 and height 50.

📝 Syntax

advanced

Which frame modifier code snippet compiles without error?

Choose the correct SwiftUI frame modifier syntax from these options:

A .frame(width = 100, height = 50, alignment = .center)

B .frame(100, 50, .center)

C .frame(width: 100 height: 50 alignment: .center)

D .frame(width: 100, height: 50, alignment: .center)

💡 Hint

Swift function parameters use colons, not equals signs.

Option D uses correct parameter syntax with colons and commas.

🧠 Conceptual

expert

What is the effect of using .frame(maxWidth: .infinity, maxHeight: .infinity) on a view?

Consider this SwiftUI code:

Text("Stretch me")
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(Color.blue)

What will be the behavior of the Text view inside its parent?

iOS Swift

Text("Stretch me")
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(Color.blue)

A The Text view expands to fill all available space in both width and height

B The Text view expands only vertically but not horizontally

C The Text view expands only horizontally but not vertically

D The Text view keeps its natural size and ignores maxWidth and maxHeight

💡 Hint

Using .infinity for maxWidth and maxHeight tells the view to grow as much as possible.

Setting maxWidth and maxHeight to .infinity makes the view expand to fill all available space in its parent container.

Practice

1. What does the frame modifier do in SwiftUI?

easy

A. Sets the size and alignment of a view

B. Changes the color of a view

C. Adds a shadow to a view

D. Animates the view's position

Solution

1. Step 1: Understand the purpose of frame modifier

   The frame modifier is used to set the width, height, and alignment of a view in SwiftUI.

2. Step 2: Compare with other modifiers

   Other modifiers like color, shadow, or animation do different things unrelated to size or alignment.

3. Final Answer:

   Sets the size and alignment of a view -> Option A

4. Quick Check:

   frame modifier = size and alignment [OK]

Hint: Frame controls size and position inside its container [OK]

Common Mistakes:

• Confusing frame with color or shadow modifiers
• Thinking frame animates views
• Assuming frame changes view content

2. Which of the following is the correct syntax to set a fixed width of 100 and height of 50 using the frame modifier?

easy

A. .frame(width = 100, height = 50)

B. .frame(100, 50)

C. .frame(width: 100, height: 50)

D. .frame(size: CGSize(width: 100, height: 50))

Solution

1. Step 1: Recall SwiftUI frame syntax

   The frame modifier uses named parameters: width and height with colons, like width: 100.

2. Step 2: Check each option

   .frame(width: 100, height: 50) uses correct syntax with named parameters and colons. Options A and B use incorrect syntax. .frame(size: CGSize(width: 100, height: 50)) is invalid for frame modifier.

3. Final Answer:

   .frame(width: 100, height: 50) -> Option C

4. Quick Check:

   frame syntax = named parameters with colons [OK]

Hint: Use named parameters with colons in frame modifier [OK]

Common Mistakes:

• Omitting parameter names
• Using equal signs instead of colons
• Passing CGSize directly to frame

3. What will be the size of the red rectangle on screen after applying this code?

Rectangle()
  .fill(Color.red)
  .frame(width: 150, height: 100)
  .frame(width: 200, height: 200)

medium

A. 200 width and 200 height

B. 150 width and 100 height

C. 350 width and 300 height

D. 100 width and 150 height

Solution

1. Step 1: Understand frame stacking

   Each frame modifier wraps the view with a new size. The last frame sets the final size.

2. Step 2: Analyze the code

   The first frame sets 150x100, but the second frame wraps that with 200x200, so the final size is 200x200.

3. Final Answer:

   200 width and 200 height -> Option A

4. Quick Check:

   Last frame modifier sets final size [OK]

Hint: Last frame modifier determines final size [OK]

Common Mistakes:

• Adding widths and heights of stacked frames
• Assuming first frame size remains final
• Confusing fill color with size

4. Identify the error in this SwiftUI code snippet:

Text("Hello")
  .frame(width: 100 height: 50)

medium

A. frame modifier requires alignment parameter

B. Text cannot use frame modifier

C. Width and height values must be strings

D. Missing comma between width and height parameters

Solution

1. Step 1: Check parameter syntax

   Parameters in SwiftUI modifiers must be separated by commas.

2. Step 2: Locate the error

   The code misses a comma between width: 100 and height: 50, causing a syntax error.

3. Final Answer:

   Missing comma between width and height parameters -> Option D

4. Quick Check:

   Parameters need commas [OK]

Hint: Separate parameters with commas in modifiers [OK]

Common Mistakes:

• Omitting commas between parameters
• Thinking frame can't be used on Text
• Using wrong data types for width/height

5. You want a blue circle to appear centered inside a 300x300 frame but keep the circle's diameter at 100. Which code correctly achieves this?

hard

A. Circle().foregroundColor(.blue).frame(width: 300, height: 300)

B. Circle().frame(width: 100, height: 100).frame(width: 300, height: 300, alignment: .center).foregroundColor(.blue)

C. Circle().frame(width: 100, height: 100, alignment: .center).foregroundColor(.blue)

D. Circle().frame(width: 300, height: 300).frame(width: 100, height: 100).foregroundColor(.blue)

Solution

1. Step 1: Set circle size first

   The circle's diameter should be fixed at 100x100 using the first frame modifier.

2. Step 2: Wrap circle in larger frame with center alignment

   The second frame sets the container size to 300x300 and centers the circle inside it.

3. Step 3: Apply color

   Foreground color is set to blue after sizing.

4. Final Answer:

   Circle().frame(width: 100, height: 100).frame(width: 300, height: 300, alignment: .center).foregroundColor(.blue) -> Option B

5. Quick Check:

   Inner frame sets size, outer frame centers [OK]

Hint: Use nested frames: inner for size, outer for container [OK]

Common Mistakes:

• Setting large frame first then small frame overrides size
• Missing alignment parameter for centering
• Applying color before sizing causing unexpected layout