UICollectionView using cells with different heights

A component to allow you change the cell height size

Anderson Santos Gusmão
2 min readSep 8, 2017
Changing cell height

I was participating in a project and was demanded to build an interface to display some cards, theses cards had a specific feature, they had different sizes. A co-worker brought a genius solution and I liked it, I spent some time to understand it and I decided to build a component using cocoapod to make it easier.

How it works

To simplify the explanation, the UICollectionView allows developers to customize how each cell will be built on screen, this is possible through UICollectionViewLayout class, if you want to understand it more, please look the file UICustomCollectionViewLayout.swift on GitHub link at the final of the article.

If you are just interested in use it in your project, add the pod ‘hkAlium’ in your podfile or just copy the UICustomCollectionViewLayout.swift file in your project (See the Github link at the final of article).

After, you must implement a standard UICollectionView, then you need to set a custom layout as shown in the image below:

Setting a custom layout for your UICollectionView

Implementing the delegate

In your view controller, you must implement CustomLayoutDelegate, this method returns the height size of the each cell, very similar to standard UICollectionView methods. See the code snippet below:

Setting delegate instance and columns

You need to set the delegate reference, number of columns you want and cell padding size if the default value is not good for your needs. See the code snippet below:

Distribution logic of cells

From left to right and top to bottom, this is the sequence of building. Look at the first image on the top of the article to observe the arranging of cells. Take a look at the image below:

Arranging of cells

Complete code example.

For more information about it and to access a complete example project, go to the GitHub link below:

I hope it helps you, good luck!

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Anderson Santos Gusmão
Anderson Santos Gusmão

Written by Anderson Santos Gusmão

In my house I’m the boss, my wife is just the decision maker.

Responses (2)

Write a response