Custom ViewModifiers in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual result of this Custom ViewModifier?

Consider this SwiftUI code defining a custom modifier and applying it to a Text view. What will the text look like?

iOS Swift

struct Highlight: ViewModifier {
  func body(content: Content) -> some View {
    content
      .padding(10)
      .background(Color.yellow)
      .cornerRadius(8)
  }
}

Text("Hello SwiftUI")
  .modifier(Highlight())

A Text with red background and no padding

B Text with padding but transparent background

C Text with yellow background but no corner radius

D Text with yellow background, padding around text, and rounded corners

💡 Hint

Look at the order of modifiers inside the body function.

The Highlight modifier adds padding, then a yellow background, then rounds corners. So the text is padded inside a yellow rounded rectangle.

❓ lifecycle

intermediate

When is the body of a Custom ViewModifier called?

In SwiftUI, when does the body(content:) method of a ViewModifier get executed?

A Only when the modifier is explicitly reapplied in code

B Only once when the view is first created

C Every time the view's state changes and the view needs to update

D Never, it is only a placeholder method

💡 Hint

Think about how SwiftUI updates views reactively.

The body(content:) method is called whenever SwiftUI recomputes the view's body, which happens on state changes or environment updates.

📝 Syntax

advanced

Which option correctly defines a Custom ViewModifier with a parameter?

Choose the correct Swift code for a ViewModifier that takes a Color parameter to set the background color.

A

struct ColoredBackground: ViewModifier {
  var color: Color
  func body(content: Content) -> some View {
    content.background(color)
  }
}

B

struct ColoredBackground: ViewModifier {
  func body(content: Content, color: Color) -> some View {
    content.background(color)
  }
}

C

struct ColoredBackground: ViewModifier {
  var color: Color
  func body(content: Content) -> View {
    content.background(color)
  }
}

D

struct ColoredBackground: ViewModifier {
  var color: Color
  func body(content: Content) -> some View {
    content.background(Color)
  }
}

💡 Hint

Remember the body method signature and how to use parameters in structs.

Option A correctly declares a stored property color and uses it inside body. The method returns some View. Option A wrongly adds a parameter to body. Option A returns View instead of some View. Option A uses Color type instead of the variable color.

🔧 Debug

advanced

Why does this Custom ViewModifier cause a runtime crash?

Given this code, why does the app crash when applying the modifier?

iOS Swift

struct CrashModifier: ViewModifier {
  func body(content: Content) -> some View {
    content
      .background(nil)
  }
}

Text("Crash")
  .modifier(CrashModifier())

A The modifier is missing a required initializer

B Passing nil to background causes a runtime crash because background expects a View, not nil

C Text cannot have a background modifier

D The modifier must return a Text view explicitly

💡 Hint

Check the parameter type for the background modifier.

The background modifier expects a View as parameter. Passing nil is invalid and causes a crash.

🧠 Conceptual

expert

What is the benefit of using a Custom ViewModifier in SwiftUI?

Which of these best explains why you would create a custom ViewModifier?

A To reuse a set of view styling and behavior across multiple views easily

B To replace the need for creating new Views entirely

C To improve app performance by compiling views faster

D To allow views to modify their own state directly

💡 Hint

Think about code reuse and consistency in UI design.

Custom ViewModifiers let you package styling and behavior to apply consistently to many views, improving code reuse and clarity.

Practice

1. What is the main purpose of creating a custom ViewModifier in SwiftUI?

easy

A. To reuse a set of view styles and behaviors easily

B. To create a new type of view from scratch

C. To handle user input events directly

D. To manage app navigation between screens

Solution

1. Step 1: Understand what a ViewModifier does

   A ViewModifier bundles styling and behavior changes for views.

2. Step 2: Identify the main use

   It helps reuse these styles easily across many views.

3. Final Answer:

   To reuse a set of view styles and behaviors easily -> Option A

4. Quick Check:

   Custom ViewModifiers = reuse styles [OK]

Hint: Think: reuse styles and behaviors with one modifier [OK]

Common Mistakes:

• Confusing ViewModifier with creating new views
• Thinking it handles navigation or input directly
• Assuming it manages app state

2. Which of the following is the correct way to apply a custom ViewModifier named Highlight to a Text view?

easy

A. Text("Hello").modifier(Highlight())

B. Text("Hello").applyModifier(Highlight)

C. Text("Hello").useModifier(Highlight())

D. Text("Hello").addModifier(Highlight)

Solution

1. Step 1: Recall the correct method name

   The method to apply a ViewModifier is .modifier().

