skip to Main Content
Uicollectionview Grid Layout Instagram Iphone Mockup

Create 3 column grid view with UICollectionView

Post Series: Create an iOS app based on UICollectionView

UPDATED with Swift sample project

Today I’m going to show you how to achieve the basic layout Instagram is using for years in their app, being the 3 column grid view achieved by using a UICollectionView.

To tell you the truth, I was always “afraid” of UICollectionViews, whenever I had to do something with it, I always chose another way, cause it was so difficult to use and too many variables. Well it isn’t that hard to learn, just need to understand the fundamentals, and you can create awesome layouts easily.

What we are going to do?

As the title suggests, we are going to create an iOS app, that shows some pictures in a grid style view just like Instagram does it in their “discover” feed using UICollectionView.

uicollectionview iphone mockup 3 column grid view
3 column grid view in Instagram app

Let’s code our UICollectionView layout

I always like to put everything into order, so before we start, let’s see what we are going to do:

  • We need an UICollectionView and a custom flow layout to achieve the desired effect.
  • We need some photos to display (in this example, we are just going to use local images)
  • Customise our flow layout

Let’s start with a new project, or just create a viewController in your project.

Go to your Storyboard and drag & drop an UICollectionView onto your viewController and add some constraints to every side of the screen.

uicollectionview auto layout setup

Once we have that we are going to create a new class, a custom UICollectionViewCell, since we want to display the images somehow, and we would need a cell that has an image. We are doing that.

Create a new class and call it: ImageCollectionViewCell

Than add a property to it, an IBOutlet:

And add the following line in the implementation file (.m):

I’m sure you all know why we are doing this but if not let me tell you quickly.

When your UICollectionViewCell is displayed, iOS will use a cached version of your cell to save some memory of recreating the cell from zero, and it can happen that while it is happening it will use the wrong image for your cell. So you will end up showing a wrong image at the wrong place and it will only change to the proper one, once your correct image is loaded, and that might take a while. You want to avoid that.

Now that we have our cell, let’s head back to the storyboard and add this cell to our UICollectionView.

Select your cell inside the collectionView and make it bigger so we can work with it a bit better. (just drag the corners out, it doesn’t matter what size it has now, we are going to change that with the custom flow layout anyways).

Next, place an UIImageView on it, and add some constraints to the cells’ edges.

uicollectionview adding uiimageview to custom cell

Don’t forget to connect your outlets and connect your UICollectionView’s datasource outlet to your viewController.

Before you move on, of course you need to specify an identifier for the Collection Reusable view. This way, Xcode will know what prototype cell to display. In this example, we just set it to “Cell”.

Last but not least, connect your imageView outlet of your cell to the UIImageView inside it, and set the contentMode to Aspect Fill.

Add some content to our UICollectionView

Now we have everything connected, we need to add some data to be displayed. In this example we are only going to play with local images, the next tutorial will show you how to do the same if your images come from your server. (Don’t forget to add a loading indicator to you UICollectionView when loading content from your server, to make you app stand out.)

Since our ViewController conforms to UICollectionViewDataSource we need to add some methods, otherwise it will not work.

 

Add datasource methods

There are two methods, we need to add. One that tells your app which cell to use at a given indexPath (cellForItemAtIndexPath:) and how many objects you want to display (numberOfItemsInSection:).

If we run our app now it will look like … (you can add any word here that means something not really nice)

What did we miss?

First, we have no images named: @”image1″ and @”image2″. So we need to add them first. Just click on your Assets.xcassets file and add the images there. (Learn how to download images from your server)

Second, our layout is kinda weird. Why? Cause we didn’t tell Xcode which layout to use for the UICollectionView.

 

Add the custom UICollectionViewFlowLayout

Let’s start by adding a new class to our project, call it CustomImageFlowLayout and subclass it from UICollectionViewFlowLayout.

adding custom UICollectionViewFlowLayout to xcode project
Add custom UICollectionViewFlowLayout to your Xcode project

Customising our flow layout

There are only 2 methods we need to customise, implement.

First, the init method. This will be called when you allocate an object and initialise it. You want to setup some basic things for your object.

In Swift:

 

As you  can see, we set 3 things. The minimumLineSpacing to 1, which means the minimum space between each line of objects in the collectionview. So if we have a 3 grid layout, than after every 3 cell we add a 1 pt space and then display the next row.

Next the minimumInteritemSpacing to 1, which means the minimum space between 2 cells. We display a cell, than 1pt space, than a new cell.

We set all these to 1, cause we want to have a nice thin line between each cell.

Next, scrollDirection, which way we want to scroll. This time go vertical.

Sizing the cells for a 3 grid layout

And than the most important part for our layout is the itemSize property.

This will tell your layout, what size a cell should take when it needs to be displayed. You can set any CGSize here, but in our example, we would like to display 3 columns in our UICollectionView, which mean we need to get the collectionView’s width and divide it by 3 to get the width of 1 cell.

But to be totally awesome, we shouldn’t forget about those spaces between the cells. So to be exact what we need to do is, divide the width by 3, but before that subtract 2 pts from the width value. (width – (numberOfColums -1) / 3)

You could also do this with your own custom collectionview and space your UIImageViews evenly with Auto Layout. Read our tutorial how to do that here.

In code it looks like this:

In Swift:

Now we have everything, all we have to do is, assign this layout to our collectionView:

And run our app. We are done.

Since we all love Nissan GT-Rs (right?!), in this example I will use 2 images from duskin_anthony on instagram who has an amazing R35.

uicollectionview custom flow layout 3 grid style iphone
What you will get at the end, a 3 column grid in UICollectionView

It turned out pretty amazing (I think), a great layout to display images and an easy solution to achieve it.

In our next tutorial we are going to show you guys, how to transition from this UIViewController to the next one by displaying the tapped image while having a cool UIViewController transition, something like this.

Let us know below in the comments section if you like this tutorial, if it was useful, or you found an issue with it. And as always, like and share.

What’s next?

Learn how to present the selected image using a Custom UIViewController transition, read our next tutorial.

  • Pingback: Create custom UICollectionViewCell transition()

  • Dax Rahusen

    Could you also show us a swift version?

    • Yes, now it is available in Swift as well. 🙂 Downloadable sample contains both versions.

      • zero0r1

        Could you show me some append cell(UIImageCellView) demo or tutorial? please!