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.