Equally Spacing UICollectionView Cells

Most iOS Developers Use UICollectionView, And Equally-Spaced Cells Should Be Built-In

The Problem

Apple’s iOS classes UICollectionView and UICollectionViewFlowLayout are used by many app developers, and for the most part these classes work well together and don’t require too much customization, but one thing they don’t do well is automatically spacing cells out for all device layouts.

I found this very issue when developing an app that was responsible for showing thumbnails of photos from a large organization’s REST services.  With the default values, or even with slightly adjusted values, my layout looked something like the following screenshots.

iPhone 5s, Portrait Mode

screen-shot-2016-11-11-at-1-34-47-pm

iPhone 5s, Landscape Mode

screen-shot-2016-11-11-at-1-34-55-pm

iPhone 6s, Portrait Mode

screen-shot-2016-11-11-at-1-33-58-pm

iPhone 6s, Landscape Mode

screen-shot-2016-11-11-at-1-34-03-pm

iPad, Portrait Mode

screen-shot-2016-11-11-at-1-33-03-pm

iPad, Landscape Mode

screen-shot-2016-11-11-at-1-33-11-pm

While the horizontal white space between cells may be fine, the vertical white space is either non-existent or not consistent with the horizontal white space; also, it would be nice to have a little white space around the edges of the screen.  It is possible to adjust these values, but each value can be different for each device and orientation.  Currently, neither Xcode’s Interface Builder editor nor the class UICollectionViewFlowLayout provide a means to set these values automatically.

Collection View Flow Layout in Interface Builder

screen-shot-2016-11-11-at-2-23-52-pm

The Solution

To fix this issue, I wrote a subclass of UICollectionViewFlowLayout called DSSCollectionViewFlowLayout which overrides the method prepareLayout to calculate the values needed for the properties minimumLineSpacing, minimumInteritemSpacing, and sectionInset so all have the same value whenever the user changes the orientation of the device or layout of the application.  With this change, the white space around each cell is far more pleasing.

iPhone 5s, Portrait Mode

screen-shot-2016-11-11-at-1-35-32-pm

iPhone 5s, Landscape Mode

screen-shot-2016-11-11-at-1-35-37-pm

iPhone 6s, Portrait Mode

screen-shot-2016-11-11-at-1-36-12-pm

iPhone 6s, Landscape Mode

screen-shot-2016-11-11-at-1-36-16-pm

iPad, Portrait Mode

screen-shot-2016-11-11-at-1-36-53-pm

iPad, Landscape Mode

screen-shot-2016-11-11-at-1-36-58-pm

While the amount of white space around each cell is different across devices and orientations, the amount is consistent within a particular layout.

When developing software for Apple’s platforms, I prefer adding settings within storyboards and XIBs/NIBs as much as possible over writing source code, so I decided to add the property placeEqualSpaceAroundAllCells to my subclass so I could turn on or off this functionality within my collection view’s resource Identity Inspector panel.

Collection View Flow Layout in the Document Outline

screen-shot-2016-11-11-at-1-56-26-pm

Identity Inspector of the Collection View Flow Layout

screen-shot-2016-11-11-at-1-56-46-pm

The Objective-C header for my subclass DSSCollectionViewFlowLayout declares the property placeEqualSpaceAroundAllCells so my version of prepareLayout will know whether or not to perform the equidistant white space calculation.

DSSCollectionViewFlowLayout.h

dsscollectionviewflowlayoutobjchx

The Objective-C source for my subclass’s implementation of prepareLayout shows how I calculated the right amount of space whether scrolling horizontally or vertically.

DSSCollectionViewFlowLayout.m

dsscollectionviewflowlayoutobjcmx

 

And, for fun, I wrote a Swift version, too.

DSSCollectionViewFlowLayout.swift

dsscollectionviewflowlayoutswiftx

I’ve currently only used this code with square and rectangular fixed-sized cells, but it should also work with collection views with variable-sized cells.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s