iOS: Stretching / Resizing UITableView Header As The User Drags Down?
I recently posted a blog post about accomplishing this using constraints which might help, turns out it was quite straight forward.
Here is the link: Creating parallax effect on UIScrollView using constraints
First of all you should remove the UIImageView
from the header and add it as a simple UIImageView
on top of the UITableView
then since UITableViewDelegate
protocol conforms to UIScrollViewDelegate
protocol you can implement the scrollViewDidScroll:
method to check when the tableView
is scrolling down and has a bouncing
effect. something like this:
-(void)someInitMethod { initialFrame = yourHeaderView.frame;}-(void)scrollViewDidScroll:(UIScrollView*)scrollView { if(scrollView.contentOffset.y < 0) { initialFrame.size.height -= scrollView.contentOffset.y; yourHeaderView.frame = initialFrame; }}
Also make sure you set the proper contentMode
for your UIImageView
. Also I think this implementation will create a bouncing effect but I'm not sure because I can't test it right now but I think this is a good start point for you.
This is how I achieved it, in my case I was using a map view up the top:
- Create a View Controller in storyboard.
- Add a Table View and set the constraints to 0 from all sides.
- Add a Map View (or whatever view) below the Table View so that it will get rendered over the top. It will look like it is overlapping.
- Add constraints to the top left and right.
- In the view controller
viewDidLoad
add the following:tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0)
where200
is the height of the View. This will push the contents of the table view downwards. In the view controller add the following code, which resizes the view based on the scrolling:
func scrollViewDidScroll(scrollView: UIScrollView) { var scrollOffset = scrollView.contentOffset.y var headerFrame = mapView.frame if (scrollOffset < 0) { // Adjust map headerFrame = CGRect(x: mapView.frame.origin.x, y: mapView.frame.origin.y, width: mapView.frame.size.width, height: -scrollOffset) } else { // Adjust map headerFrame = CGRect(x: mapView.frame.origin.x, y: mapView.frame.origin.y, width: mapView.frame.size.width, height: 0) } mapView.frame = headerFrame}
If I could set contentInset
from the storyboard it would be even more pretty