Creating a Collection View (Swift 3)
In this blog, I’ll discuss how to implement a simple collection view. It’s easy!
A collection view is an ordered layout display that allows for more customization than a tableview. I would prefer to use a collection view over a table view if I am displaying multiple images in a grid-like manner. If I just want to display a simple list, I would use a table view.
For this blog, I will be retrieving data from the iTunes RSS feed generator. The app will display the US top 10 Audiobooks in iTunes.
Step 1: Add a Collection View
In Main.storyboard, drag a collection view onto the view controller. Add constraints to have it align with the edges of the superview.
Add constraints to have it align with the edges of the superview.
Step 2: Assign the View Controller as the Collection View’s data source. Note that I did not assign the View Controller as the Collection View’s delegate because I am simply displaying collection view cells, and not expecting to have any functionality where a user can highlight to interact with the displayed cells.
Step 3: In ViewController.swift, conform to the UICollectionViewDataSource protocol.
Step 4: Create an instance of a collection view in our ViewController.swift file.
Step 5: Create a CollectionViewCell.swift file.
This CollectionViewCell.swift file will have outlets for an UIImageView (for a book image) and a UILabel (for our book label). In this class, we will also have a function that handles displaying the content for the cell.
Step 6: In Main.storyboard, select the collection view cell and set its class to “CollectionViewCell” and reuseIdentifier.
With the collection view cell selected, in the Attributes Inspector, label the reuse identifier as “collectionViewCell.”
Step 7: Drag an UIImageView and an UILabel onto the collection view cell. Constrain them as necessary.
Step 8: Connect your UIImageView and UILabel to their respective properties in the CollectionViewCell.swift file.
Step 9: Create a data model for an Audiobook.
Create a new file called Audiobook.swift and identify the properties for this data model. Note that I take in the image URL as string in the “coverImage” property. The Audiobook initializer will parse through a dictionary for each Audiobook object.
Step 10: Write the APIClient implementation.
Step 11: (optional) Create a DataStore manager class (singleton) to handle the creating of Audiobook objects from this returned API JSON data.
As noted below, I import UIKit (because I will be storing our book images as UIImages in this file).
You can see that I have an array of Audiobooks and an array of UIImages to store these objects to be displayed in the collection view. This isn’t my favorite way of organizing my objects but for now, it’ll do.
You’ll also note that I have two functions: getBooks(completion:) and getBookImages(completion:). I call getBooks(completion:) within getBookImages(completion:). Note that the getBookImages(completion:) function gets called in ViewController.swift’s viewDidLoad() method.
Step 12: In ViewController.swift, call the DataStore’s getBookImage(completion:) function.
I call this in viewDidLoad() to trigger the call to the API endpoint and retrieve the book information and images. Note that I also reload my collection view here, so it will have the data ready to display.
Step 13: Finally, we implement our collection view data source methods.
The two required UICollectionViewDataSource methods are collectionView(_numberOfItemsInSection:)
and collectionView(_cellForItemAt:).
Note that on line #31, I reference the same reuseIdentifier that we typed into the collection view cell Attributes Inspector.
Also, note on line #34 that I call on the displayContent(image:title:) method in CollectionViewCell.swift which will display the content.
Step 14: Decide on your collection view cell sizes and view spacing.
Section insets are the margins for the content in each section (how far the content is from the screen edges). Minimum spacing is the amount of spacing between lines in the collection view.
You can see the finished product here:
The repo for this project can be found here.
Resources:
