Custom Collection View Cell Tutorial in iOS8 with Swift

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 built in iOS 8.1 with Xcode 6.1

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftCustomCollectionViewCellsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

We need an image to display in our Collection View Cells. so download the image and add it to the project.

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!.registerClass(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

var myImage = UIImage(named: "Apple_Swift_Logo")

Next we will change the predefined methods.

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        // 1
        // Return the number of sections
        return 1

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 2
        // Return the number of items in the section
        return 100

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        // 3
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! CollectionViewCell
        // Configure the cell
        cell.imageView.image = myImage
        return cell
  1. The Collection View has only one section
  2. There will be 100 images displayed
  3. First a cell with the type of CollectionViewCell is defined. Then of each cell  the image is assigned to the imageView property of the CollectionViewCell class.

Build and Run the project. there will be 100 Swift logos displayed.

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