2️⃣Getting Started with SwiftUI

Fall 2023 | Vin Bui

Creating the Project

1. Enter the name of our app. In this example, we will be calling our app Sample.

2. Choose SwiftUI for the Interface.

Creating a new SwiftUI project

Project Navigator

On the left side of Xcode, we shoul see a list of files in the directory. This is known as the project navigator.

• SampleApp.swift contains code that is executed when we launch our app. If we want to create something when we launch our app and keep it throughout the app’s lifetime, we will write it here.

• ContentView.swift contains code that defines the UI for our app. Most of our code will be written in a file similar to this.

• Assets.xcassets is a catalog that contains the app’s images, icons, colors, and more.

• There is a group labeled Preview Content that contains a single file called Preview Assets.xcassets. This is a catalog similar to Assets.xcassets above, but for previewing the UI which will be explained next.

Project Navigator

Canvas and Live Previews

On the right side of Xcode, we should see a canvas containing a preview of the app. If not, go to the Editor menu and select Canvas (alternatively ⌥ ⌘ ↵). The device that is shown on the preview depends on the device we select at the top center of Xcode. Because the preview is updated live, errors within our code can cause the preview to pause. To resume, we can click Resume in the canvas or even better, use the shortcut: ⌥ ⌘ P

Live Preview Canvas

Exploring ContentView.swift

import SwiftUI

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

// iOS 16 and below
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

To use all of the functionality provided by the SwiftUI framework, we must import it using import SwiftUI. This is similar to how we import other frameworks such as UIKit, MapKit, etc.

Next, we create a struct called ContentView that conforms to the View protocol. The View protocol is a type that represents our app’s UI and provides modifiers to configure our views. If we want to draw anything on the screen using SwiftUI, then it must conform to the View protocol.

Inside of the ContentView struct, there is a required property called body that has the type of some View. What this type really means is that this property will return something that conforms to the View protocol. Later on, we will learn that the actual return type of this property is very complicated (could be 1000+ characters) so providing a general return type of some View means we can ignore that. The body property is the only requirement needed to conform to the View protocol.

iOS 17 Onwards

Starting in iOS 17, the syntax for the preview is different:

#Preview {
    ContentView()
}

The functionality is the exact same as it was in previous iOS versions.