Programmatic UICollectionViewController Tutorial

Photo by Max Ducourneau on Unsplash

In this tutorial we will create a simple app which uses UICollectionViewController programatically without using storyboard :).

Before we start coding first lets see what’s a UICollectionViewController look like?

Purple Color Area is UICollectionView. It is the main view in which content is displayed and it is a subclass of UIScrollView just like UITableView.

UICollectionViewCell are just like UITableViewCells which displays the content. These cells can be created by using Storyboard or programatically.

Both Header and Footer Views are SupplementaryViews

Open Xcode and create a new project and select SingleView App and keep whatever name you want! Now delete your Main.storyboard file and also remove Main Interface name and keep it empty like below.

First delete your ViewController and create a new Cocoa Touch Class of UICollectionViewController. As, we are not using storyboard, we need to do initial setup in AppDelegate. In didFinishWithLaunchingOptions add the following code

Now i want all my even index cells to be red color and odd index cells to be blue along with a header and footer just like shown in first picture.

1. In numberOfSections return 1
2. In numberOfItemsInSection return 20
3. In cellForItemAt we need write the logic for even and odd number!

Now run your Project and it will get a error like below

Straight from the apple docs..

We need to create a property for layout and initialize our collectionViewController with flowLayout. Update your AppDelegate by adding the below code.

Now run the project and you can see it’s working. First let’s fix the background color. Add the following code in your CVC viewDidLoad

Now lets fix the size of the collectionViewCell. I want to create card like cells just like Apple AppStore. Create a extension for HomeCVC and add UICollectionViewDelegateFlowLayout.

This protocol defines the size of items, insetForSection, line Spacing e.t.c

What is that — 15–15 above you may ask? If you run with width as collectionView.frame.width you will get the below error.

We need to consider insetForSection if declared any. As our left and right insets are 15 each we just minus both of them from the width. Now run the project and you can see a better Layout compared to previous one ;)

Now we need a header and footer. One header for index 0 and one footer for last index. For this i’m going to create a separate class.

For convenience i’m creating different Classes for both Header and Footer.

I’m going to add a label to both Header and Footer classes programatically, so that we can display some text.

Now lets complete the boilerplate code and add constraints for that label and setup our label for final use.

Now just like above we will create a footer class with a single label just like above

Now let’s register our supplementaryView class in viewDidLoad

Now add supplementaryView DataSource method

if kind is Header we will add Header class else we will add Footer class and return the UICollectionReusableView. Now run the app, but you wont see any Header or Footer. That’s because we didn’t set size for both header and footer! Moreover, i want header just for first item and footer for the last item. Let’s write code for that.

Now go to UICollectionViewDelegateFlowLayout extension and add the below code.

if the section is 0 then we set width and height values else we will return zero. Just like header we will now do the same thing for footer.

Now Run the app and you will see Header for first cell and Footer for last cell :)

And finally we need to do two more things to achieve App Store like layout:

1. Need to add cornerRadius to cells
2. Hide the NavigationBar

Add cornerRadius code in cellForItem like below

Now for hiding navigationBar add the following code in viewDidLoad

And the final output will be something like this

That’s all for this post! Until next one see ya..