When trying to describe a collection view, one might say that it is a more customisable and flexible table view. Much like the table view, collection view is used to display a list of items. However, each section consists a number of items and not rows, due to the fact that the items are placed according to their size and other view properties. That means that a section has an auto-arranged number of columns.
Before starting to implement our own collection view, we have already pre-implemented our custom collection view cell. The item that will be displayed consists of an image, and the image's name. The list of items contains three elements. Let's start building our collection view!
- Add a collection view via Design screen.
- Go to Code > Protocols > CollectionViewDatasourceProtocol and add the required functions.
- The collectionView:numberOfItemsInSection: should return the number of "cells", therefore the number of objects that the user would like to list in the section with the given section index.
In our example, the itemsList list contains three elements. So we could just return the number 3. However, since in the future the itemsList content may be increased or decreased, we will return the count of objects of the itemsList, to avoid future bugs in the app.
- The collectionView:cellForItem:andSection: should initialise a collection view cell, set its properties and then return it.
That's all folks! A basic collection view is created. Stay tuned to find out how to customise your collection view.