No history yet

Introduction to SwiftUI

Meet SwiftUI

SwiftUI is Apple's modern framework for building user interfaces. It lets you design apps for any Apple platform—iOS, macOS, watchOS, and more—using a single, straightforward approach. Instead of writing detailed, step-by-step instructions to draw every button and text field, you simply describe what you want the UI to look like. The system then figures out the best way to make it happen.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift

This approach is called declarative syntax. Think of it like ordering a coffee. You don't tell the barista how to grind the beans, froth the milk, and pour the espresso. You just say, "I'd like a latte." You declare the final result you want, and the expert handles the steps.

This makes your code cleaner, easier to read, and less prone to errors. Because you're describing components, it's also much easier to create reusable pieces for different parts of your app, or even different apps entirely.

Setting Up Your First Project

To start building with SwiftUI, you need Xcode, Apple's integrated development environment (IDE). If you don't have it, you can download it for free from the Mac App Store. Once it's installed, creating a new project is simple.

  1. Open Xcode and select Create a new Xcode project.
  2. Choose the iOS tab and select the App template.
  3. Name your project, and make sure the Interface is set to SwiftUI.
  4. Click Next and choose where to save your project.

Xcode will generate a complete, runnable app from the template. You'll see a code editor on the left and a live preview of your app's UI on the right, called the Canvas. This preview updates in real-time as you type, which is one of SwiftUI's most powerful features.

Lesson image

Anatomy of a SwiftUI App

When you open your new project, you'll see a few files. The two most important ones to start are the main app file and ContentView.swift.

The main app file (it will be named after your project, like MyApp.swift) is the entry point for your application. The @main attribute tells the system that this is where everything begins. It creates the main window and sets ContentView as the initial user interface to display.

The file ContentView.swift contains the actual UI for your first screen. Let's look at its default code.

import SwiftUI

// A view is a piece of your UI.
// ContentView is a struct that conforms to the View protocol.
struct ContentView: View {
    // The body property returns the content of the view.
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

// This part generates the live preview in Xcode.
#Preview {
    ContentView()
}

This might look a bit strange at first, but it’s quite simple. A View in SwiftUI is just a piece of your user interface. Every view has a body property that describes what it looks like.

Here, our ContentView's body contains a VStack, which is a vertical stack that arranges things from top to bottom. Inside it, there's an Image showing a globe icon and a Text view that displays "Hello, world!". The .padding() is called a modifier. It's a function that customizes a view, in this case by adding some space around the edges.

This is the declarative syntax in action. We haven't told the app how to draw text or an image. We've just declared that we want them to appear, stacked vertically, with some padding. SwiftUI handles the rest.

Quiz Questions 1/5

What is the fundamental programming paradigm used in SwiftUI for building user interfaces?

Quiz Questions 2/5

The Xcode Canvas provides a real-time, interactive preview of your SwiftUI user interface as you write the code.

That's your first look at SwiftUI. You've learned what it is, how to set up a project, and the basic structure of an app. Next, we'll start changing this template to build something new.