Reorder Collection View Cells iOS 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 the order of the item in the data model. In this tutorial some cells containing alphabet letters will be displayed, these cells can be easily reordered. 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 IOSReorderCollectionViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

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. Also change the Min Spacing to 1 for cells and lines. This will decrease the spacing between the cells.

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-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 made in the Interface Builder. so it's not needed anymore. Add a property to store the Alphabet letters

var alphabet = [String]()

Change the viewDidLoad method to

override func viewDidLoad() {


    for i in str {

Each letter in the alphabet is assigned to the characterArray array. Next, change the predefined Collection View delegate methods.

override func numberOfSections(in 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
    return alphabet.count

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    // 3
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! AlphabetCell

    // Configure the cell
    cell.alphabetLabel.text = alphabet[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, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    let temp = alphabet.remove(at: sourceIndexPath.item)
    alphabet.insert(temp, at: destinationIndexPath.item)

When the cell is moved to a new postion, the original index position in the array is removed and the new index position Is inserted in the array.

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

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