Reordering Collection View Cells Tutorial

IOS 9 introduces reordering of Collection View Cells. This is enabled by default, selecting a cell with a long press enables the user to reorder the cells. All that's needed is to update your data model. In this tutorial we will display some cells containing alphabet letters, these cells can be easily reordered. This tutorial is made for iOS 9 with Xcode 7.

Open Xcode and create a new Single View Application. For product name, use IOS9ReorderingCollectionViewTutorial 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.

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 navigate to the Editor  menu and select Embed in -> Navigation Controller. Select the Navigation Controller and go to the Attribute Inspector. In the View Controller section select the "Is Initial View Controller" checkbox.

Double-click the Navigation Bar in the Collection View Controller and change the title to "Alphabet". 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 100 points.

Select the Collection View Controller Cell and go to the Attributes inspector. In the View section change the background to green.

Go to the Attribute Inspector and in the Collection Reusable View section set the Identifier to "Cell"

Drag a Label from the Object Library and place it in the center of the Collection View Cell. Double-click the label and enter the letter "A". The storyboard should now 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 AlphabetViewController and make it a subclass of UICollectionViewController.

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

These newly created classes need to connect to the objects in the Storyboard. Select the Collection View Controller and go to the Identity Inspector. Change the custom Class to AlphabetViewController.

Select the Collection View Cell and go to the Identity inspector. Change the custom Class to AlphabetCell.

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

Go to the AlphabetViewController.swift class. Navigate to the viewDidLoad class and delete the following line. 

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

The reuse identifier is already mode in the Interface Builder. so it's not needed anymore. Add a property to store the Alphabet letters

var characterArray = [String]()

Change the viewDidLoad method to

override func viewDidLoad() {
        let str: String = "ABCDEFGHIJKLMNOPQRSTUVWXYX"
        for i in str.characters {

Each letter in the alphabet is assigned to the characterArray array. Next, change the predefined Collection View delegate 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 characterArray.count

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        // 3
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! AlphabetCell
        // Configure the cell
        cell.alphabetLabel.text = characterArray[indexPath.row]
        return cell
  1. The Collection View contains only one section
  2. 26 items will be created in the Collection View
  3. Each cell will contain a letter from the alphabet.

When reordering the cells the content needs to be changed. This can be done in the CollectionView:moveItemAtIndexPath:toIndexPath method.

override func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath,toIndexPath destinationIndexPath: NSIndexPath) {
        // swap values if sorce and destination
        let temp = characterArray[sourceIndexPath.row]
        characterArray[sourceIndexPath.row] = characterArray[destinationIndexPath.row]
        characterArray[destinationIndexPath.row] = temp

Build and Run the project, long-press a cell and reorder it.

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