UPDATE: The UICollectionView is much more than a grid or matrix

Get started by [downloading the full Xcode project from GitHub.]

Let’s talk about the UICollectionView, a rich, configurable, and powerful iOS user interface component. I will write code in Swift 3.0 to create a UICollectionView to which I can add, select/highlight, deselect/unhighlight, and remove UICollectionViewCell’s. I’ll show you that I can select, deselect, add, and remove one cell at a time, or multiple cells at a time. And most importantly, I’ll demonstrate the importance of the relationship between a UICollectionView and its data source, and the importance of keeping a UICollectionView and its data source synchronized. You can download my entire Xcode 8.2.1 project. Feel free to reuse my code as long as you follow the terms of the license agreement. Today, we’re going to build a basic but completely functional instance of the UICollectionView in Swift 3.0 as illustrated by the following video:

The UICollectionView can be much more than, for example, just a photo gallery’s entry point. If you download one of my apps, you’ll see that I created, well, a photo gallery’s entry point using a UICollectionView. It displays thumbnails in a grid of images. When you tap on a thumbnail, you segue to a larger version of the thumbnail.

But the items (cells) in a UICollectionView can be very complex objects, made up of text, images, buttons, activity indicators… And the cells don’t have to appear in one column as in a UITableView. A UICollectionView’s cells can be of varying size, be of varying orientation (portrait or landscape), can be organized into different sections, can be multiply selected, and can be multiply deleted (with animation). We can also insert multiple cells with animation and change multiple cells with animation. But before getting too fancy, a developer has to start somewhere, especially if he/she has never used the UICollectionView.

Note that I’m not saying that a UICollectionView is better than say a UITableView, but it’s great to have the option of using collections in a user interface. It all depends on the use case. In Apple’s UIKit framework reference, they show an example of a realistic looking bookshelf in which each shelf (row) contains pictures from a different geographical region. This example is not just hype, you could configure a UICollectionView just as Apple did. You can do all sorts of wild things with collections. But again, today is for getting started, and I want you to look at some references for components and code I used in creating the UIViewController subclass shown below:


Pay particular attention to my code for removing data items from my data source. Why does it seem like I’m jumping through hoops? I’ve got a hint: Look at the Swift 3.0 array member method I’m using:

Note that Apple’s documentation for this method states “All the elements following the specified position are moved to close the gap. … Calling this method may invalidate any existing indices for use with this collection.”

I also you want you to research two scenarios in particular as we start exploring the UICollectionView:

  • What built-in UICollectionView feature would we leverage to make multiple cell insertions, deletions, and revisions into elegant, animated, and self-contained operations?
  • How could we break our UICollectionView code into smaller more manageable pieces — modularize our code — by taking advantage of Swift 3.0? (Here’s the answer.)

I will walk you through all the steps in building a UICollectionView-based app from scratch — as in today’s starter project — but I want you to think this through and get started on your own. Have a look at my single view app’s only ViewController’s code:

Check in soon as I’ll continue to explore the UICollectionView, explain my code in detail, and talk about more advanced use cases for this UIKit component.

[Download the full Xcode project from GitHub.]

Figure 1. Thumbnails defining the entry point to a photo gallery.

Author: Andrew Jaffee

Avid and well-published author, software engineer, designer, and developer, now specializing in iOS mobile app development in Objective-C and Swift, but with a strong background in C#, C++, .NET, JavaScript, HTML, CSS, jQuery, SQL Server, MySQL, Oracle, Agile, Test Driven Development, Git, Continuous Integration, Responsive Web Design, blah, blah, blah ... Did I miss any fad-based catch phrases? My brain avatar was kindly provided by http://icons8.com under a Creative Commons Attribution-NoDerivs 3.0 Unported license.

Leave a Reply

Your email address will not be published. Required fields are marked *