Making a Simple Photo Gallery Using UICollectionView (Swift 5)

Photo by kevin laminto on Unsplash

Today we are going to walk through a basic implementation of UICollectionView from scratch. If you have ever worked with table view, it will be very familiar to you.

Here is what you are going to learn:

• An introduction to UICollectionView
• How to use UICollectionView to build a layout in the form of a photo gallery
• How to pass data to another view in order to see the details of an image

Let’s start!

UICollectionView works pretty much like UITableView. While UITableView uses a single column to present data, UICollectionView offers us flexibility to make several columns in a grid-like view, a tiled layout, a circular layout etc.

Completed project.

Just like in the table view, there are two ways to add the collection view into project. You can use the collection view with UICollectionViewDataSource protocol or collection view controller which has a built-in UICollectionViewDataSource protocol in it.

Today we are going to use the collection view controller. When a user launches the app, it displays a set of images of some cities/towns in Turkey. If the user taps an image, it displays a detailed version of the image.

Let’s get started with opening the Xcode and creating a new project using the Single View Application template. Name the project “Cities” or whatever you want.

Once you have created the project, open the Main.storyboard and delete the default view controller and drag a new Collection View Controller from the object library. Delete the default view controller in the project navigator as well. Later, we will create our own custom classes.

Under the attributes inspector, set this collection view controller as an initial view controller.

Adding the collection view controller and setting it as initial view controller.

Select the Collection View Controller under the document outline. Under the size inspector, change the width and height of the cell to 100 and 150 points. Change the min spacing for both the cells and the lines to 10 points.

Changing the height and width of the cell.

Select the cell and set its identifier “dataCell” under the attributes inspector.

Setting the cell identifier.

Drag an image view from the object library to cell. Under the size inspector, set the values below;

X: 0, Y: 0, Width: 100, Height: 115

Adding image view to the cell.

We will add a label under the image view to display the name of the place. Drag the label from the object library to the cell and set the values below under the size inspector;

X: 0, Y: 115, Width: 100, Height: 35

And set the values below in the attributes inspector;

alignment option: center, font size: 15

Now it is time to add constraints to the image view and to the label. Select the image view, click Add New Constraints in the layout bar and 4 spacing constraints like below picture. Repeat the same process for the label. Your design should look similar to the picture below.

Adding constraints.

To embed the collection view in a navigation controller, go up to the Xcode menu, select Editor>Embed in>Navigation Controller. Set the title of it as “Cities”.

We are going to use MVC pattern in this tutorial. So, we can start with creating our own custom view class. Right click on the Cities folder and select New File. Create a new class using Cocoa Touch Class. Name the class CityCollectionViewCell and set the subclass to UICollectionViewCell.

Creating a new class named CityCollectionViewCell

Repeat the same process to create a new class for the collection view controller. Name the class CityCollectionViewController and set the subclass to UICollectionViewController.

Now we can start to add outlets to CityCollectionViewCell. We have an image view and a label in the cell. So, open the CityCollectionViewCell.swift and insert the code below to declare outlet variables for the image view and the label.

Go back to the storyboard and select Collection View Cell. Set its class CityCollectionViewCell under Identity Inspector and right click on the cell and connect the outlet variables to the image view and to the label.

Connecting the outlet variables.

Also select Collection View Controller and set its class to CityCollectionViewController under the identity inspector.

We created our View and Controller. Now it is time to create our Model. But first you can download the image pack from the link below;

Images. Unzip it and add all the images to the image asset.

To build our model, create a swift file and name it City.swift. Click this file and create a new City structure like the one below;

Now move on to the CityCollectionViewController and declare a cities array. And initialise it with the set of city images.

Since we are using a prototype cell, you can remove the default statement from viewDidLoad:

Just like in the table view, we will update the data source methods of the UICollectionViewDataSource protocol:

Now run the app using iPhone 11 simulator. You will see the app like below:

Displaying the images as a grid.

We will add a new view controller in order to show images in a larger size when the user taps an image. Firstly, go to Main.storyboard and add a View Controller from the object library to the storyboard. Then add an image view to it and change the mode of the image view to Aspect Fit. Also, add new constraints like in the picture below. Make sure the constrain to margins unchecked.

Adding layout constraints to image view.

Lastly add a button from the object library to the view. Place it near the top-right corner. Delete its default title and set the image to xmark. Now you can add constraints like the ones below:

10 points from the top, 10 points from the trailing, height and width as 30. Click the Add Constraints button.

Designing the close button.

We have almost completed the UI Design. We want to display a larger image when the user taps the smaller images. So we are going to use segue to connect Collection View Controller to View Controller. Control-drag Collection View Controller to the other view controller like shown below. Select Present Modally and set the segue identifier “showDetail” under the attributes inspector.

Connecting collection view with the detail view controller.

When the user taps the close button in the detail view controller, the controller will be dismissed. To do that, add the code snippet below to CityCollectionViewController.

On the storyboard, control-drag the close button to the exit icon of the scene dock. Select unwindToMainSegue when prompted. This creates an unwind segue. (P.S. You must always write the code above in a destination view controller when you are using an unwind segue.)

Connecting the close button with an unwind segue.

It is time to create a custom class for the detail view controller. Create a new class and name it CityDetailViewController which is a subclass to UIViewController. Then add the City property and add the outlet like below.

Now go back to Main.Storyboard, select CityDetailViewController under the identity inspector and connect the outlet variable to the image view.

Connecting the cityImageView outlet variable to the image view.

Now we can continue coding. Open CityCollectionViewController and add prepare(for: sender:) method like below:

Since we have connected the collection view controller to the view controller, we must implement performSegue(withIdentifier: sender: ) under the didSelectItemAt. (If we had connected the collection view controller cell to the view controller, we could proceed without this part.)

Now you can compile and run the application. When you tap an image, you will see the larger version of it. And you can dismiss the detail view with the unwind segue by tapping the close button.

Final View.

That’s all! You can find the completed project in the link below.

Download the GitHub Link