Converting a UITableView to a UICollectionView

UICollectionView’s were released with iOS 6 as a more extensible and configurable way to display lists of items. Now UITableView’s, once an iOS developers best friend, are being used less and less.  Still, there are some devs who haven’t quite been able to embrace Collection Views, as their added abilities also come with additional complexity.  

In this post, we’ll look at the basics of UICollectionView by using one in place of a UITableView.  By learning to replace your Table Views with Collection Views, you’ll get more comfortable with Collections and learn to harness their additional abilities. An Xcode project, with source code, is available at the end of this post.

Starting with a Table View

Before we get started, let’s create a basic Table View. First, open XCode and create a new Single View Application (iPhone only will be sufficient). To stay consistent with this post, use “MGO” as your class prefix. In the main storyboard file, delete the existing View Controller and add a new Table View Controller.


Ensure your Table View has one prototype cell. This cell will represent the data of our list, and later we’ll recreate it as a Collection View Cell. For now, we’ll keep it simple: add a Label to the center of the cell. Give the cell centered alignment and enough space for a bit of text. Set the cell’s reusable ID to “tableCellID” so we can dequeue them later.


Note: If this process with prototype cells is unfamiliar, congratulations, you’re learning something else in this post!  When iOS 5 introduced Storyboards, it also introduced the ability to configure Table Cells in the same file as the Table View itself.  Working with prototype cells could warrant its own post in the future, but for know, think of it as the Table View Controller xib and the Table View Cell xib rolled into one.  

Now that our UI is set up, we’ll add some code. First, create a new class extending UITableViewCell called MGOTableViewCell. This class will be pretty simple; it should just contain one IBOutlet UILabel property called “centeredLabel.” Change your Table View Cell’s class to MGOTableViewCell, and hook up the Label created in the prototype cell to the new centeredLabel property. The classes header file should look as simple as this:


@interface MGOTableViewCell : UITableViewCell
@property (strong, nonatomic) IBOutlet UILabel *centeredLabel;


Finally, we’ll need to create our Table View Controller class. Create another new class, this time extending UITableViewController, called MGOTableViewController. Again, change the Table View Controller in the storyboard file to have MGOTableViewController as its class. Copy the following code into the MGOTableViewController’s implementation file (MGOTableViewController.m):

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
  // Return the number of sections.
  return 1;

- (NSInteger)tableView:(UITableView *)tableView 
  // Return the number of rows in the section.
  return 10;

