Create a Horizontally Scrolling UICollectionView with Dynamic Cell Sizes
Difficulty: Beginner | Easy | Normal | Challenging<br/>
This article has been developed using Xcode 11.4.1, and Swift 5.2.2
- You will be expected to be aware how to make a Single View Application in Swift
- The solution to this article is Auto Layout based, so some knowledge of that would be useful
UICollectionViewCell: The on-screen cell for the UICollectionView type
UICollectionView: An object that manages an ordered collection of data items and presents them using customizable layouts
There are a set of `UICollectionViewCell` objects that can be used horizontally. But here in this article we want to do more than this — we want the cells to be sized to their content (which will be the text label).
UICollectionViewCell here is a particularly simple cell instance.
This is actually a
xib file so we need to ensure that this is instantiated correctly in the
The Swift file
CustomCollectionViewCell.swift is the most basic possible — simply the
UILabel is connected to the
xib file through the outlet.
Now we will talk about how we have set this up before thinking about the *solution* for making this fit to the size of the content.
The view controller
This view controller sets up the
UICollectionView with a
UICollectionViewFlowLayout(), and it is here that the
scrollDirection is set to be
Perhaps the only other interesting part of this is the way I have registered the nib (
let nib …) and then later
dequeueReusableCell with the same cell for the identifier
Please do forgive the
dta being a load of junk Strings. Just accept it.
Here is the code:
The magic sauce
UICollectionViewFlowLayout will be declared as layout and then we feed it an estimated size with
layout.estimatedItemSize = CGSize(width: 150, height: 150)
The following *could* be done in code rather than in Interface Builder, but here is shown as Auto Layout constraints.
The *secret* for this? This isn’t too tricky — this is making a constraint from the
UILabel to the
UIView — and it is this that makes the
UICollectionViewCell the same width as the
This gives us the solution as follows — remember that this scrolls horizontally on a real device / a simulator
Creating a horizontally-scrolling
UICollectionView isn’t that difficult — but
UICollectionViewDataSource feels a little fragile.
That makes it feel like there is a new article coming….
The code from this is included in the attached Repo.
If you’ve any questions, comments or suggestions please hit me up on Twitter