Mark DiFranco demos the implementation of a UICollectionViewCell.
- [Narrator] So we've done some stylization to our storyboard, we've set the background color to be a dark grey, we've added some UI elements to our cells, and we've embedded the CollectionView and a Navigation Controller to give us a navigation bar at the top. We've also introduced this model class called ShoppingCart. This class holds a list of HPlusProduct instances. We're going to use this model to fill out our CollectionView. Let's move over to our CollectionView subclass and start cleaning it up.
You can see Xcode has added a bunch of template code that we don't need right now, so we're just going to delete all of this. So I've cleared away every method that we don't need right now, and left two methods, the numberOfItemsInSection, and the cellForItemAtindexPath, which we're going to be using in this video. Let's start by creating a model in our ViewController for the shoppingCart. We're just going to create a new instance of it, like so.
Now we can use this instance to implement our numberOfItemsInSection. We're simply going to return the number of items that are currently in our shoppingCart. Now before we get to creating the cell, we're going to head back to our storyboard. If you take a look at our cell here, you can see that it's set to the HPlusProductCell, but none of the UI elements have been set up with outlets yet. Let's open up the editor window, which is denoted by these two circles.
And we're going to select our ProductCell from the top here. Now that we have our cell beside our storyboard, we're going to select each item in the cell, starting with the image view, click control, and click and drag to our class. It will then pop up a dialogue prompting us to name the element. We'll do the same for the title and the price, naming the titleLabel and priceLabel.
Now we'll clean up our class to make it nice and stylized. So you'll notice beside these IBOutlets we have little circles here, these are denoting that the IBOutlet link is satisfied. And as you can see in the storyboard as I hover over each one, it highlights the element that it's connected to. This is how we can tell that we've connected the IBOutlets properly. Before we leave, we're going to close the Assistant Editor, select our cell, and open up the Utilities Panel. If we navigate to the Attributes Inspector denoted by the downwards-facing arrow, can see there's a field here called Identifier.
We're going to provide a reuseIdentifier for our cell, we're going to name it ProductCell. We'll then take this Identifier, and copy it, and bring it over to our ViewController. As you can see, the template has added a reuseIdentifier private constant at the top. We're going to replace cell with our ProductCell identifier. So let's go back to cellForItemAt indexPath. We can see that it's dequeuing the ReusableCell already and it's using our reuseIdentifier constant. A nice way of doing this is actually just returning the cell straight up in this method here.
We can implement another method called willDisplay cell, and we can use this method to configure our cell. The first thing we're going to want to do is make sure that the cell is an instance of our custom class. So we're going to do a type check on it using a guard statement. A guard statement is similar to an inverse if, except the results of the check are available to you at the same scope rather than a subscope. This is really useful for reducing the dreaded pyramid of if statements.
So now that we know that our cell is our custom class, we can dequeue an item at the given IndexPath. So we're going to use the index path row to access the item from the shoppingCart. So now that we have our cell as a custom class and our item, we're going to start filling in the cell's UI elements with the item's properties. So we're going to start with the item's image, and setting it in the cell's imageView.
Then we're going to take the cell's titleLabel and fill it with the item's name, and finally we're going to show the price on the priceLabel. To do that we're going to show a string literal, and place the item's price inside there. That looks good. Let's save it, and run it on the simulator. And as you can see, the four items that were in our shopping cart are shown in our UI, with the image, the title, and the price for each cell.
Next, we'll go over using supplementary views to better organize your CollectionView.
- Populating cells
- Reloading items
- Animating insertions, deletions, and movements
- Configuring a UICollectionViewFlowLayout
- Interactively changing the layout
- Creating a custom UICollectionViewLayout