Chapter 3 – Getting started with SwiftUI

What you’ll learn in this chapter:

  • Creating our first SwiftUI project
  • Basic concepts of how SwiftUI works
  • Introducing Views, Stacks and modifiers 

Creating a SwiftUI Project 🚀

Let’s dive right into it and start creating our first SwiftUI project. To do this, open Xcode and click on “Create a new Xcode project”. Then, select “App” under the “iOS” tab and click on “Next”.

In this example, we use “SwiftUIStarter” as the “Product Name”. Make sure “SwiftUI” is selected as the “Interface” and “Swift” as the “Language”. At this point, we can also uncheck the “Use CoreData” and “Include Tests” boxes. When you click on “Next”, you can specify the location where you want to save the project.

After you created the project, Xcode should automatically open the ContentView.swift file. If not, click on it in the Project Navigator to display it in the editor area.

You should see a split-screen like this:

The left section contains the SwiftUI code we use to build our app’s interface. This code consists of two blocks:

  • The View struct: This struct is the place where we write the code for building up the interface for our app. You see that the struct itself contains a body property. Inside this body, we create, arrange and modify all the components we need for our UI.
  • The Previews struct:  This struct is responsible for rendering its related View including its body and displays the rendered View in the preview Simulator on the right screen.

Every time you make some changes within your View struct, the Previews struct notices and displays the updated View inside the Live preview.

The Preview struct renders the View struct and sends it to the live preview.

At default, Xcode inserts a Text object inside the View’s body, which reads “Hello World”. Let’s modify this object by changing its String to “My first SwiftUI app”. 

Text("My first SwiftUI app")
    .padding()

As you can see, this change is immediately reflected in our live preview.

Note: If the Preview simulator is not running yet click on the “Resume” button in the upper right corner. Usually, changes are adopted automatically but sometimes, especially when larger changes are made, clicking the “Resume” button becomes necessary.

Modifying views 👨‍🎨

It is important to know that every object in our ContentView is itself also a view. And since our Text is a view we can customize it by using so-called modifiers. You can see that there is already a .padding modifier applied to our Text view which makes it take up more space around itself.

Okay, let’s say we want our Text to have a larger font. We can easily do this by applying a modifier to it. Remember, modifiers are used to modify view objects in SwiftUI. There are a lot of them and by going through this book you will be introduced to most of them.

You can add a new modifier to a view like this:

Text("My first SwiftUI app")
    .padding()
    .font(.largeTitle)

In this example, we select the .largeTitle option of the .font modifier. To see all the other options, you can delete the code inside the braces and just write an “.” and wait for the dropdown menu to appear. Feel free to try them out!

Okay, we saw how we can add modifiers by writing code. But the cool thing in SwiftUI is that we can also do this directly in our live preview. CMD-click on the Text view in the simulator and click on “Show SwiftUI Inspector”. Here we can adjust the Text view, for instance, change the font-weight.

We can also apply new modifiers using the preview simulator. To do this, open the Library by clicking on the “+”-icon on the left side of the Toolbar.

A menu pops up with the different libraries available (represented by the five icons below the search bar). By default, the View library is shown. Click on the modifier symbol (the second one from the left) to see all the modifiers available. You can scroll through them to get a feeling of what modifiers are available. Let’s say we want to change the color of our Text. To do this, search for  “Foreground Color”. You can now drag and drop the .foregroundColor modifier onto the Text view.

You see that the Text turns blue and the code gets updated simultaneously. To select another color, we can edit the code manually. Let’s say we want our Text to be purple.

Text("My first SwiftUI app")
    .fontWeight(.semibold)
    .foregroundColor(.purple)
    .padding()
    .font(.largeTitle)

Stacking views

Next, we want to add another Text view to our app. To do this, we use Stacks. Stacks are used in SwiftUI to stack multiple views along a certain axis.

There are three types of Stacks:

  • VStacks: All views wrapped into a VStack are stacked vertically. 
  • HStack: All views inside a HStack are aligned horizontally.
  • ZStack: All views inside a ZStack get stacked on top of each other. We will get to know this special type of stack later.

Let’s see how stacks in SwiftUI work. Let’s say we want to place another Text view below our current one. Because they should be aligned vertically, we use a VStack for this. 

For creating a VStack, we can simply CMD-click on our current Text view (either on the corresponding code or in the Live preview) and click on “Embed in VStack”. 

var body: some View {
        VStack {
            Text("My first SwiftUI app")
                .fontWeight(.semibold)
                .foregroundColor(.purple)
                .padding()
                .font(.largeTitle)
        }
    }

Now, we can add another Text view to our VStack and stack it below the first one.

VStack {
    Text("My first SwiftUI app")
        .fontWeight(.semibold)
        .foregroundColor(.purple)
        .padding()
        .font(.largeTitle)
    Text("That's awesome")
}

Let’s insert a third Text view. But this time we try doing it by using the Live preview. Click on the “+”-symbol, open the View Library (first icon) and search for Text. Now, drag and drop it at the right edge of our second Text view. 

Great! You see that our code got updated accordingly. SwiftUI also automatically created an HStack for us (notice how we can put Stacks into existing Stacks!). Let’s change the content of our latest Text.

HStack {
    Text("That's awesome")
    Text("Isn't it?")
}

The Text views inside our HStack are somewhat close together. Let’s fix this by inserting a Spacer view.

HStack {
    Text("That's awesome")
    Spacer()
    Text("Isn't it?")
}

A Spacer creates an invisible view between the contextual objects and, therefore, pushes these objects to the side.

A Spacer inside a VStack pushes the views along the xAxis and a Spacer inside an HStack along the yAxis.

If we would insert the Spacer above the two Texts inside the HStack, it would push both views to the right side. If we would insert it below them, it would push them to the left edge. Try it out if you want!

However, at this point, the views are very close to the edges of the simulator. To change this, we can add a .padding modifier to them. But instead of applying some padding to each Text view, we add it to the HStack itself.

HStack {
    Text("That's awesome")
    Spacer()
    Text("Yeah")
}
    .padding()

The .padding modifier utilizes its related view, in our case the HStack, and applies some padding on every side of it. We could also determine a specific padding size for each side of the stack, but for now, we are fine with the default padding size.

Awesome, we’ve accomplished a lot so far! We learned how to create views for our app, how to arrange them and how to customize them using modifiers. Also, we’ve learned it both ways – using the code editor and using the Live preview.

In the next chapter, we’ll create our first more complex app and learn more cool stuff about SwiftUI!

19 replies on “Chapter 3 – Getting started with SwiftUI”

I am running Xcode 12.0. When I select ‘Multiplatform’ the only application type I can create is ‘Game’. I have to select ‘IOS’ or ‘macOs’ to be able to select App!

Hey this seems to be some kind of “bug” in the latest Xcode 12 version. Alternatively, you can create a new “App” under “iOS”. Make sure you use “SwiftUI” as the interface and “SwiftUI App” as the Life cycle mode.

Yep, same here, despite verifying all content blockers are off. (Safari 14.0.2 on Big Sur)

Opening the video in a new tab on its own will show the controls, then hide them, but not show the video.

Leave a Reply

Your email address will not be published. Required fields are marked *