Why Text view and modifiers in iOS Swift? - Purpose & Use Cases

The Big Idea

Discover how a few simple commands can transform your app's text from plain to polished instantly!

The Scenario

Imagine you want to show a simple message on your app screen, but you have to write long code to set font size, color, and alignment manually for each text piece.

The Problem

Doing all these style changes by hand takes a lot of time and can easily cause mistakes like inconsistent fonts or colors. It also makes your code messy and hard to change later.

The Solution

Using Text views with modifiers lets you write clean, short code to display text and quickly change its look by stacking simple style commands. This keeps your code neat and easy to update.

Before vs After

✗ Before

let label = UILabel()
label.text = "Hello"
label.font = UIFont.systemFont(ofSize: 20)
label.textColor = UIColor.red
label.textAlignment = .center

✓ After

Text("Hello")
  .font(.system(size: 20))
  .foregroundColor(.red)
  .multilineTextAlignment(.center)

What It Enables

You can create beautiful, consistent text displays with minimal code and easily adjust styles anytime.

Real Life Example

Think about a news app showing headlines in bold and red, and descriptions in smaller gray text -- all done quickly with Text views and modifiers.

Key Takeaways

Manual styling of text is slow and error-prone.

Text views with modifiers simplify styling and keep code clean.

This approach makes your app's text look great and easy to update.

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