Category: 05. SwiftUI Basics

iOS Project Setup

Create a new SwiftUI app in Xcode, configure signing and capabilities, and set your deployment targets.

---

Create a New Project in Xcode

Use the App template, choose Swift and SwiftUI, set your organization identifier (e.g.

com.example), and pick a bundle identifier like com.example.MyApp.

Checklist

• Product Name, Team, Organization Identifier
• Interface: SwiftUI; Language: Swift; Use Core Data (optional)
• Minimum iOS version (e.g. iOS 15+)

Use this checklist to ensure your project is created with the right templates, identifiers, and minimum OS version.

---

Run Examples in Xcode

Standard workflow (used in this tutorial)

Each example is organized into three files so you can run it as a small app:

1. Demo.swift: The example’s main code (view and/or supporting types).
2. ContentView.swift: Shows the demo (uses types from Demo.swift).
3. App.swift: Stable entry point with WindowGroup { ContentView() }.

Tip: In your own Xcode project, avoid duplicate ContentView declarations.

Reuse a single ContentView and update its body per example, or create a simple chooser that navigates to uniquely named demo views.

Optional: Canvas Preview

You can also run any example via Xcode’s Canvas Preview without changing your app entry point.

1. Create a SwiftUI View: File → New → File… → SwiftUI View. Paste the example view code.
2. Add a Preview: Use a PreviewProvider or the #Preview macro.

Example

PreviewProvider.swift

#Preview.swift

import SwiftUI

struct Demo_Previews: PreviewProvider {
  static var previews: some View { Demo() }
}

3. Open Canvas: Editor → Canvas. Build once if the preview is unavailable.
4. Run & Interact: Click Resume/Play; use the device selector to switch models.

Troubleshooting: If the preview fails to load, Build, then Clean Build Folder.

Ensure the target is iOS and the file imports SwiftUI.

---

---

Project Settings

In the project navigator, select the app target and configure:

• Signing & Capabilities: Select your team and enable automatic signing.
• Deployment Info: Minimum iOS version, supported orientations.
• Bundle Identifier: Matches the one you will register in App Store Connect.

SwiftUI Introduction

Build interfaces declaratively with views, state, and data-driven updates using SwiftUI.

---

What is SwiftUI?

SwiftUI is Apple’s modern UI framework for building apps on iOS, iPadOS, macOS, watchOS, and tvOS.

It is declarative: you describe what the UI should look like, and SwiftUI updates it when your data changes.

---

Why SwiftUI?

• Declarative syntax and reactive updates with @State, @Binding, and ObservableObject.
• Unified API across Apple platforms.
• Live previews and fast iteration in Xcode.

---

Building our First “App”

First, you’ll build a simple counter view (ContentView) shown by the app entry (App.swift).

Next, you’ll refactor the same UI but move its state into a view model (ObservableObject), which scales better in real apps.

---

Step 1: Basic Example

Syntax: Use @State for local state and bind it to controls (e.g., Button); render with VStack/Text.

Example

ContentView.swift

App.swift

import SwiftUI

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

  var body: some View {
VStack(spacing: 12) {
  Text("Count: \(count)")
  Button("Increment") { count += 1 }
}
.padding()
  }
}

This example shows a simple counter using @State and a button inside a VStack.

About ContentView.swift: In SwiftUI, views live in ordinary .swift files.

The starter view is typically named ContentView.swift, and the app’s entry point (App.swift) shows it in a WindowGroup.

---

Step 2: State with ObservableObject

Use ObservableObject to hold shared state, and @StateObject in the creating view to own its lifecycle.

Views update automatically when @Published properties change.

Syntax: class VM: ObservableObject { @Published var count }, @StateObject private var vm = VM(), bind UI to vm.count.

This example refactors the basic counter above.

The UI and behavior are the same (a counter label and button), but the state now lives in a CounterModel view model managed by @StateObject. This pattern scales better as your app grows.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI
import Combine

class CounterModel: ObservableObject {
  @Published var count = 0
  func increment() { count += 1 }
}

This example promotes state into a ViewModel and updates the UI via @Published changes observed by the view.

Platform look: SwiftUI adapts controls to the platform. On iOS the button appears as blue text; on macOS it’s a bordered push button. The behavior is the same.

See iOS style in Xcode: run an iOS App target (iPhone simulator). If you’re in a macOS App and want a text-style button, add .buttonStyle(.plain) to the button.

---

---

Run Examples in Xcode

Standard workflow (used in this tutorial)

Every example is organized into three files so you can run it as a small app:

1. Demo.swift: The example’s main code (view and/or supporting types).
2. ContentView.swift: Shows the demo (references types from Demo.swift).
3. App.swift: Stable app entry with WindowGroup { ContentView() }.

Tip: In your own Xcode project, keep a single ContentView. If you already have one from a previous example, reuse that file and update its body for the new demo. Alternatively, create a chooser menu and navigate to uniquely named demo views.

Optional: Canvas Preview

You can also run any example via Xcode’s Canvas Preview without changing your app entry point.

1. Create a View file: In Xcode choose File > New > File… > SwiftUI View. Name it (for example, FrameDemo.swift) and paste the example view’s code into it.
2. Add a Preview: Ensure the file has a preview. Use either a PreviewProvider or the #Preview macro.

PreviewProvider.swift

#Preview.swift

import SwiftUI
  
  struct FrameDemo_Previews: PreviewProvider {
static var previews: some View { FrameDemo() }
  }

3. Open the Canvas: With the file selected, choose Editor > Canvas (or click the Canvas button). If you don’t see the preview, build the project once.
4. Run the Preview: Click Resume / Play in the Canvas. Edits to the code will refresh the preview. Use the device picker to switch iPhone/iPad models.
5. Interact: Previews are interactive—tap buttons, type into fields, etc.