How to create custom UICollectionViewCell
In the previous article, we covered how to use UICollectionView. If you didn’t read that article, you may check it out here. This article will be the next step of my previous article. So, make sure you got those concepts and the project. In this article, we are going to work on the same project and we will have custom cells in UICollectionView. In the end, our project will look like the following image.
1- Create a custom UICollectionViewCell class
In the previous article, we called the reuse identifier of our UICollectionViewCell as “cell”. Now, let’s click the “cell” on our Main.storyboard and see Class attribute under the Size Inspector tab. It shows as the class of our cell is UICollectionViewCell as shown in the image below.
Now, we want to have a custom UICollectionViewCell. In order to do that, let’s start with creating a new Cocoa Touch Class file. In the subclass section, select UICollectionViewCell in the dropdown as shown in the image below.
CollectionViewCell text comes by default to the Class section. Let’s call the class as “ColorCollectionViewCell” and create our file. Now, when we go back to Main.storyboard, we may select our new class for “cell”. Let’s select it.
2- Create a View and connect with ColorCollectionViewCell
Let’s add a View element inside of “cell” on Main.storyboard. Set the constraints as 12 for all directions — or however you like. Then, connect the View to ColorCollectionViewCell and name the IBOutlet as “innerView”.
In the end, the statement will be like this:
@IBOutlet weak var innerView: UIView!
If this step is confusing, you may check the previous article’s step 6 visual to get help. If everything is OK, let’s continue with the next step.
3- Create a setup function for UI
Now, we have a view inside of our cell but there is not much styling. Therefore, let’s create a setup function that sets the outer and the inner view’s background colors as the input parameters. Also, set these views’ corner radius properties as 8 to have more rounded views. In the end, the ColorCollectionViewCell file will be like the following code snippet.
4- Call ColorCollectionViewCell’s setup function
Now, our function looks like the following code snippet and we need to update it because currently it doesn’t use ColorCollectionView.
First, we need to make type casting and “as! ColorCollectionViewCell” to the statement that we initialized cell.
Secondly, I decided to have the inner views with a background of the two next in the color array. It could exceed our color array, so I decided to use modulo for this purpose. So, it goes to next two or starts with the beginning.
Finally, we call this setup function when we create collection view cells in ViewController. We give the background color and inner view’s background color as parameters.
Let’s run it and see the result.
In the last two cells, it shows green like we intended. So, we made it. 🤘🏻
Conclusion
Now, our collection view uses custom collection view cells. In this tutorial, I aimed to show you the basics of how to have a custom collection view cell and we did a Pinterest-like view but in my way 🦄. You can be creative and customize it however you would like to do. I hope you like this article. If you’d like to check the source code, here it is. Make sure, you check the custom-cell branch in order to see the development we did in this article. I aim to continue writing about UICollectionView. For your valuable feedback, you may reach me via hi@iremkaraoglu.com. Hope to see you in my next article, take care! 🍀
