SwiftUI Prototype Tutorial 1 of 5: Project Setup

Devin Jameson

SwiftUI can help us create high-resolution, interactive user interfaces quickly and easily. In this tutorial series, we’ll build a simple SwiftUI prototype for a news app.

Posts in this series:

Here’s how our prototype will look at the end of our journey.

The prototype we'll be creating, previewed on an iPhone 11 Pro Max. A cursor is clicking on the screen to navigate to different views. The prototype has two tabs shown at the bottom of the screen: Categories and Profile. The categories tab is blue and the profile tab is black. The Categories view shows eight clickable categories, each of which is represented by an image associated with that category and an overlayed label for the category in white text. The Profile view has a headline with the name "Devin Jameson". Above this headline on the left is the text "Premium Member" in gray. Above the headline on the right is a circular image of Devin Jameson. Below the headline is three selectable rows. Each row has text on the left and a gray, right-facing arrow on the right. From top to bottom, the text for each row reads "Saved Articles", "Followers", and "Following".

We’ll start by building a Categories tab that we can use to navigate to individual categories. We’ll then create a simple Profile tab through which we can access various settings.

Note: given that this tutorial is a basic introduction to prototyping in SwiftUI, we will not be developing any functionality or including any real data.

We’ll cover the following topics over five sections:

  • Using Xcode
  • Layout and styling
  • Accommodating various display sizes
  • Working with images and icons
  • Basic navigation
  • Using dynamic content in our views

Setup

We can start by creating a new Xcode project. Xcode is an IDE made by Apple for making iOS, watchOS, and macOS, apps.

Launch Xcode > Create a new Xcode project > Tabbed App

We’ll call our project NewsPrototype. You can use your name for the Organization Name and Organization Identifier fields. Our language will be Swift and our User Interface will be SwiftUI.

The Xcode interface for creating a new project. There are fields for Product Name, Team, Organization Name, Organization Identifier, Bundle Identifier, Language, and User Interface.

Leave all the check marks at the bottom unselected and save your new project wherever you’d like.

Let’s check out what Xcode has created for us. Open ContentView.swift in the Project Navigator (View > Navigators > Show Project Navigator) as well as the Canvas pane (Editor > Canvas).

We should now see a preview of our app in the Canvas pane. If you can’t see it, click Resume in the top right corner of the Canvas pane.

Let’s set our preview device to iPhone 11 Pro Max by changing our build target in the upper left of the Xcode window.

The Xcode interface. On the left is the Project Navigator and the file ContentView.swift. Above this, there is an overlayed yellow circle around the part of the Xcode interface that enables users to change the preview device. The current preview device is iPhone SE (2nd generation). On the right is the iPhone SE (2nd generation). On its screen is a preview of the prototype. On the prototype is the text "First View" and a tab bar with two options: First and Second.

To enter Live Preview mode, click the play button to the bottom right of the iPhone. Then try clicking the tabs labeled First and Second to verify the preview is live.

Coding

Let’s get coding! Those tab bar icons could use some work. We can change them by editing the images on line 20 and 29. Currently, these images are being pulled from our Assets in Assets.xcassets. However, we want to pull these icons from Apple’s icon library, SF Symbols. To do that, we’ll change "first" to systemName: "globe" and "second" to systemName: "person".

TabView(selection: $selection){
    Text("First View")
        .font(.title)
        .tabItem {
            VStack {
                Image(systemName: "globe") // Use globe symbol
                Text("First")
            }
    }
    .tag(0)
    Text("Second View")
        .font(.title)
        .tabItem {
            VStack {
                Image(systemName: "person") // Use person symbol
                Text("Second")
            }
    }
    .tag(1)
}

To see a full list of the symbols made available by Apple, download SF Symbols.

If our Live Preview is working, we should see our icons update right away.

Note: generally, we would use a tab view only with three or more tabs. However, we’ll use two tabs in this tutorial to keep things simple.

Let’s go ahead and change those tab names, too.

TabView(selection: $selection){
    Text("First View")
        .font(.title)
        .tabItem {
            VStack {
                Image(systemName: "globe")
                Text("Categories") // Update tab title
            }
    }
    .tag(0)
    Text("Second View")
        .font(.title)
        .tabItem {
            VStack {
                Image(systemName: "person")
                Text("Profile") // Update tab title
            }
    }
    .tag(1)
}

An iPhone 11 Pro max running our prototype. On the prototype is the text "First View" and a bottom tab bar with two options: Categories and Profile. Above the categories tab label is a globe icon, and above the profile tab label is a person icon. The categories tab is blue and the profile tab is black.

Pro-tip: if your indentation gets wacky, just highlight the relevant lines and press Control+I to re-indent them.

If your Live Preview stops updating, restart it by clicking Resume in the top right of the Canvas pane.

See you for Part Two, in which we’ll starting building our Category view.