Expand UITableView Header View to Bounce Area When Pulling Down

Question

I have implemented a MKMapView in the header area and I\'d like to expand it fully to the top even when you drag down the table into the bounce area - Similar to Fours

Answer 1

I put the content of the header view inside another view which I constrain to each side of the header view. Then using an IBOutlet to the top constraint I just set it to the contentOffset.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (_tableView.contentOffset.y < 0) {
        _mapTopConstraint.constant = _tableView.contentOffset.y;
    }
}

Answer 2

Implement the scrollview delegate for table view. Since it is a subclass of scrollview you can use the scrollview delegates. Implement scrollViewDidScroll delegate and whenever it scrolls down, change the frame of headerview and make sure the pin always comes in the center of the screen.

Include UIScrollViewDelegate in .h file and implement,

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  //set the frame of MKMapView based on scrollView.contentOffset and make sure the pin is at center of the map view
}

Answer 3

Make your headerView frame very long, then center the map in a region that allows you to view the interesting area in bottom of the map.

Edit: I've notice that the pin in the Foursquare example stays in center of the map. This means that you probably should use UIScrollViewDelegate to use didScroll method and change the frame of the map dynamically during the scroll. You should also center the map in the pin's region while scrolling.

Answer 4

Old question but I've implemented this in a project.

TableView header is a MapView and as an added bonus the map can also be moved and zoomed.

https://github.com/danielbowden/DBParallaxMapTableView