IGListKit — Migrating an UITableView to IGListCollectionView

IGListKit is a data-driven framework release by Instagram that helps us to create fast and flexible UICollectionViews. Actualy, it give many other features like animations and linear complexity diff calculations that makes our apps looks cooler and faster.

Today I’ll show how to migrate an UITableView to IGListKit. First of all we need an app that uses an UITableView so we gonna use Thiago Lioy’s Marvel App. You can checkout his code at github and how he created this awesome app in medium.

Before we install IGListKit and start using it lets take a look at Lioy’s code. At CharactersViewController we can see a TableView and it’s delegate and datasource which uses an array of Character.

First of all we need to instal IGListKit. That can be done through cocoapods or carthage. Using cocoapods you’ll have something like this in your pod file:

pod 'IGListKit', :git => 'https://github.com/Instagram/IGListKit.git', :branch => 'master'

Now we can start by changing the Character model. Our models should conform to IGListDiffable protocol. We can do it by using extensions

Now let’s create a new UIViewController on our storyboard. Add a UIView and then change it’s class to IGListCollectionView

IGListKit uses an interesting concept of adapter that breaks the objects in individual sections called SectionControllers. Each SectionController is responsable for a section that can have many cells, but in this example we are going to have only one cell.

Now we can create a new UIViewController called tableCharacterViewController.swift. In this file we have an IGListCollectionView, an IGListAdapter and implement IGListAdapterDataSource.

Our IGListAdapter takes an IGListUpdatingDelegate which handle rows’s and sections’s update events. IGListKit provide IGListAdapterUpdater as a concrete implementation.

IGListAdapterDataSource gives three methods to implement. One asks for the size of the collection view, other asks for the section controller of a given object and the last one asks for a empty view that will be show when the given collection does not have any object to show.

We have only to do two more things: create our SectionController and CollectionViewCell.
The SectionController is kind of a delegate. It will handle the data which will be passed by the adapter on didUpdate method and return our custom cell on cellForIndex method.

Finally our custom cell must be a UICollectionViewCell

Following theses few steps you can change you UITableView to a IGListCollectionView and be able to uses animations and diff calculations. You can find more examples on IGListKit github and raywanderlich.com.

You can check this app on github. You can check how to improve your IGListCollectionView with different cells and handle touch events in this second post.