Your Second iOS & SwiftUI App

With your Book model and a simple Image view set up, it is 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 subviews.

So, your challenge is to get this BookRow view rendering.

1. 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. Name the extracted View BookRow.

2. BookRow should store a book constant.

3. Use that book to provide the data to its three subviews. 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.

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 ContentView’s body, I command-clicked on the HStack, and Grouped it.

  var body: some View {
    Group {
      HStack {

Then, I extracted it, and named it BookRow.

    Group {
      BookRow()
    }

And I got rid of the Group.

  var body: some View {
    BookRow()
  }

So that was all just like I talked about in this episode’s introduction. Onwards!

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, right to move down.

        .font(.title2)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Next came the book property.

struct BookRow: View {
  let book: Book

  var body: some View {

I clicked on the little fix-it icon, to get that resulting error partially-fixed…

BookRow(book: <#Book#>)

And I typed “dot init”, to pass along a default book.

BookRow(book: .init())

Then I utilized the book property’s title, for the image…

Book.Image(title: book.title)

…and did the same for the Text.

Text(book.title)

Then I embedded the Text in a VStack, so I could put it above another Text, for the author.

      Book.Image(title: book.title)

      VStack {
        Text(book.title)
          .font(.title2)
        Text(book.author)
      }

I control-option-clicked, to bring up the Inspector for the VStack and selected leading alignment.

      VStack(alignment: .leading) {

And for styling, I used the “title 3” font, and the “secondary” foreground color.

        Text(book.author)
          .font(.title3)
          .foregroundColor(.secondary)
      }

Note: 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!