Text view and modifiers in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the color of the text shown?

Consider this SwiftUI code snippet. What color will the text appear on screen?

iOS Swift

Text("Hello SwiftUI")
  .foregroundColor(.red)
  .background(Color.yellow)

A Yellow text on red background

B Red text on yellow background

C Black text on yellow background

D Red text on transparent background

💡 Hint

The foregroundColor modifier changes the text color, background changes behind the text.

The foregroundColor(.red) sets the text color to red. The background(Color.yellow) sets the background behind the text to yellow.

📝 Syntax

intermediate

Which code correctly makes the text bold and italic?

Choose the SwiftUI code that applies both bold and italic styles to the text.

A Text("SwiftUI").bold().italic()

B Text("SwiftUI").font(.bold).italic()

C Text("SwiftUI").fontWeight(.bold).italic()

D Text("SwiftUI").italic().bold()

💡 Hint

bold() and italic() are modifiers that can be chained in any order.

Both bold() and italic() are valid modifiers and can be chained in any order. font(.bold) is invalid because font expects a Font value, not a weight.

❓ lifecycle

advanced

What happens if you apply multiple foregroundColor modifiers?

Given this code, what color will the text display?

iOS Swift

Text("Hello")
  .foregroundColor(.blue)
  .foregroundColor(.green)

A Text with gradient from blue to green

B Blue text

C Green text

D Text with default color

💡 Hint

Later modifiers override earlier ones.

In SwiftUI, modifiers are applied in order. The last foregroundColor(.green) overrides the earlier blue color.

🔧 Debug

advanced

Why does this code cause a compile error?

Identify the error in this SwiftUI code snippet:

iOS Swift

Text("Welcome")
  .fontWeight("bold")

A Missing parentheses after fontWeight

B Text cannot have fontWeight modifier

C fontWeight must be called before Text()

D fontWeight expects a Font.Weight value, not a String

💡 Hint

Check the type of argument fontWeight expects.

fontWeight modifier requires a Font.Weight enum value like .bold, not a string literal.

🧠 Conceptual

expert

How does the order of modifiers affect the final text appearance?

Given these two code snippets, which statement is true about their rendered text?

A Text("Hi").padding().background(Color.gray) adds padding inside the background

B Text("Hi").background(Color.gray).padding() adds padding inside the background

C Both snippets produce identical UI

D Padding and background order does not affect layout

💡 Hint

Think about what area the background color covers relative to padding.

In the first snippet, padding is applied first, then background covers the padded area. In the second, background covers only the text, then padding adds space outside it.

Practice

1. What does the Text view do in SwiftUI?

easy

A. Creates a button for user interaction

B. Displays a string of text on the screen

C. Draws a rectangle shape

D. Plays a video clip

Solution

1. Step 1: Understand the role of Text view

   The Text view is designed to show words or sentences on the screen in SwiftUI.

2. Step 2: Differentiate from other views

   Buttons, shapes, and media players serve different purposes, not displaying plain text.

3. Final Answer:

   Displays a string of text on the screen -> Option B

4. Quick Check:

   Text view = shows text [OK]

Hint: Text view always shows words on screen [OK]

Common Mistakes:

• Confusing Text with Button or Image
• Thinking Text plays media
• Assuming Text draws shapes

2. Which of the following is the correct way to change the font size of a Text view to 24 points?

easy

A. Text("Hello").font(.system(size: 24))

B. Text("Hello").fontSize(24)

C. Text("Hello").setFont(24)

D. Text("Hello").fontSize = 24

Solution

1. Step 1: Recall SwiftUI font modifier syntax

   The correct modifier to set font size is .font(.system(size: value)).

2. Step 2: Check each option

   Only Text("Hello").font(.system(size: 24)) uses the correct SwiftUI syntax. Others are invalid or do not exist.

3. Final Answer:

   Text("Hello").font(.system(size: 24)) -> Option A

4. Quick Check:

   Use .font(.system(size:)) for font size [OK]

Hint: Use .font(.system(size:)) to set font size [OK]

Common Mistakes:

• Using non-existent .fontSize modifier
• Trying to assign fontSize property directly
• Confusing method names

3. What will be the color of the text displayed by this code?

Text("Welcome")
  .foregroundColor(.red)
  .foregroundColor(.blue)

medium

A. Red

B. Purple

C. Blue

D. Black (default)

Solution

1. Step 1: Understand modifier chaining order

   Modifiers apply in order; the last .foregroundColor overrides previous ones.

2. Step 2: Identify final color

   The last color set is .blue, so the text color will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Last modifier wins = Blue [OK]

Hint: Last color modifier sets the text color [OK]

Common Mistakes:

• Thinking colors combine or blend
• Assuming first modifier applies
• Ignoring modifier order

4. Identify the error in this SwiftUI code snippet:

Text("Hello")
  .font(.title)
  .padding(10, 20)

medium

A. Padding modifier does not accept two numbers like that

B. Text view cannot have modifiers chained

C. Font modifier .title is invalid

D. Padding modifier requires only one argument

Solution

1. Step 1: Check padding modifier syntax

   The .padding() modifier accepts either no arguments, one argument for uniform padding, or a specific edge set with length.

2. Step 2: Analyze given arguments

   Passing two numbers directly like .padding(10, 20) is invalid syntax in SwiftUI.

3. Final Answer:

   Padding modifier does not accept two numbers like that -> Option A

4. Quick Check:

   .padding() needs one argument or edge set [OK]

Hint: Padding takes one value or edges + value [OK]

Common Mistakes:

• Passing multiple numbers directly to padding
• Confusing padding with frame size
• Assuming .title font is invalid

5. You want to create a Text view that shows "SwiftUI Rocks!" in large bold font, colored green, with padding around it. Which code snippet achieves this correctly?

hard

A. Text("SwiftUI Rocks!")
.font(.bold.largeTitle)
.foregroundColor(.green)
.padding()

B. Text("SwiftUI Rocks!")
.font(.largeTitle.bold)
.foregroundColor(.green)
.padding()

C. Text("SwiftUI Rocks!")
.font(.largeTitle)
.foregroundColor(.green.bold())
.padding()

D. Text("SwiftUI Rocks!")
.font(.largeTitle.bold())
.foregroundColor(.green)
.padding()

Solution

1. Step 1: Apply bold to font correctly

   Using .font(.largeTitle.bold()) chains the bold style properly with the font size.

2. Step 2: Set color and padding

   .foregroundColor(.green) sets the text color, and .padding() adds default padding around the text.

3. Step 3: Check other options for errors

   Text("SwiftUI Rocks!") .font(.largeTitle).bold() .foregroundColor(.green) .padding() tries to call .bold() separately which is invalid on Font. Text("SwiftUI Rocks!") .font(.largeTitle) .foregroundColor(.green.bold()) .padding() tries to bold the color, which is incorrect. Text("SwiftUI Rocks!") .font(.bold.largeTitle) .foregroundColor(.green) .padding() uses invalid font syntax.

4. Final Answer:

   Text("SwiftUI Rocks!") .font(.largeTitle.bold()) .foregroundColor(.green) .padding() -> Option D

5. Quick Check:

   Use .font(.largeTitle.bold()) for bold large font [OK]

Hint: Chain .bold() inside .font() for bold text [OK]

Common Mistakes:

• Calling .bold() separately on Text or Font
• Trying to bold the color
• Using invalid font modifier order