Your Second iOS & SwiftUI App

Nov 4 2021 · Swift 5.5, iOS 15, Xcode 13

Part 1: List View Fundamentals

05. Challenge: Book Row

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 04. SF Symbols Next episode: 06. Lists

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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.