Getting Started with SwiftUI

What is SwiftUI?

Every app you use has a user interface, or UI: the part you can see and touch. The text, the images, the buttons, the lists you scroll through — all of that is the UI.

SwiftUI is Apple's framework for building that UI in Swift. You write Swift code that describes what should appear on screen, and SwiftUI takes care of drawing it. The same ideas work on iPhone, iPad, Mac, Apple Watch and Apple TV, so what you learn here carries across all of Apple's platforms.

Describe, Don't Instruct

SwiftUI is declarative. That word sounds technical, but the idea is friendly: you declare what you want the screen to look like, and SwiftUI works out how to make it happen.

Think about ordering at a café. You don't walk into the kitchen and tell the barista which cupboard holds the cups, how long to steam the milk and where to put the lid. You say "a large cappuccino, please", and they handle the steps.

SwiftUI works the same way. Instead of writing step-by-step instructions such as "create a label, set its text, set its font, add it to the screen at this position", you write something closer to:

Show a star.
Under it, show "Hello, SwiftUI!"
in a large, bold font.
Under that, show a smaller
line of text.

By the end of this lesson, you'll have written exactly that screen in real SwiftUI code.

Your First SwiftUI Code

Here is the smallest useful piece of SwiftUI. It shows one line of text in the middle of the screen:

import SwiftUI

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

Only seven lines, but each one has a job. Let's go through them one at a time.

import SwiftUI

This line gives your file access to everything SwiftUI provides: View, Text, Image, VStack and much more. Without it, Swift wouldn't know what any of those words mean. You'll see it at the top of every SwiftUI file.

struct ContentView: View

This creates a new type called ContentView. The : View part is a promise: "ContentView is a view, and it can be shown on screen."

In SwiftUI, everything you see is a view. A piece of text is a view. An image is a view. A whole screen is a view too — it's simply a view that contains other views. The name ContentView is only the default Xcode picks; you'll create views with names like WelcomeView or ProfileView later.

var body: some View

Every view has a body. The body answers one question: "What should this view show?" Whatever you put inside the curly braces of body is what appears on screen. Here, the answer is a single piece of text.

The some View part means "this returns some kind of view". You don't have to spell out the exact type; Swift works it out from what you write inside the body. For now, that's all you need to know about it — you'll write var body: some View the same way in every view you create.

Text("Hello, SwiftUI!")

This is the actual content: a view that displays a string. It's the first real building block, so let's look at it more closely.

Showing Text

Text displays read-only text. You give it a string in quotes, and it appears on screen:

Text("Hello, SwiftUI!")

On its own, the text uses the system's standard body font and color. That's a sensible default, but most screens need a clear hierarchy: a big title, a smaller subtitle, maybe a highlighted word. That's where modifiers come in.

Modifiers

A modifier customizes a view. You add it by writing a dot and the modifier's name after the view:

Text("Hello, SwiftUI!")
    .font(.title)

.font(.title) makes the text larger, using the system's title style. You can keep adding modifiers, one per line, and each one changes something else:

Text("Hello, SwiftUI!")
    .font(.title)
    .fontWeight(.bold)
    .foregroundStyle(.blue)

Now the text is large, bold and blue. Reading the code from top to bottom tells you exactly what you'll see.

Text("Hello, SwiftUI!")
    │
    ▼  .font(.title)            → larger
    │
    ▼  .fontWeight(.bold)       → bold
    │
    ▼  .foregroundStyle(.blue)  → blue

Result: large, bold, blue text

A few font styles you'll use often, from largest to smallest: .largeTitle, .title, .headline, .body, .subheadline and .caption. Using these named styles, rather than exact point sizes, means your text also respects the user's preferred text size in Settings.

Images and SF Symbols

Text is one building block; images are another. Apple ships thousands of ready-made icons called SF Symbols. They're designed to sit nicely next to text, and you can use them without adding any image files to your project.

To show one, create an Image with the symbol's name:

Image(systemName: "star.fill")

systemName: tells SwiftUI to look for an SF Symbol with that name. "star.fill" is a filled star; "star" would be an outline. You can browse every available name in Apple's free SF Symbols app for Mac.

Because SF Symbols behave like text, you size them with the same .font() modifier you used on Text, and color them with .foregroundStyle():

Image(systemName: "star.fill")
    .font(.largeTitle)
    .foregroundStyle(.yellow)

Notice the pattern again: an Image is a view, and modifiers customize it. The same modifier even works on both kinds of view.

Stacking Views with VStack

So far each example has shown one view. A real screen has several, and they need to be arranged somehow. For that, SwiftUI has containers: views whose job is to hold and position other views.

The first container to learn is VStack, a vertical stack. It places its views one below the other, from top to bottom, in the order you write them:

VStack {
    Image(systemName: "star.fill")
    Text("Hello, SwiftUI!")
    Text("Build beautiful iOS apps")
}

You can picture it as a small family tree, with the VStack at the top and its children underneath:

VStack
│
├── Image
│
├── Text
│
└── Text

By default a VStack centers its children and leaves a small standard gap between them. You can choose the gap yourself with spacing:

VStack(spacing: 16) {
    Image(systemName: "star.fill")
    Text("Hello, SwiftUI!")
    Text("Build beautiful iOS apps")
}

Now there are 16 points of space between each view. Try changing the number and watch the preview update.

Putting It Together

You now know every piece needed for this lesson's screen. Here's what we're building:

          ★

    Hello, SwiftUI!

 Build beautiful iOS apps

Before looking at the code, try describing it the declarative way: a vertical stack containing a large star, a big bold title, and a smaller subtitle. That sentence maps almost directly to SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: "star.fill")
                .font(.largeTitle)

            Text("Hello, SwiftUI!")
                .font(.title)
                .fontWeight(.bold)

            Text("Build beautiful iOS apps")
                .font(.subheadline)
        }
    }
}

Read it from the outside in:

1. ContentView is a view — it's our screen.
2. Its body describes what the screen shows: one VStack.
3. The VStack arranges three views vertically, 16 points apart.
4. Each of those views is customized with its own modifiers.

Notice the indentation. Each view's modifiers sit one level further in than the view itself, and the blank lines separate one child from the next. SwiftUI doesn't require the blank lines, but they make it much easier to see where each view starts and ends — a habit worth keeping.

Experiment

The fastest way to learn SwiftUI is to change things and watch the preview. Try each of these, one at a time:

• Change "star.fill" to "sun.max.fill" or "bolt.fill".
• Add .foregroundStyle(.orange) under the image's .font(.largeTitle).
• Change .font(.title) to .font(.largeTitle) and compare.
• Change spacing: 16 to spacing: 4, then to spacing: 40.
• Add a fourth Text inside the VStack with .font(.caption).

If something breaks, don't worry. Compare your code to the version above, especially the curly braces: every { needs a matching }.

Recap

If you only remember one thing, make it the pattern: view, then modifiers — and containers to arrange views. Everything in the next lesson builds on it.

Challenge

       ♥︎

    Welcome!

I'm learning SwiftUI