Collection views are similar to table views, they show a collection of cells defined by a custom layout and like table views, they have to conform to protocols in order to display data and perform actions. In this tutorial, we are going to create a collection view that looks like a grid.

Ok, let’s dive in…

Let’s start creating a new project and this time select Swift. Now, let me start introducing to you the class that will handle the layout of the collectionView, UICollectionViewFlowLayout.

Create a new Cocoa Touch file and make it subclass of UICollectionViewFlowLayout, add this full implementation and I will explain it…

override init() {
self.minimumLineSpacing = innerSpace
self.minimumInteritemSpacing = innerSpace
self.scrollDirection = .vertical
required init?(coder aDecoder: NSCoder) {
//fatalError("init(coder:) has not been implemented")
super.init(coder: aDecoder)
func itemWidth() -> CGFloat {
return (collectionView!.frame.size.width/self.numberOfCellsOnRow)-self.innerSpace
override var itemSize: CGSize {
set {
self.itemSize = CGSize(width:itemWidth(), height:itemWidth())
get {
return CGSize(width:itemWidth(),height:itemWidth())

We want to create a grid Layout with a 1 point of space between cells horizontally and vertically, that’ts why we have a constant with that value and it’s assigned to the ninimumLineSpacing and minimumInteritemSpacing properties.

Image for post
Image for post

Right now, I bet that all your attention is on the “fatalerror” line, looks really scary but the method where this “spooky” line is declared, is just a failable initializer, I won’t go deep on this subject but you can see more about it here, also the aDecoder: NSCoder will not be triggered because we are going to do all in code, and this gets triggered only if you make the implementation of the collectionView on interface builder.

The itemWidth function returns the full width divided but how many cells in a “row” you want, minus the amount of the Innerspace.

And finally, we override the itemSize property by returning a new CGSize.

That’s all for the layout now let’s jump to the ViewController file, add this two variables…

Inside the viewDidLoad method let’s implement the collectionView with our new GridLayout class like this…

Now, we need to set a size and a position for the collectionView, copy and paste…

It’s time to create a custom Cell, create a new cocoa touch file subclass of UICollectionviewCell and name it ImageCell, copy and paste…

Here we add an ImageView to it and that’s it for the cell.
In viewDidLoad let’s register the class cell for our collectionView and also set the delegate and datasource, add this lines in the implementation of the gridCollectionView.

Now, your compiler is complaining and that’s because we need to conform the protocols, normally we will add it next to the name of the class but Swift gives us a better way to do it, and there is where extensions shine. Extensions let us put all the logic of a protocol without collapsing our class implementation, it looks like Apple is taking readability very serious and that’s awesome for us. Outside your class copy and paste this…

Of course, you can change the logic so you show a collection of images from a restApi for example, but for simplicity, we are just using one image in my case I added a Puppy image to my assets, please go ahead and find a cool image for you, Run the app and you will see a full grid layout with your image!

Image for post
Image for post

Lets’s go a little bit further, and add some basic animation, play with alpha values to create a dissolve effect and also use a UIGesturRecoginzer.

Start adding a UIImageView to the project in viewDidLoad and set it’s alpha value to 0

Layout the fullImageView with the same dimensions and position of the collectionView add this line in the ViewWillLayoutSubViews method…

If you run the app now, you won’t see the fullImageView, and that’s because the alpha value is 0, the alpha property value goes from 0 to 1, O invisible and goes up until 1 completely visible.
Let’s create a method that will change the alpha back to completely visible and use CGAffineTransform to make a cool animation, copy and paste…

Go to your extension, and add this…

Now if you run the app, it will show you the fullImageView when you tap in any cell, but we need to dismiss that view and to accomplish that we are going to add a UITapGestureRecognizer to it; add this lines in viewDidLoad…

Finally, let’s implement that method so we shut up the compiler error, let’s play with the alpha again by creating a “dissolve effect” changing back the alpha to 0 in 0.5 seconds, of course, you can customize the duration of it as you want, here is the function…

Run the app, tap in a cell to show a full image and then tap the image to dismiss it. Now, you have a first approach to different useful tools like UICollectionViews, extensions, CGAffineTransform, playing with the properties of the views like changing alpha in animation blocks to create cool effects and using a UITapGestureRecognizer to perform actions.

Image for post
Image for post

Hope you find it helpful here is the full project in Swift and here in Objective-C.

Here is a new version of the project for Swift 4 and using programmatically Autolayout.


Image for post
Image for post
James Rochabrun — Founder Start App Studio

Written by

Senior iOS Engineer #latinintech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store