- (UITableViewCell *)tableView:(UITableView *)tableView 
    cellForRowAtIndexPath:(NSIndexPath *)indexPath
  static NSString *CellIdentifier = @"tableCellID";
  MGOTableViewCell *cell = [tableView 
    dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
  cell.centeredLabel.text = 
    [NSString stringWithFormat:@"Row: %i", indexPath.row];
  return cell;

This code governs a very basic table view: 1 section with 10 rows. Each row is represented by an MGOTableViewCell, and its row number is put in text to the centeredLabel property. If you build and run your application, it should now look like so:


Converting to a Collection View

Now that we have our Table View, we can work on converting it to a Collection View. To start, add a Collection View Controller to the main storyboard. You should immediately notice some differences between the Collection View Controller and the Table View Controller. There are some basic superficial defaults like the controller’s background color that we won’t worry too much about here (but feel free to change them if you like). Other differences are more important.

You may notice an object called the Collection View Flow Layout. Where as Table Views always have a consistent full view cell width, vertical scrolling layout, Collection Views can scroll in many ways, and its cells can take many shapes. All this information is governed by the Collection Layout. A Flow Layout is a basic OS provided layout system that simply puts one cell after the next, until a cell is forced to wrap to the next line. While Flow Layout’s can be highly customized, they generally boil down to scrolling either Vertically or Horizontally. To mimic the behavior of a Table View, we’ll stick with the Vertical default. However, feel free to switch this property and see the different effect.


You may also notice the small box in the upper left hand corner of the Collection View. This is the prototype cell created by default, but it is sized very differently then a Table View Cell by default. To modify the size of the prototype cell, go to the Collection View’s Size Inspector.


While these properties appear to be on the Collection View itself, they actually map to properties of the Flow Layout, which is a property of the Collection View. Many of these properties are straightforward. To change the Collection View Cell size to mimic our Table View, change the Cell Size dimension to 320 Width by 44 Height.

Collection Views do not have separators as a standard construct like Table Views. However, the Flow Layout governs spacing between Collection Cells, and we can use this spacing to mimic separators. The Min Spacing will govern this empty space. Change the Min Spacing for both Cells and Lines to 1. The Min Spacing for Cells will have very little effect, as our cells are the full width of the view (therefore, there is no need to space cells on the same line). The one pixel of space between lines of our cells will allow the background color to show through, creating the same effect as the Table View separator.

Now that our Collection View is set up, we will follow a very similar pattern to the Table View. Add a Label to the center of the prototype cell with all the same properties as the label in the Table View Cell. Give the cell a reuse identifier of “collectionCellID.” Add a new UICollectionViewCell extension called MGOCollectionViewCell, add a UILabel IBOutlet, and hook it up to the Label similar to before.

You will also want to add a UICollectionViewController name MGOCollectionViewController, similar to how you added MGOTableViewController. The code we’ll add to MGOCollectionViewController is very similar:

- (NSInteger) numberOfSectionsInCollectionView:
    (UICollectionView *)collectionView
  return 1;

- (NSInteger) collectionView:(UICollectionView *)collectionView 
  return 10;

- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView 
    cellForItemAtIndexPath:(NSIndexPath *)indexPath
  MGOCollectionViewCell *cell = 
  [collectionView dequeueReusableCellWithReuseIdentifier:
    @"collectionCellID" forIndexPath:indexPath];
  cell.centeredLabel.text = [NSString stringWithFormat:@"Row: %i", 
  return cell;

Note that the body of the methods is almost identical: 1 section, 10 rows, row number in the centeredLabel property. The main difference is in all the method signatures. The signatures are almost identical, except they contain the name Collection View rather than Table View. This was rather convenient of the API designers; all the relevant Table View methods are repeated as Collection View methods with slightly different names. If you’re familiar with Table Views, chances are the methods you’ve come to know and love have very similar Collection View counter parts.

Now that you have completed creating both the Table View Controller and the Collection View Controller, you can drag the storyboard’s initial view controller arrow between the two views to ensure they come out the same in the simulator.

Key Differences

While this is a great exercise for learning the basics of Collection Views, its important to note that there are some key differences between Collection Views and Table Views in addition to all the added functionality of Collection Views. First, this post didn’t cover anything regarding sections or section headers. Section Headers are made incredibly easy with Table Views. While they are certainly possible with Collection Views, they are harder to set up. On the plus side, your Collection View section headers can be placed anywhere within the view, and transitioned easily with custom transforms! If you are looking to implement section headers in a Collection View, researching Supplemental Views is a good place to start.

Table Views also have support for a variety of editing scenarios. This support has not been implemented in the Collection View classes. If you are converting from a Table View that relies on these methods, expect to do a little extra heavy lifting in the Collection View.

Hopefully this post helps get you up and running with Collection Views. Once you get your first Collection View implemented, explore the many properties of the different Collection View classes and protocols to see its full capabilities. And, don’t forget to check back for more Collection View related posts in the future.

Additional Reading

Mike Oliver has been a mobile junkie every since his first “Hello World” on a spinach-screened Blackberry. Lately, he works primarily with iOS, but he’s always looking for new ways to push the envelope from your pocket. Mike is currently the Lead iOS Engineer at RunKeeper, where he tries to make the world a healthier place one app at a time.
  1. Change your Table View Cell’s class to MGOTableViewController

    I think you meant MGOTableViewCell.

Comments are closed.