UICollectionView Custom Layout: the Ultimate Tutorial – Part 1

I’m working every day with UICollectionViews and until recently never used a custom layout. I decided to take the plunge and learn how to create one when I had to deal with a complex layout on a UICollectionView and make my designer happy. So here is everything I learned (or everything you need to know — to start with) about custom layouts for UICollectionView.

Let’s imagine that you have a “complex” design to integrate in a UICollectionView. And yes, you need a collectionView. When I say complex, I mean different types of cells, some of them will have a fixed size, some others will be resized on the fly depending on their content.
You can always try to do things manually, it may work, but it may also take a (huge) lot of time and memory to get displayed on your device. So let’s see what a custom layout or UICollectionViewFlowLayout can do for us.

This tutorial will be split into two parts. In the first one, we will create the UICollectionView and cells that we are going to use in the second part where we will create the custom layout.

First, the collection view:

To cover most of the configurations you can encounter while working on a UICollectionView, let’s imagine 3 sections with 3 different layouts — have a look at the wireframe of the layout we want to achieve:

  • section 1: a cell with fixed size
  • section 2: a cell with a fixed width and a dynamic length
  • section 3: multiple cells aligned on a grid, with fixed size

Then you can have fun and mix all that together. That’s up to you.

Now, let’s create the UICollectionView and the cells.

View Controller

Create a new file (Cocoa Class) subclass of UIViewController and call it MyCollectionView.
On the storyboard, add a UICollectionView, extend its size to match the view and add the missing constraints. Set the class to MyCollectionView.
Link the DataSource and Delegate to the MyCollectionView.

Here is the skeleton of our UICollectionView:

Collection View XCode

Note: you can also create a UICollectionViewController from the beginning and skip the rest. It’s up to you.

Section 1:

Create a new file, subclass of UICollectionViewCell and name it ImageCell.
Open the storyboard and in your UICollectionView, add a UICollectionViewCell (or use the default one), drag an UIImageView in the cell, expand it to match the cell edges, add missing constraints, and set the class to ImageCell.

Image cell XCode

In the class, create an imageView variable and connect it to the UIImageView in the Storyboard.

Easy!

Section 2:

Again, create UICollectionViewCell and name it TextCell.
Back to the storyboard, we will create the text cell. Please pay attention, it will be slightly more complicated (2 extra steps, how difficult!).

  • Drag a UIStackView, resize it and pin it with a small margin to the cell edges (Params: Axis = Vertical, Alignment = Fill, Distribution = Fill, Spacing = 8). I love UIStackViews btw. I’m using them all the time! (More about that in a coming article, hopefully)
  • Then, drag a UILabel and drop it in the UIStackView. That’s your title, you can style it as you want (Bold, centered, …)
  • And finally drag a second Label and drop it in the UIStackView, right below the title.

Set the number of lines of the UILabels to 0 to enable multiline.
Set the class to TextCell and resolve the warnings or errors.

Text Cell Xcode

In the class, create a titleLabel and a textLabel variable and connect them to the labels in the Storyboard. And copy the code below in the class.

Beautiful!

Section 3:

Let’s do the last one, shall we? You know how to create a UICollectionViewCell, name it ItemCell.
Add a UIStackView just like before.
Then add an UIImageView to the UIStackView. Resize it to a square and add an Aspect Ratio constraint.
And add a UILabel below the image, as we did for the TextCell.
Don’t forget to set the class to ItemCell.

Item cell Xcode

In the class, create a imageView and an itemLabel variables and connect them to the Storyboard.

Wonderful, we’re nearly there!

MyCollectionView

Bear with me, 2 more minutes, and we’re done for part 1!
Open the MyCollectionView class and follow the instructions:

  1. If you have created a UIViewController, add UICollectionViewDataSource and UICollectionViewDelegate.
    If MyCollectionView is a UICollectionView, skip this step.
  2. Create the sections variables
  3. Add the following code for the UICollectionViewDataSource.
  4. Congrats! Job done! Run and see what happens…

CollectionView without UICollectionViewFlowLayout

Meh… You have a UICollectionView with cells, but why does it look like that?
Well we talked about using a custom layout so you didn’t expect it to work by magic, didn’t you?
Speaking of the devil, we will tackle the custom UICollectionViewFlowLayout in Part 2 of this tutorial if you don’t mind. In the meantime, you can have a look at the GitHub project if you want: SCCollectionViewCustomLayout ;)

Stay tuned!

Part 2 of this tutorial –> this way!

3 thoughts on “UICollectionView Custom Layout: the Ultimate Tutorial – Part 1

    1. Hey Han,
      Sort for the late reply, l’ll have a look at that asap. Did you have a look at the code on GitHub? It was working fine last time I uploaded it.

Leave a Comment

You want to leave a comment? Sweet! Please do so, but keep in mind that all comments are moderated and rel="nofollow" is in use. So no fake comment or advertisement will be approved. And don't worry, your email address won't be published. Thanks!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">