UICollectionView using cells with different heights
A component to allow you change the cell height size
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:
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:
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!
