Tutorial: Product Detail Page

Tutorial: Product Detail Page

Technologies covered in this tutorial

• EpoxyCollectionView
• EpoxyBars

Expected time taken: 60 minutes

Part 1: Setup

In this tutorial we will be building a simple page used to display a product. Here is a screenshot of what the final page will look like:

You can start by creating a new Xcode project and including the Epoxy package, or you can build directly in the EpoxyExample app. This tutorial will not cover setting up a new app with Epoxy as that is covered in the README. There is already a completed version of this page in the EpoxyExample app as ProductViewController which you can use for reference.

Start by creating a new Swift file, I called mine ProductViewController, but you can call it whatever you'd like. If you are working in the EpoxyExample repo you'll need to name it something else.

Part 2: Initializing the CollectionView

In your newly created Swift file, you'll need to set up a new class that inherits from EpoxyCollectionViewController:

import Epoxy

final class ProductViewController: EpoxyCollectionViewController {

}

EpoxyCollectionViewController requires a UICollectionViewLayout as part of the initializer, so you'll need to provide one. In our example we want a list of items similar to a TableView without dividers, and we can do that easily with UICollectionViewCompositionalLayout. I've created a new file to house this extension, but you can put it inline or whatever is best for you:

// UICollectionViewCompositionalLayout+List.swift

import UIKit

extension UICollectionViewCompositionalLayout {
  static func listNoDividers() -> UICollectionViewCompositionalLayout {
    UICollectionViewCompositionalLayout { _, _ in
      let item = NSCollectionLayoutItem(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50)))

      let group = NSCollectionLayoutGroup.vertical(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50)),
        subitems: [item])

      return NSCollectionLayoutSection(group: group)
    }
  }
}

We can now use this layout to initialize our superclass:

final class ProductViewController: EpoxyCollectionViewController {
  init() {
    super.init(collectionViewLayout: UICollectionViewCompositionalLayout.listNoDividers())
  }
}

Part 3: Rendering items in the CollectionView

Now that our CollectionViewController is properly set up, we need to tell it about the items we want to render. To do this using EpoxyCollectionViewController we just need to override the epoxySections() method and return an array of EpoxySections: