How to improve your IGListCollectionView
On my last post I showed how to migrate an UITableView to an IGListCollectionView and today I’m going to show how we can improve it by adding others kinds of cells and handling touch events. So we gonna use the last post’s project as our starter project, you can find it here
Our goal is to add an UISearchBar, an UICollectionView with horizontal scroll that will be populated with events (I’ll call it EmbeddedView), an alternative way to see our characters (row and grid) and change our viewcontroller on touch event.
To not be long and boring I’m going to cover only a few and key topics to show you how we achieved this:
First of all we gonna need to change the way our model is loaded to our IGListCollectionView. Our
ViewController has an array of
Character which should conform to
IGListDiffable but now we are going to work with the protocol instead of a concrete class so we need to create a new array of
IGListDiffable. All objects that we want to include in our list should conform to it, so we are going to create a
Search , a
CharactableView (which will handle if our cell is a row or a grid), a
Portrait and an
Each model will represent an cell in our IGListCollectionView. Below you can see how we did this in the
You can check all models here
We created a SectionControllerProtocol so our models can handle its own SectionController. Just to remember, the SectionController will be the class responsable for creating a cell and handle touch events. I’m going to talk a bit more about them later.
Second we need to create a
UICollectionViewCell for each cell(SearchBar, EmbeddedView, Portrait, Row and Grid). They work like a normal UICollectionViewCell, just create a xib, link some outlets and it’s done. Here is our
After that we going to work on our SectionControllers. Every SectionController will work like we saw in my last post except the
EmbeddedSectionController this one deserve a special attention because it’ll have its own
IGListAdapter so we can pull events from Marvel API and show them to user.
It should implement
IGListAdapterDelegate to pull more events like in an endless TableView.
Finally we just need to change our
ViewController to work with our new cells.
We created an
IGListDiffable array called
objects(for:) method we filter our characters based on an filterString and add a Seach and an EmbbedView so they can be placed before our characters list.
return [self.searchView as IGListDiffable] + [self.embeddedView] + (filter as [IGListDiffabe])
Every time we change the layout of our list, row to grid or grid to row we need to call
adapter.performUpdates() it reloads our IGListCollectionView based on a diff algorithm.
To handle touch events on cells we need to implement the
didSelectItem() method, like we did on
You can check the final project here. If you have any comment let me know.