Custom Collection View Cell iOS Tutorial

The Collection View provides a flexible way to present content to the user. Similar to a table view, a collection view gets data from custom data source objects and displays it using a combination of cell, layout, and supplementary views. A collection view can display items in a grid or in a custom layout that you design. In this tutorial we will create a custom collection view cell by adding an image to it. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCustomCollectionViewCellTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

We need an image to display in our Collection View Cells. sodownload the image and add it to the Assets folder.

Go to the Storyboard and delete the View Controller. Drag a Collection View Controller from the Object Library to the Storyboard. Select the Collection View Controller and go to the Attribute Inspector. In the View Controller section select the "Is Initial View Controller" checkbox.

Select the Collection View and go to the Size Inspector. In the Collection View Section set the Cell size to a width and height of 50 points.

Drag an Image View from the Object Library inside the Collection View Cell and make sure the height and width is also 50 points. Select the Image View and go to the Attribute Inspector. In the View Section set the Mode to "Aspect Fit"

The Storyboard should look like this.

Since the View Controller is deleted in the Storyboard the ViewController.swift file can also be deleted. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionViewController and make it a subclass of UICollectionViewController.

Go back to the Storyboard, select the Collection View Controller and go to the Identity Inspector. Change the custom Class to CollectionViewController.

Go to the CollectionViewController.swift file and in the viewDidLoad method delete the following line.

self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

We will set the reuse Identifier in Interface Builder, so this line isn't needed. Go back to the Storyboard and select the Collection View Cell. Go to the Attribute Inspector and in the Collection Reusable View section set the Identifier to "Cell"

Next, create a class for the custom Collection View Cell. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionViewCell and make it a subclass of UICollectionViewCell.

Go back to the Storyboard and select the Collection View Cell. Go to the Identity Inspector and in the Custom Class section change the Class to "CollectionViewCell"

Select the Assistant Editor and make sure the CollectionViewCell.swift file is visible. Ctrl and drag from the Image View to the CollectionViewCell class  and create the following Outlet.

Go to CollectionViewController.swift file and add the following property

let myImage = UIImage(named: "Apple_Swift_Logo")

Next we will change the predefined methods.

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


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // 2
    return 100
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // 3
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
    
    cell.imageView.image = myImage
    
    return cell
}

You can download the source code of the IOSCustomCollectionViewCellTutorial at the ioscreator repository on  Github .