UICollectionViewParallaxCell: Full Setup Demo

I always had an interest for parallax effects in both web and mobile applications. It adds a clean yet elegant effect that lets your app come to life without it being too gimmicky.

When I tried looking for a solution for iOS there were nearly no examples of how to implement one into a CollectionView. The tutorials I did find were not helpful. So I decided to create my own Cocoapod to help other iOS developers easily integrate a parallax effect into their projects without having to spend too much time into trying to figure out how it works.

In this demo, I am going to programmatically create a UICollectionView to demonstrate how this cocoapod works.

Get App Delegate to point to the ViewController

By default, the AppDelegate.swift points to the Storyboard. In our case, we want to launch the ViewController.swift on the initial launch of the app.

To ensure the ViewController.swift is being launched we can go to the ViewController.swift file and change the background color to blue.

When you run the app you should get a blue background like this.

Now Lets create the collectionView.

CollectionView

We can create a lazy var for the collectionView and establish the flowlayout within in as well as the delegate and datasource.

Note: I changed the background color to white

When you add the collectionView variable, you will get errors for being inability to assign a value to the UICollectionViewDelegateFlowLayout and UICollectionViewDataSource.

We can simply fix this by declaring inheriting from those classes.

Inheriting those two classes forced us to add two protocol stubs, numberOfItemsInSection, and cellForItemAt. I added these two functions into an extension to clean up the code and separate the CollectionView functions from the other functions.

If you run the app you will get a white screen.

Let’s now create the cells.

The updated code now add sizeForItemAt function for the collectionView, which allows us to create the size of each cell.

I also made each cell red in the cellForItemAt function and returning 10 cells in the numberOfItemsInSection.

Now if you run the app, you will get a white screen yet again. What are we missing?

We need to anchor the collectionView to ViewController.

Displaying Cells

In order display the cells in the collectionView, we need to do the following:

1. Create a function to setup the collectionView
2. Add the collectionView as a subView to the main View
3. Anchor the collectionView to the top, bottom, left and right anchors of the main view.
4. Register cell for the collectionView
5. Optional: set the contentInsetAdjustmentBehavior to .never
6. Call the new function that we created in the viewDidLoad

NOTE: I created another extension to the class to separate the UI/UX functions

If you run the app, you will now get red block cells.

Next, we will setup the Cocoapod to utilize the parallax effect.

Installing UICollectionViewParallaxCell

Assuming you have Pods installed on your local machine, open up terminal, find the directory your project is located and type in:

pod init

followed by

vim Podfile

which will open the file in terminal.

Once open you want the file to look as:

target ‘ParallaxCellDemoV2’ do
# Comment the next line if you’re not using Swift and don’t want to use dynamic frameworks
use_frameworks!
# Pods for ParallaxCellDemoV2
pod ‘UICollectionViewParallaxCell’
end

then run

pod install

Then open up the ParallaxCellDemoV2.xcworkspace file and you should have the new cocoapod in this project file.

Create a newfile CustomCell File

Lets first start off by creating a new file for a custom CollectionView cell called CustomCell.swift

Within this new file, we will import the UIKit and UICollectionViewParallaxCell. The class itself will inherit from the UICollectionViewParallaxCell.

Going back to We can now add a backgroundImage variable with a didSet. Within the didSet, we are initializing the parallax effect with setupbackgroundParallax. The function allows you to set the imageView, cornerRadius, paddingOffset and constraints.

Finishing Up Setup

Now going back to the ViewController we can finish setting up the parallax effect.

We need to establish that the cell is now a type of the CustomCell class we just created. We can update the way we are registering the custom cell but updating the class it is taking

collectionView.register(CustomCell.self, forCellWithReuseIdentifier: cellId)

and as well as within the cellForItemAt function.

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

next import image assets.

I simply created an array of the name of the images.

let imageGallery = [“pic1”, “pic2”, “pic3”, “pic4”, “pic5”, “pic6”, “pic7”, “pic8”,”pic9", “pic10”]

Once that is done we will need to update the numberOfItemsInSection and cellForItemAt functions

In the numberOfItemsInSection the number of cells being returned is now the number of items within the array.

In the cellForItemAt we are setting the paddingOffset, background image, bounds and as well as the instantiating the parallaxOffset.

The last function we need to setup is the scrollViewDidScroll function.

If you run the app now, you will get a parallax effect on your collectionView.

Demo of Parallax Effect