iOS Tutorials: UICollectionView

In this tutorial, we’ll be focusing on CollectionView and the easiest way to go around this is to first create your project and give it a name that you prefer.

On your project, remove ViewController.swift from the project navigator and remove ViewController from the Main.storyboard. Create a new swift file that is a subclass to UICollectionViewController and name it CollectionViewController and drag CollectionViewController onto the Main.storyboard from the Object Library

On the image below, your Project Navigator should have CollectionViewController.swift if you name it as CollectionViewController. Your storyboard should contain Collection View Controller. Now, we’ll have to connect both the file on project navigator and main storyboard. Drag ImageView and Label onto the MainStoryboard and resize them

The next thing to do is to create a new Swift file that is a subclass of UICollectionViewCell which I named it CollectionViewCell. It is the same step as previous and we will have to connect them both.

One last step in creating another file and we will be done with creating anymore files. Instead of picking Cocoa Touch Class, we will be using Swift File. And I named it Collection.

In Collection.swift file, make sure you have the following code. These are some of the variables in the file in which will be called later. By calling this, we will be able to add the image and the label when called. 

Now, lets go to CollectionViewController.swift and change the following information.

Let’s make the whole thing look nice by modifying some of the width and height

Before we forget, we need to connect the variable together

Now, lets dive into some coding. Let’s create some data. We are inheriting the variable created in the Collection.swift and now we simply declare it and we are able to input our data that includes the image and the label.

class CollectionViewController: UICollectionViewController {

private var countries: [Collection] = [
Collection(image: "uae", label: "United Arab Emirates"),
Collection(image: "us", label: "United States"),
Collection(image: "uk", label: "United Kingdom"),
Collection(image: "uruguay", label: "Uruguay"),
Collection(image: "uzbekistan", label: "Uzbekistan"),
Collection(image: "vanuatu", label: "Vanuatu"),
Collection(image: "venezuela", label: "Venezuela"),
Collection(image: "vietnam", label: "Vietnam"),
Collection(image: "yemen", label: "Yemen"),
Collection(image: "zambia", label: "Zambia")]

Let’s configure some of the functions that are required. The first function shows that we only have one section. The second function return however many data we have.

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return countries.count

Lastly, to make sure that we portray our information, this is the last step. Here, we create a variable called cell that is inheriting the variable from CollectionViewCell in which we created that we connect the Image and Label earlier.

And we create a variable to store all the countries information including image and label in which are all shown accordingly.

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    let collectionCountries = countries[indexPath.row]
    cell.collectionImage.image = UIImage(named: collectionCountries.image)
    cell.collectionLabel.text = collectionCountries.label
    return cell



The following code is available on GitHub with the flags available.

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *