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.

Practice

1. What does the .overlay() modifier do in SwiftUI?

easy

A. Removes the existing view

B. Adds a view behind the existing view

C. Adds a view on top of the existing view

D. Changes the size of the existing view

Solution

1. Step 1: Understand the purpose of .overlay()

   The .overlay() modifier places a new view on top of the original view, layering it above.

2. Step 2: Compare with other modifiers

   .background() adds behind, but .overlay() adds on top, so it does not add behind or remove views.

3. Final Answer:

   Adds a view on top of the existing view -> Option C

4. Quick Check:

   Overlay = on top [OK]

Hint: Overlay means 'on top', background means 'behind' [OK]

Common Mistakes:

• Confusing overlay with background
• Thinking overlay removes views
• Assuming overlay changes size

2. Which of the following is the correct syntax to add a red circle as a background to a Text view in SwiftUI?

easy

A. Text("Hello").circle().background(Color.red)

B. Text("Hello").background(Circle().fill(Color.red))

C. Text("Hello").background(Color.red).circle()

D. Text("Hello").overlay(Circle().fill(Color.red))

Solution

1. Step 1: Identify correct modifier usage

   To add a shape behind a view, use .background() with the shape view inside.

2. Step 2: Check syntax correctness

   Text("Hello").background(Circle().fill(Color.red)) correctly adds a red circle behind the text. Other options misuse modifiers or order.

3. Final Answer:

   Text("Hello").background(Circle().fill(Color.red)) -> Option B

4. Quick Check:

   Background with shape inside = correct syntax [OK]

Hint: Background wraps shape inside parentheses after .background() [OK]

Common Mistakes:

• Using overlay instead of background for behind view
• Calling .circle() on Text (no such modifier)
• Placing background after shape incorrectly

3. What will be the visible result of this SwiftUI code?

Text("Hi")
  .background(Color.yellow)
  .overlay(Text("Overlay"))

medium

A. Text "Hi" with yellow background and "Overlay" text on top

B. Text "Hi" with yellow background only, no overlay text

C. Text "Overlay" with yellow background, "Hi" hidden

D. Only yellow background visible, no text

Solution

1. Step 1: Understand modifier order

   The .background(Color.yellow) adds a yellow color behind "Hi" text. Then .overlay(Text("Overlay")) places "Overlay" text on top.

2. Step 2: Visual layering result

   Both texts are visible: "Hi" with yellow behind, and "Overlay" layered above.

3. Final Answer:

   Text "Hi" with yellow background and "Overlay" text on top -> Option A

4. Quick Check:

   Background behind, overlay on top = layered views [OK]

Hint: Background is behind, overlay is on top, both visible [OK]

Common Mistakes:

• Thinking overlay replaces original text
• Ignoring modifier order effects
• Assuming background covers overlay

4. Identify the error in this SwiftUI code snippet:

Image(systemName: "star")
  .overlay(Circle().stroke(Color.blue))
  .background(Circle().fill(Color.yellow))
  .background(Color.red)

medium

A. Circle cannot be used inside overlay

B. Overlay must come after all backgrounds

C. Image cannot have background or overlay modifiers

D. Multiple background modifiers cause only the first to apply

Solution

1. Step 1: Analyze multiple background modifiers

   Applying .background() twice stacks backgrounds, but only the first background modifier applies directly behind the view, later ones get layered behind that.

2. Step 2: Understand layering order

   The last .background(Color.red) will be behind the yellow circle background, so the red color might be hidden or layered behind unexpectedly.

3. Final Answer:

   Multiple background modifiers cause only the first to apply -> Option D

4. Quick Check:

   Last background behind earlier ones visually [OK]

Hint: Multiple backgrounds stack but first is closest behind view [OK]

Common Mistakes:

• Thinking overlay must be last
• Believing Circle can't be overlay
• Assuming Image can't have modifiers

5. You want to create a button with a blue rounded rectangle background and a white checkmark icon overlay on top. Which SwiftUI code correctly achieves this layering?

hard

A. Image(systemName: "checkmark")
.background(RoundedRectangle(cornerRadius: 10).fill(Color.blue))
.overlay(Image(systemName: "checkmark").foregroundColor(.white))

B. Image(systemName: "checkmark")
.background(Color.blue.cornerRadius(10))
.overlay(Color.white.opacity(0.5))

C. Image(systemName: "checkmark")
.overlay(Color.blue.cornerRadius(10))

D. Image(systemName: "checkmark")
.background(Image(systemName: "checkmark"))
.overlay(Color.blue.cornerRadius(10))

Solution

1. Step 1: Add blue rounded rectangle background

   Use .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue)) to create a blue rounded rectangle behind the icon.

2. Step 2: Overlay white checkmark icon

   Use .overlay(Image(systemName: "checkmark").foregroundColor(.white)) to place a white checkmark on top of the background.

3. Step 3: Verify layering and colors

   This layering ensures the blue shape is behind and the white icon is visible on top.

4. Final Answer:

   Image(systemName: "checkmark") .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue)) .overlay(Image(systemName: "checkmark").foregroundColor(.white)) -> Option A

5. Quick Check:

   Background shape + overlay icon = correct layering [OK]

Hint: Background for shape, overlay for icon on top [OK]

Common Mistakes:

• Using overlay for background shape
• Overlaying color instead of icon
• Background with icon instead of shape