Collection Views L6.4.4

Collection Views vs. Table Views

UICollectionViews and UITableViews have a lot in common. Both employ reusable cells, as well as have delegate and datasource protocols composed of similar methods.

Their views are also different - tables are always presented as a vertical column of cells, where collections generally appear as a grid (although a Collection View can be laid out vertically as well).

Their reusable cells also differ, the UICollectionViewCell class offers fewer default style options than UITableViewCell, often necessitating the creation of custom cells.

Delegate and Datasource Methods

The 3 essential methods implemented for a Collection View are nearly identical to the 3 essential methods implemented for a Table View. The difference is that Collection View units are referred to as “items” instead of “rows.” Here are those table view methods and their collection view analogs:

UITableView

tableView(_:numberOfRowsInSection:)  
tableView(_:cellForRowAt:)  
tableView(_:didSelectRowAt:)  

UICollectionView

collectionView(_:numberOfItemsInSection:)  
collectionView(_:cellForItemAt:)  
collectionView(_:didSelectItemAt:)  

What These 3 Methods Return

collectionView(_:numberOfItemsInSection:)

Sent memes will be stored in a memes array, that the view controller will have access to. The method collectionView(_:numberOfItemsInSection:) should return the number of memes in that array.

collectionView(_:cellForItemAt:)

The method collectionView(_:cellForItemAt:) should return a custom cell. The default UICollectionViewCell cell is too basic so a custom cell is needed. To add this, add a Cocoa Touch Class that inherits from UICollectionViewCell.

Then give the custom cell the properties needed to display a meme. Once the custom cell set up, we need dequeue an instance of your cell class and populate it with data. Something like this:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "VillainCollectionViewCell", for: indexPath) as! VillainCollectionViewCell
    let villain = self.allVillains[(indexPath as NSIndexPath).row]

    // Set the name and image
    cell.nameLabel.text = villain.name
    cell.villainImageView?.image = UIImage(named: villain.imageName)

    return cell
}

collectionView(_:didSelectItemAt:)

The method collectionView(_:didSelectItemAt:) should present a detail view of the selected meme. Grab an instance of your detail view controller from the storyboard, populate it with the appropriate meme, and present it using navigation.

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath:IndexPath) {

    // Grab the DetailVC from Storyboard    
    let detailController = self.storyboard!.instantiateViewController(withIdentifier: "VillainDetailViewController") as! VillainDetailViewController

    //Populate view controller with data from the selected item
    detailController.villain = allVillains[(indexPath as NSIndexPath).row]

    // Present the view controller using navigation
    navigationController!.pushViewController(detailController, animated: true)

}