Enrich your iOS apps with dynamic content and advanced presentation

Let's lay out the necessary UI components within our cell using a storyboard. We'll be working with the cell area highlighted in the left top corner of the collection view called cell prototype:

Let's place the following elements on it:

• Artwork

• Title

• Artist name

We'll use UIImageView and two UILabel elements to compose the view. Let's also assign a placeholder image to the image view, change the text of the labels to something fun, and adjust the sizing, so the cell looks like this:

I used the Helvetica Neue Light font for the bales, size 20 and 17, respectively. Adjust the title label to take two lines and make sure the backgrounds of all elements are set to clear so that we can expose the background color of the underlying view.

We need access to individual elements within each cell. Technically speaking, we are going to have one or more cells, and we can't have those elements connected to the view controller. Our code must be able to distinguish elements of each item. Therefore, we need to subclass our cells:

import Foundation
import UIKit

class ListCollectionViewCell: UICollectionViewCell {
    
}

We then connect this to our visuals by assigning the subclass to class attribute in storyboard attribute inspector:

After that, assign a reusable identifier to it so we can recollect the cell from the view controller code. We'll call it  ListMediaCell :

Then, in a subclass, create outlets for all the elements:

class ListCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var artworkImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var artistLabel: UILabel!
    
}

 Now we need to create a method that would display the data passed by the view controller. Let's call it  populate :

func populate(mediaBrief: MediaBrief) {
    titleLabel.text = mediaBrief.title
    artistLabel.text = mediaBrief.artistName
}

Notice that we are passing the MediaBrief object as a parameter. In fact, our cell requires only three elements, and the rest don't matter. We could pass those elements as three separate parameters. Either skipping the entire object or a number of parameters are both acceptable approaches.
The latter could reach its limit as passing too many individual parameters is not desirable.

Notice also that I didn't populate the image. We'll get to the cause of this later in the course. We still need to assign an image to the image view of the cell. For that, we are going to create a separate method, this time passing an image as the only parameter.

func setImage(image: UIImage?) {
    artworkImageView.image = image
}

Very good! We can finally use our sample data!

We are now ready to test it out. Let's go back to the list view controller and adjust the data source to use an array of fake items:

var dataSource: [MediaBrief] {
    return DataManager.shared.mediaList
}

Now alter the cell providing method:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ListMediaCell", for: indexPath) as! ListCollectionViewCell
    let mediaBrief = dataSource[indexPath.item]
        cell.populate(mediaBrief: mediaBrief)
        
    return cell
}

Let's review the above:

• We are fetching a reusable cell for the collection view using the cell identifier we specified on the storyboard.

• Since we're certain it's there, we are downcasting it to the custom type we just created: ListCollectionViewCell using  as! .

We could also implement as a safe:

if let cell = cell as? ListCollectionViewCell {
    cell.populate(mediaBrief: mediaBrief)
}
        

However, since there's no use for our view if the cell is not there by mistake, it's better to make it crash and detect the error during testing than to "safely" let the user experience nonsense.

Let's run the app:

Nice! ✨

• Collection view cell is represented by the class  UICollectionViewCell .

• The cell's UI can be created in a storyboard - cell prototype. 

• To manipulate elements of a cell, it must be subclassed and connected to the corresponding cell in the storyboard.

• We may create any number of cell prototypes. Then we can assign a suitable one based on indexPath of cellForItem delegate method using the corresponding storyboard identifier and analyzing the results.