Your Second iOS & SwiftUI App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

The SwiftUI list view is the backbone of the app you're going to be creating for the UI 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 use, 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 choose 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 read me app, so call it ReadMe. It's a little easier to work with projects that 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. This SwiftUI app template starts you off with an app file, and all that really says, at this point, is choose 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 keyword. 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 texts next to that for the book title. We've already got a text view here, so let's embed it in an Hstack to set 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 your 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 system name. 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 scale to fit so it will scale to fit its frame. 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. One of the cool things about using SF Symbols is that you can style them like text. Add the font modifier to apply the title font and lightweight. And let's give it the secondary foregroundColor, and make that even a little lighter with an opacity modifier at 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. It should be a little bigger and use the title two font, and it won't need that extra 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.