SwiftUI Fundamentals

Describing Your UI

Imagine you're ordering a sandwich. You could tell the sandwich maker every single step: "First, pick up two slices of bread. Next, open the mustard jar. Then, spread mustard on one slice..." That's the imperative approach. It's a list of commands.

Or, you could just describe what you want: "I'd like a turkey sandwich on rye with mustard and lettuce." This is the declarative approach. You say what you want, and the sandwich maker figures out the steps to make it happen.

SwiftUI uses this second approach. It's a declarative framework, which means you describe the user interface you want to see. You don’t provide a step-by-step list of instructions for drawing pixels on the screen. You simply state that you want some text, an image, and a button, and SwiftUI handles the rest.

With SwiftUI, you tell the system what your UI should look like and how it should behave, and it figures out the best way to make that happen on any Apple device.

The View Protocol

In SwiftUI, every piece of your user interface, from a single line of text to an entire screen, is a View. To be a view, a type just needs to follow a specific set of rules, known as the View protocol.

The most important rule is that every view must have a body. The body property describes what that particular view looks like. It's also a view itself, which is how you can combine simple views to build more complex ones.

import SwiftUI

struct ContentView: View {
    // The body property is the only requirement of the View protocol.
    // It returns the content of the view.
    var body: some View {
        Text("Hello, world!")
    }
}

Here, ContentView is a view. Its body contains a single, simple view: Text. When SwiftUI displays ContentView, it looks at the body and sees that it needs to show the text "Hello, world!" on the screen.

Combining Views with Stacks

Most user interfaces are more than just a single piece of text. You'll often need to arrange multiple views together. SwiftUI provides simple containers called stacks to help with layout. The three fundamental stacks are VStack, HStack, and ZStack.

VStack arranges views in a vertical line. Think of a list of contacts on your phone, where each name is below the previous one.

VStack {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}

HStack arranges views in a horizontal line. This is useful for things like a toolbar with several buttons side-by-side.

HStack {
    Image(systemName: "play.circle")
    Image(systemName: "pause.circle")
    Image(systemName: "stop.circle")
}

ZStack layers views on top of each other, from back to front. You can use it to place text over an image or create overlapping visual effects.

ZStack {
    Color.blue // Background layer
    Text("Text on Top")
        .foregroundColor(.white)
}

Customizing with Modifiers

Once you have your views and have arranged them with stacks, you'll want to customize how they look. In SwiftUI, you do this with modifiers. A modifier is a method that you call on a view to create a new, modified version of that view.

You can chain modifiers together to apply multiple changes. For example, you can change the font of some text, add padding around it, and then give it a background color.

Text("Styled Text")
    .font(.title) // Make the font larger.
    .padding() // Add space around the text.
    .foregroundColor(.white) // Change the text color.
    .background(Color.purple) // Add a background color.
    .cornerRadius(10) // Round the corners of the background.

The order of modifiers matters. padding() before background() adds space inside the colored background. If you reversed them, the padding would be added outside the background, pushing other elements away.

By combining views, stacks, and modifiers, you have all the basic tools you need to start building simple but powerful user interfaces with SwiftUI.

Let's check your understanding of these core concepts.

Quiz Questions 1/5

SwiftUI is described as a 'declarative' framework. What does this mean?

Quiz Questions 2/5

In SwiftUI, every type that represents a piece of the user interface must conform to the View protocol. What is the single most important requirement of this protocol?

With these building blocks, you're ready to start creating your own views and layouts in SwiftUI.

Advanced SwiftUI Development