Creating simple table view header animated with collapse

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:

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

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:

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:

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:

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.

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 š
