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

We've got a bare-bones list up and running and we're ready to start adding features to our app. We can start by creating a DetailView to show us more about each book when we tap on a row. By the end of the course, it will look something like this. But for this episode, let's just get some basics hooked up and aim for this. We'll call this the DetailView and create a new SwiftUI file for it at the bottom, the Views group. Whenever I start a new file, I select all with Command+A and then reindent with Control+I. That's just because X codes defaults don't conform to my settings when I create new files. Okay. So we've got a DetailView and it's going to display our book data. So it's going to require a book property. Pass the default one to the Preview. Now that we'll be able to see what we're doing add an image for the book in the body. Then stack that vertically with the Spacer underneath to bring it up to the top. That's our bare-bones DetailView. To navigate to this view, we need to do some more work back in ContentView.swift, try hitting shift+command+O and then look for BookRow. This will let you easily jump straight to the BookRow type. When you tap on each one of these rows, that should bring up an instance of your new DetailView, provided with the book you tap on. To do that, create a NavigationLink at the top of body. We want the initializer that takes in a destination and a label. The destination you need is the instance of DetailView I just mentioned with the BookRows, Book, passed along to it. The label for the link is going to be the entirety of the body we already had. So make sure this whole HStack is wrapped in the NavigationLink's trail enclosure. Look along the right side of the Preview, and you should see these right pointing chevron's indicating that tapping will lead you to another view. But the rows are also all grayed out, which means there's no way to interact with them. And that is because a NavigationLink requires a parent NavigationView to do anything. We'll add that directly to the list in ContentView. There's not an easy option to embed a NavigationView like there is for lists or stacks. So I'll embed in a group again and then change it to the NavigationView I want. And now the rows are tappable. We'll try that out in a moment. First, title the NavigationView, My Library. Notice how that's a modifier on the list, not the NavigationView itself. If you move it down a line with shift+command+bracket, the title won't take effect. It works this way so that you're able to set the title dynamically from any title view you want. Now we can try it out. So hit the Live Preview button. And as you scroll down, the title moves out of the way and you're able to navigate to DetailViews, which automatically get that title as the back button.