No history yet

Introduction to SwiftUI

A New Way to Build

SwiftUI is Apple's modern framework for building user interfaces on all its platforms, from iPhones to Macs. It represents a major shift in how developers create apps. Instead of telling the system how to draw the interface step-by-step, you simply describe what you want the interface to look like in its various states.

This is called declarative programming. Think of it like ordering a coffee. The old way (imperative) is like giving the barista a detailed recipe: "Grind these specific beans, heat the water to 93 degrees Celsius, pour for 25 seconds..." The new way (declarative) is simply saying, "I'd like a latte."

You declare the final result you want, and SwiftUI figures out the most efficient steps to make it happen. This approach leads to cleaner, more readable code that's easier to manage as your app grows in complexity.

With SwiftUI, you can declare the User Interfaces (UIs) of your iOS apps, and their behavior.

Views and Modifiers

Everything you see on the screen in a SwiftUI app is a view. A piece of text is a view, an image is a view, and even a button is a view. These are the fundamental building blocks of your user interface.

Here’s what a simple text view looks like in code:

Text("Hello, World!")

But a view on its own is often too plain. To customize it, you use modifiers. A modifier is a function that takes a view, changes something about it, and returns a new, modified view. You can chain them together to build up the exact look you want.

Text("Hello, SwiftUI!")
    .font(.largeTitle) // Make the font bigger
    .foregroundColor(.blue) // Change the text color
    .padding() // Add space around the text

Each modifier wraps the previous view, adding a new property. The original Text view isn't changed; instead, a new, more complex view is created. This predictable structure is a core strength of SwiftUI.

Lesson image

The View Hierarchy

You rarely have just one view on the screen. To arrange multiple views, you place them inside container views. These containers organize their child views in a specific layout, forming a view hierarchy. The most common containers are VStack for vertical arrangements and HStack for horizontal ones.

Imagine you want to display a user's profile with their picture and name. You could use a VStack to place the image above the text.

VStack {
    // A system image as a placeholder
    Image(systemName: "person.circle.fill")
        .font(.system(size: 80)) // Make the icon large
        .foregroundColor(.gray)

    Text("Alex Doe")
        .font(.title)
}

This code describes a parent view (VStack) that contains two child views (Image and Text). SwiftUI reads this hierarchy and renders the components on the screen, stacked vertically as requested. By combining simple views and containers, you can build any interface you can imagine.

Time to check your understanding of these core concepts.

Quiz Questions 1/4

What is the primary role of a container view like VStack in SwiftUI?

Quiz Questions 2/4

Which statement best describes SwiftUI's declarative approach to UI development?

By describing what your UI should look like with views, customizing them with modifiers, and arranging them in a hierarchy, you have the foundation for building powerful and responsive apps with SwiftUI.