I'm trying to learn how to use UICollectionView
. The documentation is a little hard to understand and the tutorials that I found were either in Objective C or long complicated projects.
When I was learning how to use UITableView
, We ❤ Swift's How to make a simple tableview with iOS 8 and Swift had a very basic setup and explanation to get me going. Is there anything like this for UICollectionView
?
The answer below is my attempt to learn to do this.
Best Answer
This project has been tested with Xcode 10 and Swift 4.2.
Create a new project
It can be just a Single View App.
Add the code
Create a new Cocoa Touch Class file (File > New > File... > iOS > Cocoa Touch Class). Name it
MyCollectionViewCell
. This class will hold the outlets for the views that you add to your cell in the storyboard.We will connect this outlet later.
Open ViewController.swift and make sure you have the following content:
Notes
UICollectionViewDataSource
andUICollectionViewDelegate
are the protocols that the collection view follows. You could also add theUICollectionViewFlowLayout
protocol to change the size of the views programmatically, but it isn't necessary.Set up the storyboard
Drag a Collection View to the View Controller in your storyboard. You can add constraints to make it fill the parent view if you like.
Make sure that your defaults in the Attribute Inspector are also
The little box in the top left of the Collection View is a Collection View Cell. We will use it as our prototype cell. Drag a Label into the cell and center it. You can resize the cell borders and add constraints to center the Label if you like.
Write "cell" (without quotes) in the Identifier box of the Attributes Inspector for the Collection View Cell. Note that this is the same value as
let reuseIdentifier = "cell"
in ViewController.swift.And in the Identity Inspector for the cell, set the class name to
MyCollectionViewCell
, our custom class that we made.Hook up the outlets
myLabel
in theMyCollectionViewCell
class. (You can Control-drag.)delegate
anddataSource
to the View Controller. (Right click Collection View in the Document Outline. Then click and drag the plus arrow up to the View Controller.)Finished
Here is what it looks like after adding constraints to center the Label in the cell and pinning the Collection View to the walls of the parent.
Making Improvements
The example above works but it is rather ugly. Here are a few things you can play with:
Background color
In the Interface Builder, go to your Collection View > Attributes Inspector > View > Background.
Cell spacing
Changing the minimum spacing between cells to a smaller value makes it look better. In the Interface Builder, go to your Collection View > Size Inspector > Min Spacing and make the values smaller. "For cells" is the horizontal distance and "For lines" is the vertical distance.
Cell shape
If you want rounded corners, a border, and the like, you can play around with the cell
layer
. Here is some sample code. You would put it directly aftercell.backgroundColor = UIColor.cyan
in code above.See this answer for other things you can do with the layer (shadow, for example).
Changing the color when tapped
It makes for a better user experience when the cells respond visually to taps. One way to achieve this is to change the background color while the cell is being touched. To do that, add the following two methods to your
ViewController
class:Here is the updated look:
Further study
UITableView version of this Q&A