2. Step 2: Check syntax for applying Highlight

   It should be .modifier(Highlight()) with parentheses to create the modifier instance.

3. Final Answer:

   Text("Hello").modifier(Highlight()) -> Option A

4. Quick Check:

   Use .modifier() with instance [OK]

Hint: Remember: .modifier() takes an instance with () [OK]

Common Mistakes:

• Using wrong method names like applyModifier or addModifier
• Forgetting parentheses after modifier name
• Passing type instead of instance

3. Given this custom ViewModifier:

struct RedTitle: ViewModifier {
  func body(content: Content) -> some View {
    content
      .font(.title)
      .foregroundColor(.red)
  }
}

What will this code display?

Text("Welcome").modifier(RedTitle())

medium

A. Text "Welcome" with no changes

B. Text "Welcome" in default color with title font

C. Text "Welcome" in red color with default font

D. Text "Welcome" in red color with title font

Solution

1. Step 1: Analyze the RedTitle modifier

   It sets the font to title and text color to red.

2. Step 2: Apply modifier to Text("Welcome")

   The text will appear with title font size and red color.

3. Final Answer:

   Text "Welcome" in red color with title font -> Option D

4. Quick Check:

   RedTitle = red + title font [OK]

Hint: Look at modifier body: font and color changes [OK]

Common Mistakes:

• Ignoring the font change
• Assuming default color remains
• Confusing modifier effects

4. What is wrong with this custom ViewModifier code?

struct BlueBackground: ViewModifier {
  func body(content: Content) -> some View {
    content.background(Color.blue)
  }

  func body(content: Content) -> some View {
    content.padding()
  }
}

medium

A. Background modifier is not allowed inside ViewModifier

B. Two body functions cause a duplicate method error

C. Missing return keyword in body functions

D. Padding modifier must be applied before background

Solution

1. Step 1: Check method definitions in struct

   There are two body(content:) methods defined, which is not allowed.

2. Step 2: Understand Swift rules for method overloading

   Swift does not allow two methods with the same signature in one struct.

3. Final Answer:

   Two body functions cause a duplicate method error -> Option B

4. Quick Check:

   Duplicate body() methods = error [OK]

Hint: Only one body(content:) allowed per ViewModifier [OK]

Common Mistakes:

• Trying to overload body method
• Forgetting return keyword (not needed here)
• Misunderstanding modifier order rules

5. You want to create a custom ViewModifier that adds a rounded border only if a Boolean highlight is true. Which of these implementations correctly applies the border conditionally?

hard

A. struct ConditionalBorder: ViewModifier {
var highlight: Bool
func body(content: Content) -> some View {
if highlight {
content.border(Color.green, width: 2)
} else {
content
}
}
}

B. struct ConditionalBorder: ViewModifier {
var highlight: Bool
func body(content: Content) -> some View {
content.border(highlight ? Color.green : Color.clear, width: 2)
}
}

C. struct ConditionalBorder: ViewModifier {
var highlight: Bool
func body(content: Content) -> some View {
content
.border(Color.green, width: highlight ? 2 : 0)
}
}

D. struct ConditionalBorder: ViewModifier {
var highlight: Bool
func body(content: Content) -> some View {
content
.border(Color.green, width: highlight)
}
}

Solution

1. Step 1: Eliminate compile errors

   struct ConditionalBorder: ViewModifier { var highlight: Bool func body(content: Content) -> some View { if highlight { content.border(Color.green, width: 2) } else { content } } } returns different view types in if-else (compiler error). struct ConditionalBorder: ViewModifier { var highlight: Bool func body(content: Content) -> some View { content .border(Color.green, width: highlight) } } passes Bool to width (CGFloat expected, type error).

2. Step 2: Compare remaining options

   struct ConditionalBorder: ViewModifier { var highlight: Bool func body(content: Content) -> some View { content.border(highlight ? Color.green : Color.clear, width: 2) } } uses Color.clear with fixed width 2: invisible but expands frame (layout shift). struct ConditionalBorder: ViewModifier { var highlight: Bool func body(content: Content) -> some View { content .border(Color.green, width: highlight ? 2 : 0) } } uses conditional width 2/0: border only when true, no layout shift.

3. Final Answer:

   content.border(Color.green, width: highlight ? 2 : 0) -> Option C

4. Quick Check:

   Conditional width = correct conditional border [OK]

Hint: Ternary on width for conditional border without layout shift [OK]

Common Mistakes:

• Returning different view types in if-else inside body
• Passing Bool where CGFloat is expected
• Using Color.clear with fixed width (layout shift)