• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/6/20

Complete cell view

Log in or subscribe for free to enjoy all this course has to offer!

Collection view cells are a blank canvas and open for full customization. We’ve got some information to present to a user, so let’s make it look attractive and functional for our app.

Creating the cell UI

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:

Collection View Cell

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:

List collection view cell
List collection view cell

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.

Subclassing collection view cell

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:

Configure cell subclass attribute in storyboard
Configure cell subclass attribute in storyboard

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

Configure cell identifier attribute in storyboard
Configure cell identifier attribute in storyboard

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!

Feeding the 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:

Collection view using sample data
Collection view using sample data

Nice! ✨

Let's recap!

  • 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.

Example of certificate of achievement
Example of certificate of achievement