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.