Swift SwiftUI Introduction

Welcome to the exciting world of SwiftUI! If you're looking to build beautiful, responsive user interfaces for Apple platforms with less code and more power, you're in the right place. This guide will introduce you to SwiftUI, Apple's modern UI framework that's revolutionizing how developers create apps for iOS, macOS, watchOS, and tvOS.

What is SwiftUI?

SwiftUI is a declarative UI framework introduced by Apple in 2019. Unlike the imperative approach of UIKit where you manually manage the UI state, SwiftUI allows you to declare what your UI should look like and how it should behave under different states, and then the framework takes care of how to make that happen.

Key characteristics of SwiftUI include:

Declarative syntax: Describe your UI with simple, readable code
Automatic updates: UI automatically stays in sync with your app's data
Composition: Build complex UIs from simple reusable views
Cross-platform: Write once, deploy across all Apple platforms
Live preview: See your changes in real-time while coding

Setting Up Your First SwiftUI Project

Let's start by creating a simple SwiftUI application:

Open Xcode and select "Create a new Xcode project"
Choose the "App" template under the iOS, macOS, watchOS, or tvOS tab
Name your project, select "SwiftUI" for the interface, and "SwiftUI App" for life cycle
Choose a location to save your project and click "Create"

Understanding SwiftUI Basics

The ContentView Structure

When you create a new SwiftUI project, Xcode generates a ContentView.swift file with a structure similar to this:

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

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

This code defines:

A ContentView struct that conforms to the View protocol
A body property that returns the view's content
A ContentView_Previews struct for displaying a preview in Xcode

Basic SwiftUI Views

SwiftUI comes with many built-in views. Here are some of the most common ones:

Text

swift
Text("Hello, SwiftUI!")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .padding()

This creates a text label with large title font, blue color, and padding around it.

Image

swift
Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)

This displays an image from your assets catalog, makes it resizable, maintains its aspect ratio, and constrains it to a 200×200 frame.

Button

swift
Button(action: {
    print("Button tapped!")
}) {
    Text("Tap Me")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

This creates a button that prints a message when tapped and has custom styling.

Layout in SwiftUI

SwiftUI uses stacks for layout: VStack (vertical), HStack (horizontal), and ZStack (overlapping). Here's a simple example combining these:

swift
VStack(spacing: 20) {
    Text("SwiftUI Layout Example")
        .font(.headline)
    
    HStack(spacing: 15) {
        Text("Left")
        Spacer()
        Text("Right")
    }
    .padding()
    .background(Color.gray.opacity(0.2))
    .cornerRadius(10)
    
    ZStack {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
        
        Text("Overlay")
            .foregroundColor(.white)
    }
}
.padding()

This creates:

A vertical stack with a headline text
A horizontal stack with text on both sides and space in between
A stack with overlapping elements (a blue circle with text on top)

State Management in SwiftUI

One of SwiftUI's most powerful features is its built-in state management. Here's a simple counter example:

swift
struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.title)
                .padding()
            
            HStack(spacing: 20) {
                Button(action: {
                    count -= 1
                }) {
                    Text("Decrease")
                        .padding()
                        .background(Color.red)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
                
                Button(action: {
                    count += 1
                }) {
                    Text("Increase")
                        .padding()
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
            }
        }
        .padding()
    }
}

This example uses the @State property wrapper to create reactive state. When the buttons are tapped, they update the count variable, which automatically triggers a view refresh.

Building a Practical Example: A Todo List

Let's create a simple todo list app to demonstrate SwiftUI's capabilities:

swift
struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool = false
}

struct TodoListView: View {
    @State private var todoItems = [
        TodoItem(title: "Learn SwiftUI"),
        TodoItem(title: "Build an app"),
        TodoItem(title: "Publish to App Store")
    ]
    @State private var newItemTitle = ""
    
    var body: some View {
        VStack {
            HStack {
                TextField("New todo", text: $newItemTitle)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                
                Button(action: addItem) {
                    Image(systemName: "plus.circle.fill")
                        .font(.title)
                }
            }
            .padding()
            
            List {
                ForEach(0..<todoItems.count, id: \.self) { index in
                    HStack {
                        Button(action: {
                            toggleItem(at: index)
                        }) {
                            Image(systemName: todoItems[index].isCompleted ? 
                                "checkmark.circle.fill" : "circle")
                        }
                        
                        Text(todoItems[index].title)
                            .strikethrough(todoItems[index].isCompleted)
                            .foregroundColor(todoItems[index].isCompleted ? .gray : .primary)
                    }
                }
                .onDelete(perform: deleteItems)
            }
        }
        .navigationTitle("Todo List")
    }
    
    func addItem() {
        guard !newItemTitle.isEmpty else { return }
        todoItems.append(TodoItem(title: newItemTitle))
        newItemTitle = ""
    }
    
    func toggleItem(at index: Int) {
        todoItems[index].isCompleted.toggle()
    }
    
    func deleteItems(at offsets: IndexSet) {
        todoItems.remove(atOffsets: offsets)
    }
}

This todo list app demonstrates several SwiftUI concepts:

Using @State for managing app data
Two-way binding with $ prefix
Lists with ForEach
Swipe to delete with .onDelete
Conditional rendering based on state

The SwiftUI App Lifecycle

SwiftUI introduced a new app lifecycle model with iOS 14 that replaces the traditional AppDelegate. Here's a basic app structure:

swift
@main
struct MySwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

This concise structure defines your app and its initial UI. The @main attribute tells Swift that this is the entry point for your app.

Summary

SwiftUI represents a paradigm shift in Apple platform development, offering:

A declarative approach to UI development
Built-in state management
Automatic UI updates when data changes
Powerful layout system with stack-based composition
Live previews for rapid development
Cross-platform compatibility

While we've only scratched the surface, you now have the foundation to start building SwiftUI applications. As your skills grow, you'll discover how SwiftUI can help you build complex, beautiful user interfaces with less code and more flexibility than ever before.

Additional Resources

To continue learning SwiftUI, check out these resources:

Exercises

Hello World: Create a simple app that displays "Hello, [Your Name]!"
Profile Card: Build a profile card that shows an image, name, title, and a brief description.
Color Picker: Create an app that displays a color and allows users to adjust its RGB values using sliders.
Weather App UI: Design a simple weather app UI that shows the current temperature, condition, and a 5-day forecast.
Expanding Todo App: Extend the todo app example with categories, due dates, and sorting options.

Happy coding with SwiftUI!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

What is SwiftUI?​

Setting Up Your First SwiftUI Project​

Understanding SwiftUI Basics​

The ContentView Structure​

Basic SwiftUI Views​

Text​

Image​

Button​

Layout in SwiftUI​

State Management in SwiftUI​

Building a Practical Example: A Todo List​

The SwiftUI App Lifecycle​

Summary​

Additional Resources​

Exercises​