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

With your book model and a simple image view setup, it's time to make a proper reusable view that we can use in a list. It'll take in a single instance of a book to provide data for all of its sub views. So, your challenge is to get this BookRow view rendering. First, you've already got a good start in the body of ContentView. So save yourself some time and extract that body into another struct. Note, you can't extract the top level HStack that we've been using directly. So first command click on it and choose group. Then you should be able to extract the HStack just like we did with the image in the last episode. And you can get rid of the group afterwards. Two, BookRow should store a book constant. And three, use that book to provide the data to it's three sub views. You've only got two of those so far. This one for the author will be new. Go give it a shot after pausing the video, and then meet me back here. (bouncy music) Welcome back. Hopefully you had success with creating your row view, but let's go over how I put it together and get on the same page. First in ContentViews's body, I command clicked on the HStack and grouped it. Then I extracted it and named it BookRow. Then I got rid of the group. I didn't like the new struct being below the previews in the file, so I moved it up. You can do that by making a selection and hitting option + command and one of the bracket keys, left to move up and right to move down. Next came the book property. I clicked on the little fix it icon to get that resulting error partially fixed. And I typed .init to pass along a default book. Then I utilize the book properties title for the image, and did the same for the text. Then I embedded the text in a VStack so I could put it above another text for the author. I control option clicked to bring up the inspector for the VStack and selected leading alignment. And for styling, I used the title3 font and the secondary foregroundColor. It's perfectly fine if you weren't able to pick those exact styles from my screenshot. I don't think I would have been able to do that, so congratulations if you got anywhere close.