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

README.md

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.

946d934

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
tableView.addSubview(headerView)

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)

5baecf1

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;
}

7879d3e

You can’t perform that action at this time.