Why SwiftUI is the modern UI framework in iOS Swift - Build It to Prove It

Build: SwiftUI Benefits

This screen shows key reasons why SwiftUI is considered a modern UI framework for iOS apps.

Target UI

-------------------------
| SwiftUI Benefits       |
|-----------------------|
| * Declarative syntax   |
| * Live preview        |
| * Less code           |
| * Cross-platform      |
| * Accessibility built |
|                       |
| [Close]               |
-------------------------

Display a list of 5 reasons why SwiftUI is modern

Use a VStack with Text views for each reason

Add a header title at the top

Add a Close button at the bottom that prints 'Closed' when tapped

Starter Code

iOS Swift

import SwiftUI

struct SwiftUIBenefitsView: View {
    var body: some View {
        VStack {
            // TODO: Add header title here
            
            // TODO: Add list of reasons here
            
            Spacer()
            
            // TODO: Add Close button here
        }
        .padding()
    }
}

struct SwiftUIBenefitsView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIBenefitsView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct SwiftUIBenefitsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("SwiftUI Benefits")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)
            
            Text("* Declarative syntax")
            Text("* Live preview")
            Text("* Less code")
            Text("* Cross-platform")
            Text("* Accessibility built")
            
            Spacer()
            
            Button("Close") {
                print("Closed")
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

struct SwiftUIBenefitsView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIBenefitsView()
    }
}

This screen uses a vertical stack (VStack) to arrange the content from top to bottom.

The title uses a large, bold font to stand out.

Each reason is shown as a separate Text view with a bullet point for clarity.

The Close button is styled with a blue background and white text, filling the width for easy tapping.

When the Close button is tapped, it prints "Closed" to the console, simulating a close action.

This simple layout demonstrates SwiftUI's declarative syntax and easy UI building.

Final Result

Completed Screen

-------------------------
| SwiftUI Benefits       |
|-----------------------|
| * Declarative syntax   |
| * Live preview        |
| * Less code           |
| * Cross-platform      |
| * Accessibility built |
|                       |
| [Close]               |
-------------------------

Tapping the Close button prints 'Closed' in the debug console.

Stretch Goal

Add a toggle to switch between light and dark mode for the screen.

💡 Hint

Use @Environment(\.colorScheme) and a Toggle to switch colorScheme between .light and .dark.

Practice

1. Why is SwiftUI considered a modern UI framework for Apple devices?

easy

A. It automatically updates the UI when data changes.

B. It requires manual UI updates for every change.

C. It only works on iPhones, not other Apple devices.

D. It uses outdated programming patterns.

Solution

1. Step 1: Understand SwiftUI's data-driven UI

   SwiftUI automatically updates the user interface when the underlying data changes, reducing manual work.

2. Step 2: Compare with other options

   Options B, C, and D are incorrect because SwiftUI does not require manual updates, works across all Apple devices, and uses modern programming patterns.

3. Final Answer:

   It automatically updates the UI when data changes. -> Option A

4. Quick Check:

   Automatic UI updates = A [OK]

Hint: SwiftUI updates UI automatically with data changes [OK]

Common Mistakes:

• Thinking UI updates must be manual
• Believing SwiftUI only works on iPhone
• Confusing SwiftUI with older frameworks

2. Which of the following is the correct way to declare a simple SwiftUI Text view?

easy

A. Text = "Hello, SwiftUI!"

B. Text("Hello, SwiftUI!")

C. TextView("Hello, SwiftUI!")

D. UILabel(text: "Hello, SwiftUI!")

Solution

1. Step 1: Identify SwiftUI syntax for Text

   SwiftUI uses the Text view with a string parameter inside parentheses and quotes.

2. Step 2: Eliminate incorrect options

   UILabel is UIKit, TextView is not a SwiftUI type, and assigning Text with = is invalid syntax.

3. Final Answer:

   Text("Hello, SwiftUI!") -> Option B

4. Quick Check:

   SwiftUI Text syntax = D [OK]

Hint: SwiftUI Text uses Text("string") syntax [OK]

Common Mistakes:

• Using UIKit UILabel instead of SwiftUI Text
• Confusing TextView with Text
• Trying to assign Text like a variable

3. What will be displayed when this SwiftUI code runs?

struct ContentView: View {
  @State private var count = 0
  var body: some View {
    VStack {
      Text("Count: \(count)")
      Button("Increment") {
        count += 1
      }
    }
  }
}

medium

A. A text showing 'Count: 0' and a button labeled 'Increment' that increases count when tapped.

B. A static text 'Count: 0' with no button.

C. A button labeled 'Increment' but no text showing count.

D. The app crashes due to syntax error.

Solution

1. Step 1: Understand @State and UI update

   The @State variable 'count' starts at 0 and updates the UI automatically when changed.

2. Step 2: Analyze the VStack content

   The VStack shows a Text displaying the current count and a Button that increments count on tap, updating the Text.

3. Final Answer:

   A text showing 'Count: 0' and a button labeled 'Increment' that increases count when tapped. -> Option A

4. Quick Check:

   @State updates UI automatically = C [OK]

Hint: @State variables update UI automatically on change [OK]

Common Mistakes:

• Thinking UI won't update after count changes
• Missing the Button or Text in output
• Assuming syntax error where none exists

4. Identify the error in this SwiftUI code snippet:

struct ContentView: View {
  var body: some View {
    Text("Hello")
    Text("World")
  }
}

medium

A. Text views cannot be used in SwiftUI.

B. The code is correct and will compile.

C. Missing @State property wrapper.

D. Multiple views must be wrapped in a container like VStack.

Solution

1. Step 1: Check the body property return type

   The body must return a single View. Two Text views side by side without a container cause an error.

2. Step 2: Identify the fix

   Wrapping the Text views inside a VStack or other container fixes the error.

3. Final Answer:

   Multiple views must be wrapped in a container like VStack. -> Option D

4. Quick Check:

   Single View return rule = B [OK]

Hint: Wrap multiple views in VStack or similar container [OK]

Common Mistakes:

• Trying to return multiple views directly
• Confusing @State with view composition
• Assuming Text views are invalid

5. You want to create a SwiftUI app that works on iPhone, iPad, and Mac with one codebase. Which SwiftUI feature helps achieve this?

hard

A. Writing separate code for each device type.

B. Using UIKit views inside SwiftUI for each device.

C. SwiftUI's declarative syntax and cross-device compatibility.

D. SwiftUI only supports iPhone apps, so this is not possible.

Solution

1. Step 1: Understand SwiftUI's design goal

   SwiftUI is designed to work across all Apple platforms using the same codebase with declarative syntax.

2. Step 2: Evaluate other options

   UIKit is platform-specific, writing separate code defeats the purpose, and SwiftUI supports more than iPhone.

3. Final Answer:

   SwiftUI's declarative syntax and cross-device compatibility. -> Option C

4. Quick Check:

   Cross-device support = A [OK]

Hint: SwiftUI code runs on all Apple devices with one codebase [OK]

Common Mistakes:

• Thinking UIKit is needed for cross-device apps
• Believing separate code is required per device
• Assuming SwiftUI is iPhone-only