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
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
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
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.