Everything about iOS app development
Create Grid Layout Uicollectionview Xcode Ios App

How to create a grid layout in a UICollectionView

Post Series: Create an iOS app

So many times in your iOS apps you need to display custom layouts, and UITableViews are just not enough since you wouldn’t want to deal with subviews and scrollviews to create a grid layout, for example. You would just use an UICollectionView instead.

create grid layout uicollectionview

Check it on Youtube

If you don’t like to read, just go to my YouTube channel and check out the tutorial there.

Create a Grid Layout

For creating a custom grid to use it with your UICollectionView, first of all you need to add a new file to your project and name it “GridLayout”, subclassed from UICollectionViewFlowLayout.

create new grid layout file xcode uicollectionview

In this example, we’ll use a simple layout, in which you only need to modify one function/property that will let the UICollectionView know what sizes to use for each cell and how to place them on the view.

The idea is, that you take the width of the collectionview, divide that value by the number of columns you wish to display and than substract the spaces between each column. The height of each cell will be set according to your desires. Simple as that.

Let’s see how it looks in code:

 

First of all we simply overwrite the property itemSize, especially its get method, where we get the width of the collectionView (which can be nil hence the if statement) and use the numberOfColumns variable to get the proper width of the cell.

You can of course calculate the height as well of the itemSize property, in this example I just left it at 100pt. If you wish to use a computed value for the height of the cell, you could also add a custom variable that reflects the height of each cell.

Now we have that, we are pretty much done.

All we need to do now, is just add the variable we created for the number of columns, and an init method to initialise the grid layout.

 

You initialise it with the number of columns you wish to display, and it sets the minimumLineSpacing and minimumInterItemSpacing values to 1 to have a thin line between each row and column.

Support rotation

If you were to support rotation within your apps, you need to implement another method in the grid layout class. Because if you rotate your phone, the layout will adopt to it, but you might end up in a totally different place => the contentOffset will not be equal to the previous offset value. You obviously want to keep the current offset after the rotation, just imagine you scroll through your Facebook feed, rotate your device and the feed starts from the top… Definitely not cool.

 

To fix this issues, we just need one function to add:

 

So just return the current offset of the collectionview. Of course this will not work, if you have a “super custom” layout.

 

Finally to support rotation and display your grid layout properly, even if your users turn their phones on their sides, we need to implement one function in your UIViewController. This function is called when the view is about to be rotated. Call the invalidateLayout on your grid layout object, so it will calculate the itemSize properties and refresh the view so the cells are properly sized.

 

Connect it with your UICollectionView

If you have created your grid layout, now it is time to hook it up with the collectionView. All you need to do is, go to your viewController where you want to show your collectionView and add the grid layout as a new property. Initialise it with the number of columns you want to show, than assign it to your collectionView.