Introduction to SwiftUI

# CHAPTER 10

Introduction to SwiftUI #

1. Introduction #

2. Learning Objectives #

• Explain the difference between Declarative UI (SwiftUI) and Imperative UI (UIKit).

• Understand the @main App lifecycle entry point.

• Implement the fundamental View protocol and its body requirement.

• Stack multiple View Modifiers to style UI elements.

• Utilize the Xcode Canvas to preview UI changes instantly.

3. Declarative vs Imperative UI #

1. 1. "Create a button."

1. 2. "Move it 50 pixels down."

1. 3. "Color it blue."

1. 4. "Add it to the screen."

In SwiftUI (Declarative), you don't give instructions. You simply declare *what* you want the final result to be, and the engine figures out how to draw it! *"I want a blue button with 50 pixels of padding."* That's it!

4. The App Lifecycle (@main) #

import SwiftUI

@main
struct MyAwesomeApp: App {
    var body: some Scene {
        WindowGroup {
            // This tells the app which Screen to load first!
            ContentView() 
        }
    }
}

5. The View Protocol #

import SwiftUI

// 1. We create a Struct conforming to the View protocol
struct ContentView: View {
    
    // 2. We MUST provide the 'body' property
    var body: some View {
        
        // 3. We declare what we want to see!
        Text("Welcome to SwiftUI!")
    }
}

6. The Magic of Modifiers #

struct ContentView: View {
    var body: some View {
        Text("Welcome to SwiftUI!")
            .font(.largeTitle)          // Makes it huge
            .fontWeight(.heavy)         // Makes it thick
            .foregroundColor(.white)    // Text color
            .padding(20)                // Adds breathing room inside the box
            .background(Color.blue)     // Background box color
            .cornerRadius(10)           // Rounds the corners of the background box!
    }
}

*(Notice the order matters! If you put .background BEFORE .padding, the blue background will only cover the text tightly, and the padding will be added outside the blue box!)*

7. The Xcode Canvas (Live Preview) #

#Preview {
    ContentView() // Instantly renders the screen on the right side of your Mac!
}

8. Mini Project: Welcome App UI #

import SwiftUI

struct WelcomeView: View {
    var body: some View {
        Text("iOS Developer")
            .font(.title2)
            .bold()
            .foregroundColor(.white)
            .padding(.horizontal, 40) // 40px padding on Left/Right
            .padding(.vertical, 15)   // 15px padding on Top/Bottom
            .background(
                // We can use Gradients as backgrounds!
                LinearGradient(colors: [.purple, .blue], startPoint: .leading, endPoint: .trailing)
            )
            .clipShape(Capsule()) // Perfectly rounds the edges into a pill shape
            .shadow(radius: 10)   // Adds a drop shadow!
    }
}

#Preview {
    WelcomeView()
}

9. Common Mistakes #

• Returning Multiple Views: The body property is strictly configured to return exactly ONE view. If you try to write two Text components on top of each other:

• Extracting Views: If your body property gets longer than 50 lines because you have 20 modifiers, your code is unreadable. Highlight a block of UI code in Xcode, Right-Click, and select "Extract Subview". Xcode will automatically move it into a smaller, reusable struct!

1. 1. Create a ContentView struct that outputs a Text component saying "My First App".

• Q: Explain the purpose of the @main attribute in a modern SwiftUI application lifecycle.

• Q: Detail the concept of "View Modifiers" in SwiftUI. Why is the sequence in which modifiers (like .padding() and .background()) are applied architecturally critical to the final visual render?

• Q: Why did Apple heavily lean into utilizing structs (Value Types) for SwiftUI Views rather than traditional classes (Reference Types)? How does this impact rendering performance?

17. Next Chapter Recommendation #