Your Second iOS & SwiftUI App

The SwiftUI List View is the backbone of the app you’re going to be creating the UI for in this course. Before we get into Xcode, let’s take a high-level look at what a List is, and how it works.

A List is a special type of view you can use to organize your data into a scrollable column of rows. You might think of it like a very fancy, scrolling VStack.

Each row is itself, a View. It can be any View you’d like! Containing any other Views you’d like!

You’ll probably want to show multiple, similar views in your Lists — that’s really what they were designed for.

Once you have a view set up that you want to reuse, you can put a List to work. Its job is to take your data and display it in however many instances of your row views are necessary. We’ll get more into how a List does that over the next few episodes.

First, let’s do a little review of some SwiftUI fundamentals, and set up some starter UI for a reusable row!

We’re going to start from scratch, so, in Xcode, make a new project.

This should be review for you at this point. Either choose “Create a new Xcode project”, here…

…or, chose File -> New -> Project.

The default iOS “App” is going to be a good starting point. With that selected, click “Next”.

This will eventually turn into our “ReadMe” app, so call it “ReadMe”

It’s a little easier to work with projects if they don’t have spaces in their names, so just capitalize the M in the middle.

Make sure “SwiftUI” is selected for “Interface”. The language we’ll use is Swift. And uncheck the boxes below that if they’re checked. Then hit Next again. Choose a location for the project, and hit Create.

And here we go!

The SwiftUI App template starts you off with an App file, and all that really says at this point is to use ContentView as the starting UI.

We’re not going to change the naming in this course, this is just me reminding you that ContentView is not in any way a magic key word.

It’s just referring to this ContentView type in ContentView.swift! To get started, we want to be able to see what we’re doing, so make sure the preview is showing.

You can hit option-command return if it’s not. And then option-command-P to resume the preview.

The row we’re going to create will look like this. It’ll have an image on the left, and some text next to that for a book title.

We’ve already got a Text view here, so let’s embed it in an HStack to stack it horizontally with an Image.

As long as the preview is showing, you should get this menu when you command-click on the Text View, whether you do that in the canvas, or in code. Then you can choose “Embed in HStack”.

If that command-clicking still didn’t work, pause the video and make sure your navigation settings match mine. Then, when I mention keyboard shortcuts out loud, they’ll work for you!

For the image, we’re going to start with an SF symbol. To pick one out, open up the SF Symbols app. And then either browse or search to pick a symbol. I’m looking for a placeholder image for a book, like this one!

The text underneath the symbol is what you’ll need to add it to you app. The easiest way to make sure you get it correct is to right click on the symbol and Copy Name.

Now, back in Xcode, let’s add an Image View to the HStack above the text. Use the initializer that takes a systemName

    HStack {
      Image(systemName: )

Open up a string with some quote marks and paste in the symbol name you copied out of SF Symbols: “book”.

If you check the example again, you’ll see that we want this image to be a little bigger than the default symbol size.

So use the resizable modifier to make that resizable, and then scaledToFit so it will scale to fit its frame.

      Image(systemName: "book")
        .resizable()
        .scaledToFit()
      Text("Hello, world!")

If you don’t define a frame, it will just scale up to fill as much of the HStack as it can! That’s a little too big. So, let’s confine it to an 80-point square.

        .scaledToFill()
        .frame(width: 80, height: 80)

One of the cool things about using SFSymbols is that you can style them like text. Add the font modifier to apply the “title” Font, and “light” weight.

.font(Font.title.weight(.light))

And let’s give it the “secondary” foreground color.

.foregroundColor(.secondary)

And make that a little lighter with an opacity modifier at 0.5

.foregroundColor(.secondary🟩.opacity(0.5))

That’s looking pretty good, so let’s get the Text view set up. It’s going to represent the book’s title, soon, so change the string to Title.

Text("Title")

It should be a little bigger, so use the “title2” font.

    .font(.title2)

And it won’t need that extra padding.

      Text("Title")
        .font(.title2)
        🟥.padding()

Fantastic! This is enough of a row view to get started. But, each row is going to need to display the data for a book. Let’s set that up next!