Creating simple table view header animated with collapse

Edoardo Vicoli
Sep 2, 2018 Ā· 4 min read
Mojave

Hi šŸ™‹ā€ā™‚ļø, today I want to show you a very easy tutorial on UITableView. In particular, how to create a beautiful and animated collapsible header, on top of a table view.

We see this kind of UI element in a lot of apps: Facebook, Twitter, just to mention some famous examples. Today I want to show you how to integrate something so beautiful but simple at the same time, in your app.

Do you like it? šŸ˜‡ Let’s see how to get that.

Let’s start by creating a brand new Xcode project, and open ViewController.swift file. As you can see, it’s clean. I usually use an extension of main class to create all methods with which handle the graphic. So, let’s create a new file that we can call ViewController+Graphic.swift and let’s code into it. Let’s add a method: setupTableView(), like this:

Setup a table view in ViewController

Now, let’s go back in ViewController.swift and implement delegate and datasource methods for UITableView.

How we initially build our tableView

So, we want 2 sections. The first will contain only the header that we want to collapse. The second will contain only the cells, under the header. So, numberOfRows should be easy to understand. I set 256.0 as the header height, but you can put whatever you want. Then, an important step: heightForHeaderInSection must return 0.0 if section is 0. Why? This method returns the height of the default headers of tableView sections. Because we want to build our custom header, we don’t need the default header for section 0. So, height will be 0. For section 1, instead, we need a > 0 height value: we want a separator between our header and the rest of tableView. That’s why I set it to 48.0.

Now you only have to call setupTableView() in your viewDidLoad() like this.

Now you can run. You should see this:

If you didn’t understand yet, we’re gonna build our collapsible header as a UITableViewCell. If you don’t see all separators in the picture, don’t worry. It’s retina display pixel density’s fault.

So, let’s build our header. Let’s create a new Swift file and write into this these things:

Our header as ImageTableViewCell

As I said, our header will be a UITableViewCell and this is the code to get it. I used a Mojave desert picture, but you can use what you want. Let’s go back in setupTableView() and let’s register this cell for our tableView, like this:

tableView.register(ImageTableViewCell.classForCoder(), forCellReuseIdentifier: "ImageTableViewCell")

We have to edit our cellForRow too, like this:

New cellForRow code

We said before that section 0 is for header, and that’s it! Let’s create also a class variable, headerImage, in order to save the imageView, our header. We don’t care about other cells, but we can add a text.

Run:

Our beautiful table view header

If you try to scroll, you won’t notice any difference comparing this to any other tableView. It’s true. In fact, we still have to build the magic.

Let’s create another Swift file. We can call it ViewController+Collapse.swift

Let’s create an extension for ViewController and let’s code.

Our collapse animation

This is our simple and beautiful collapse animation. But I want to explain you. So, scrollViewDidScroll() it’s the method that is called when we scroll the tableView, easy. scrollViewDidEndDecelerating() it’s the method that is called when tableView is stopping itself, after a scroll. Finally, scrollViewDidEndDragging() it’s the method that is called when we have touch up the tableView after we scrolled it. Simple, right?

We want a fade animation for our header, every time the tableView is scrolling. So, in scrollViewDidScroll() we have to define this behaviour. We have the refer to the header: headerImage, that we defined before in cellForRow. We want this behavior between min and max header height, so let’s check if we are between this values. Inside the check, we can adjust header’s alpha.

Now, we want an automatic collapse and expansion while we are between certain values. In particular, if we are between minHeaderHeight and maxHeaderHeight/2 we want an automatic collapse. We want an automatic expansion if we are between maxHeaderHeight/2 and maxHeaderHeight. And that’s the code for this.

Now you can run: you should see what I showed you before. You can taste this beauty with your eyes.

That’s all for today. I hope you’ve found useful this tutorial. Thanks for reading. Bye šŸ‘‹

Edoardo Vicoli

Written by

1994, Engineer, iOS Developer šŸ‘ØšŸ»ā€šŸ’»

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade