iOS: Stretching / Resizing UITableView Header As The User Drags Down? iOS: Stretching / Resizing UITableView Header As The User Drags Down? ios ios

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:

  1. Create a View Controller in storyboard.
  2. Add a Table View and set the constraints to 0 from all sides.
  3. 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.
  4. Add constraints to the top left and right.
  5. In the view controller viewDidLoad add the following: tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0) where 200 is the height of the View. This will push the contents of the table view downwards.
  6. 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