Skip to content
An experimental re-creation/clone of an iOS stretchy header design.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Stretchy Headers

Add a Table Header

Grab the header background image, for example Mt. Ngauruhoe from Unsplash, add it to the asset library.

Add a table header with a hight of 300 and an image that fills the space while maintaining its aspect ratio.


Add a Header property

Since the table view manages its header's size and position, we'll need to create and manage our own view.

The following enables us to design our header in the storyboard, and maintain a reference so that we can manage its size and position.

headerView = tableView.tableHeaderView
tableView.tableHeaderView = nil

The header and content will overlap at this point as the table is no longer managing things.

Push the table down

tableView.contentInset = UIEdgeInsets(top: 300, left: 0, bottom: 0, right: 0)
tableView.contentOffset = CGPoint(x: 0, y: -300)

Pull the header up

headerView.frame = CGRect(x: 0, y: -300, width: tableView.bounds.width, height: 300)


Add scroll listener

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
	var rect = CGRect(x: 0, y: -headerHeight, width: tableView.bounds.width, height: headerHeight)
	if (tableView.contentOffset.y < -headerHeight) {
		rect.origin.y = tableView.contentOffset.y
		rect.size.height = -tableView.contentOffset.y
	headerView.frame = rect;


You can’t perform that action at this time.