Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

An experimental re-creation/clone of an iOS stretchy header design.

Resources

Releases

No releases published

Packages

No packages published

Languages