The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

SwiftUI Basics

Next ►
►

SwiftUI is a modern framework introduced by Apple for building user interfaces across all Apple platforms using Swift. It provides a declarative syntax, which means you can simply state what your UI should do, and SwiftUI takes care of the rest. This approach makes it easier to build complex interfaces with less code.

Key Concepts

  1. Declarative Syntax

  • Declarative vs. Imperative: In declarative syntax, you describe what the UI should look like and how it should behave. In contrast, imperative syntax involves writing step-by-step instructions to achieve the desired UI.
  • Example: In SwiftUI, you declare a button like this: 
    Button(action: {
    print("Button tapped!")
}) {
    Text("Tap me!")
}

  1. Views and Modifiers

  • Views: The building blocks of SwiftUI. Everything you see on the screen is a view.
  • Modifiers: Functions that you can chain to a view to change its appearance or behavior. 
    Text("Hello, SwiftUI!")
    .font(.largeTitle)
    .foregroundColor(.blue)

  1. State Management

  • @State: A property wrapper that allows a view to update when the state changes. 
    @State private var isOn = false

Toggle(isOn: $isOn) {
    Text("Switch")
}

  1. Layout System

  • Stacks: SwiftUI uses stacks to arrange views. There are three main types:
    • HStack: Arranges views horizontally.
    • VStack: Arranges views vertically.
    • ZStack: Overlays views on top of each other.
    VStack {
    Text("Top")
    Text("Bottom")
}

  1. Navigation

  • NavigationView: A container that manages navigation between views. 
    NavigationView {
    NavigationLink(destination: Text("Second View")) {
        Text("Go to Second View")
    }
}

Practical Examples

Example 1: Simple Text View

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

  • Text("Hello, SwiftUI!"): Creates a text view.
  • .font(.largeTitle): Sets the font size to large title.
  • .foregroundColor(.blue): Changes the text color to blue.

Example 2: Button with Action

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

  • Button(action: { ... }) { ... }: Creates a button with an action.
  • Text("Tap me!"): The label of the button.
  • .padding(), .background(Color.blue), .foregroundColor(.white), .cornerRadius(10): Modifiers to style the button.

Example 3: State Management with Toggle

import SwiftUI

struct ContentView: View {
    @State private var isOn = false

    var body: some View {
        VStack {
            Toggle(isOn: $isOn) {
                Text("Switch")
            }
            Text(isOn ? "Switch is ON" : "Switch is OFF")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

  • @State private var isOn = false: Declares a state variable.
  • Toggle(isOn: $isOn) { ... }: Creates a toggle switch bound to the state variable.
  • Text(isOn ? "Switch is ON" : "Switch is OFF"): Displays text based on the state.

Practical Exercises

Exercise 1: Create a Counter App

Task: Create a simple app with a button that increments a counter each time it is pressed.

Solution:

import SwiftUI

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        VStack {
            Text("Counter: \(counter)")
                .font(.largeTitle)
            Button(action: {
                counter += 1
            }) {
                Text("Increment")
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

  • @State private var counter = 0: Declares a state variable for the counter.
  • Text("Counter: \\(counter)"): Displays the current counter value.
  • Button(action: { counter += 1 }) { ... }: Increments the counter when the button is pressed.

Exercise 2: Create a Simple Form

Task: Create a form with text fields for entering a name and age, and a button to submit the form.

Solution:

import SwiftUI

struct ContentView: View {
    @State private var name = ""
    @State private var age = ""

    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField("Enter your age", text: $age)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
            Button(action: {
                print("Name: \(name), Age: \(age)")
            }) {
                Text("Submit")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

  • @State private var name = "", @State private var age = "": Declare state variables for the form inputs.
  • TextField("Enter your name", text: $name): Creates a text field for the name.
  • TextField("Enter your age", text: $age): Creates a text field for the age.
  • Button(action: { print("Name: \\(name), Age: \\(age)") }) { ... }: Prints the entered name and age when the button is pressed.

Common Mistakes and Tips

  • Forgetting @State: Always use @State for variables that need to update the UI.
  • Using Modifiers Correctly: Modifiers should be chained in the correct order to achieve the desired effect.
  • Previewing: Use the preview feature in Xcode to see changes in real-time.

Conclusion

In this section, you learned the basics of SwiftUI, including its declarative syntax, views and modifiers, state management, layout system, and navigation. You also saw practical examples and exercises to reinforce these concepts. With SwiftUI, you can build beautiful and responsive user interfaces with less code and more efficiency. In the next module, you will dive deeper into iOS development using Swift and SwiftUI.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved