Header, Footer, and ReusableViews

UICollectionViews are extremely versatile. You can customize them in almost any way you can think of, but many people don’t use them to their fullest potential, or even know how to add a header or footer. Take this image for example, you’ve created this app for a nice and reasonable client who is known for giving out compliments without reservation. They approach you and say

“Hey, you extremely talented and handsome developer! The way this app presents our tutorials is alright, but we’re also using this app to document our progress in our 365 day coding challenge! Do you think you could add in something that shows which day of the year this tutorial was made?”

What We’ll Cover In This Swift Tutorial

There are many different ways that you, a talented developer with complete mastery of the swift language could go to achieve this. For example, some might resize the cell to accommodate placing a label inside. That could get the job done, but for this tutorial, we’re going to focus on Headers, Footers, and UICollectionReusableViews.

Download The Project Files To Skip Unrelated Setup

Because this Bite Sized Tutorial assumes you’re already familiar with UICollectionViews in general, I have started with a project that already has them set up. The data is split into sections, and each row presents the item in that section. Because of this, I’m including a download as a starter project that already has all of this set up.This way you’ll only have to focus on the Headers and Footers portion. Click Here.

After you’ve downloaded the starter project or set up a collectionView of your own to show some cells, head over to your storyboard, select your collectionView and look at your identity inspector. Under the layout section, you’ll see two accessory boxes. Check the Header box and watch as our cell automatically resizes to accommodate, and we have’t even written a single line of code!

Common Mistakes That Result In Crashes #1

Remember this, because this is the small mistake most people make that results in a crash later on. Give your cell a reuse identifier before you do anything else.

Add a label to your header and give it some constraints. Our client has asked us to give the app the ability to show which day out of the year each post represents. For the purposes of this app, we’re just going to populate this information with an array. In a production app, we would reference some sort of data that would have the creation date, or something more sophisticated than populating the labels with an array of strings, but alas, that kind of tutorial is not very Bite Sized.

Getting Your Header To Display

To get the header to display, we’re going to have to dequeue it just like any other cell, but we’ll need a special function to do it. Bonus points if you search the UICollectionViewDataSource and find the method yourself. I’ve been working on a series for decoding the mysteries of the Swift Documentation, but for now if you don’t know how to do that, the function you’ll need is viewForSuplementaryElementOfKind.

The Supplementary Element of Kind refers to the fact that these reusable views can be either a header, or a footer. Make note of this so that you dequeue the appropriate cell, because if you don’t it will result in a crash. The reuseIdentifier is the identifier you gave your header cell when you created it. You know, the thing I told you to do before you did anything else?

Create A Custom Class To Access And Connect Your Header Outlets

We’re in the home stretch now. Our header is working and displaying, but to actually reference any of the outlets or buttons in a header or footer, we’ll need to give it a custom class and connect the outlets or buttons we want. Create a new Cocoa Touch Class, and subclass it to UICollectionReusableView.

Common Mistakes That Result In Crashes #2

Here is another place most developers rush past without thinking that results in a crash. Before you do anything else, go into your storyboard, select your header, and change its class to the one you just created. If you don’t do this, you won’t be able to connect your buttons or outlets and reference them.

Cast Your Cell As Your Custom Class

The last thing you’ll need to do is head back to where you dequeued your header cell, and cast it as whatever the name of the class you created in the last step was. This allows you to access the buttons and outlets of that class.

Tap into the cell, access the text property of the label you created, and set it to the dayCreatedArray I’d given you at the start of the project.

Homework

We’ve gone through this entire process, painstakingly creating a header cell for our client. They have decided they like what we’ve done, but as even the best clients tend to do, they’ve changed their minds. They not think our label for the post created date would look better as a footer. Think you can handle this change? Let me know in the comments if you were able to pull this off. I may not be psychic, but I’m confident you can. Let me know in the comments if you’d like any help with this homework assignment!

Stay Fresh

Need Help With UIAlertControllers?

5 Things To Know When Choosing iOS Development

For More Information On CollectionViews, I recommend Mark Moeykens!