Creating a filter cell

We already created our cell that we need in the storyboard. However, before we create our View Controller, we need to create a filter cell.  This cell is used to display all of the available filters.

1. Right-click the Photo Filter folder in the Controller folder in the Review folder and select New File.
2. Inside the Choose a template for your new file screen, select iOS at the top, and then Cocoa Touch Class. Then, hit Next.

 

3. In the options screen that appears, add the following:

New file:

• • Class: FilterCell
  • Subclass: UICollectionViewCell
  • Also create XIB: Unchecked
  • Language: Swift

4. Click Next, and then Create.
5. Update your file to the following:

class FilterCell: UICollectionViewCell {
  @IBOutlet var lblName:UILabel!
  @IBOutlet var imgThumb: UIImageView! 
}

extension FilterCell: ImageFiltering {
  func set(image:UIImage, item:FilterItem) {
    if item.filter != "None" {
      let filteredImg = apply(filter: item.filter, originalImage: image)
      imgThumb.image = filteredImg
    }
    else { imgThumb.image = image }
 
    lblName.text = item.name
 
    roundedCorners()
  }
 
  func roundedCorners() {
    imgThumb.layer.cornerRadius = 9
    imgThumb.layer.masksToBounds = true
  }
}

Our cell is pretty basic: we are setting an image and giving it rounded corners.

6. Open PhotoFilter.storyboard.
7. In the Outline view, select the Collection View cell. Then, in the Utilities panel, under the Identity inspector set the Custom Class to FilterCell.
8. In the Attributes inspector, set the Identifier to filterCell.

 

9. Next, connect your outlets for both lblName and imgThumb.
10. We need to make sure we can dismiss our modal when we click the Add Photo button. We already added the method we needed, but we just need to add this to the storyboard. CTL drag from Cancel to the Exit icon:

11. In the popup, select unwindReviewCancelWithSegue:

12. In the Navigation controller, select the Navigation bar in the Outline view. Then, in the Attributes inspector, uncheck Translucent:

Adding this makes sure our navigation bar is a solid white color and not translucent.

We are done with setting up the cell and storyboard setup. Let's move to creating our View Controller.