Collection View Controller 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 display a number of colored cells in a collection view. This Tutorial is built for iOS8 and Xcode 6.

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

Go to the Storyboard. We don't need the default View Controller so select and delete the View Controller. Next,  drag a collection view controller to the Storyboard. 

With the deletion of the default View Controller, no initial View Controller is selected. Select the Collection View Controller and in the Attributes Inspector select the "Is Initial View Controller" checkbox.

The ViewController.swift file is also not needed anymore. so delete this file. Next, add a new file to the project. Select iOS->Source->Cocoa Touch Class. Name the file CollectionViewController and make it a subclass of UICollectionViewController.

This new class must be linked with the Collection View Controller in the Storyboard. Go to the Storyboard and select the Collection View Controller. In the Identity Inspector change the Custom Class to CollectionViewController.

We will a grid of cells containing a red or blue color. To determine which color the cell will be, we create a property of type boolean in the CollectionViewController class.

var cellColor = true

With the creation of the CollectionViewController class, most delegate methods are already implemented. Some methods must be tweaked a little. Change the following methods.

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        // 1
        return 1

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

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {    
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as UICollectionViewCell
        // Configure the cell
        // 3
        cell.backgroundColor = cellColor ? UIColor.redColor() : UIColor.blueColor()
        cellColor = !cellColor
        return cell
  1. By default the CollectionView only has 1 section.
  2. There will be 100 cells created in the Collection View
  3. If the cellColor Boolean is true, the cellcolor is red, otherwise the cellcolor is blue.

In the code the Reuse Identifier of the Collection View Cell is set to "Cell". We need to set this Reuse also in the Storyboard. Select the Collection View Cell and in the Attributes Inspector set the Reuse Identifier to "Cell".

Build and Run the project, a Collection View with a colored grid is displayed.

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