How to create a stretchable TableViewHeader in iOS ??

You might have seen a collapsable or stretchable tableview header in android. If you check the whatsapp profile/ group settings page , you can see this. If you are using Netflix app, you might have seen a zoom in effect in the tableview header as well. Well, if you ever wondered how to do this in iOS, I will give a simple solution.

stretchable TableViewHeader

Note: I have mentioned TableViewHeader above. But I am not actually using TableViewHeader for this article.

For understanding what I am doing here , you should be familiar with UIScrollView and its delegate methods. You also need to know about UIScrollView contentInset property.

So, What’s the UIScrollView contentInset property ?

Refer apple docs for more info: Link

It sets the distance of the inset between the content view and the enclosing scroll view.

Usage: To see a place where this is actually used, look at the build-in Photos app on the iphone. The Navigation bar and status bar are transparent, and the contents of the scroll view are visible underneath. That’s because the scroll view’s frame extends out that far. But if it wasn’t for the content inset, you would never be able to have the top of the content clear that transparent navigation bar when you go all the way to the top.

Image from appledocs

Now we can create a stretchable TableViewHeader

Create a tableview with the basic datasource and delegate methods which are required to simply load the table with some data.

Set the tableview’s contentInset property:

tableView.contentInset = UIEdgeInsetsMake(300, 0, 0, 0)

Here, I set the top value as 300 which is a calculated number which I will set as the initial normal height for the header imageview. Now, that we set the contentInset , the tableview’s frame will start at (0,0) and the first cell will start at (0,300).

Now, create an imageview with height 300 and add it to the current View above the tableview.

imageView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 300)
imageView.image = UIImage.init(named: “poster”)
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true

Then, add the following code in the scrollview delegate method scrollViewDidScroll which gets called every time the tableview is scrolled.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = 300 — (scrollView.contentOffset.y + 300)
let height = min(max(y, 60), 400)
imageView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: height)

Compile and run the code. Full source code is available in github.

Thats it.!!


If you enjoyed reading this post, please share and give some clapps so others can find it 👏👏👏👏👏 !!!!

You can follow me on Medium for fresh articles. Also, connect with me on LinkedIn. Also follow my facebook page on swift: iosswiftblogger.

If you have any comment, question, or recommendation, feel free to post them in the comment section below!

Like what you read? Give Abhimuralidharan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.