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