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 Embedded model.
Each model will represent an cell in our IGListCollectionView. Below you can see how we did this in the Search model
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 PortraitCollectionCell
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 IGListCollectionView and IGListAdapter so we can pull events from Marvel API and show them to user.
It should implement IGListAdapterDataSource and 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 views.
In IGListAdapterDataSource 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 RowSectionController
You can check the final project here. If you have any comment let me know.
