Image for post
Image for post

IGListKit — Migrating an UITableView to IGListCollectionView

Rodrigo Cavalcante
Dec 29, 2016 · 3 min read

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Cocoa Academy

Development, design and product thoughts regarding Apple's…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store