Overlay and background modifiers in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Overlay Modifier Behavior

What will be the visible color of the circle after applying the overlay modifier in this SwiftUI code?

iOS Swift

Circle()
  .fill(Color.blue)
  .frame(width: 100, height: 100)
  .overlay(Circle().stroke(Color.red, lineWidth: 10))

A A blue circle with a thin red border inside

B A red circle with a blue border

C A blue circle with a thick red border around it

D A solid red circle with no border

💡 Hint

Remember that overlay places the new view on top of the original view.

The overlay modifier places the red stroked circle on top of the blue filled circle, so you see a blue circle with a red border.

❓ ui_behavior

intermediate

Background Modifier Effect

What will be the background color behind the text in this SwiftUI code?

iOS Swift

Text("Hello")
  .padding()
  .background(Color.yellow)
  .padding()
  .background(Color.green)

A Text with yellow background and green background behind the yellow

B Text with green background only

C Text with yellow background only

D Text with no background color

💡 Hint

Each background applies behind the view it modifies, including padding.

The first background applies yellow behind the padded text. The second background applies green behind the entire view including the first padding and background.

❓ lifecycle

advanced

Overlay Modifier and View Size

Given this SwiftUI code, what is the size of the overlay circle relative to the base rectangle?

iOS Swift

Rectangle()
  .fill(Color.gray)
  .frame(width: 150, height: 100)
  .overlay(Circle().fill(Color.red).frame(width: 50, height: 50))

A The red circle is invisible because it has no frame

B The red circle is 50x50 points centered on the 150x100 rectangle

C The red circle stretches to fill the entire rectangle

D The red circle is 150x100 points, same as the rectangle

💡 Hint

Overlay uses the size of the overlay view unless you specify a frame.

The overlay circle has an explicit frame of 50x50 points, so it appears centered and smaller than the 150x100 rectangle.

🔧 Debug

advanced

Unexpected Overlay Position

Why does this overlay appear shifted to the top-left instead of centered?

iOS Swift

Text("SwiftUI")
  .overlay(
    Circle()
      .stroke(Color.blue, lineWidth: 3)
      .frame(width: 100, height: 100)
  )

A The stroke modifier causes the overlay to shift

B The overlay circle frame is ignored and defaults to text size

C The overlay modifier requires explicit alignment parameter to center

D The overlay circle does not inherit the size of the text, so it aligns top-left by default

💡 Hint

Overlay aligns the overlay view to the top-left if sizes differ and no alignment is set.

Because the overlay circle has a fixed frame larger than the text, it aligns top-left by default, causing the shift.

🧠 Conceptual

expert

Difference Between Overlay and Background

Which statement correctly describes the difference between overlay and background modifiers in SwiftUI?

A Overlay places a view on top of the original view; background places a view behind it

B Overlay replaces the original view; background adds a border around it

C Overlay only works with shapes; background only works with colors

D Overlay and background are interchangeable and produce the same effect

💡 Hint

Think about layering: what is in front and what is behind?

Overlay adds a view on top of the original view, while background adds a view behind it, affecting layering order.