Expand UITableView Header View to Bounce Area When

问题:

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 Foursquare, see example:

My current default header implementation (grey bounce area when dragging down)

How do I make the map view in the header adapt to the available header space on top when dragging the table down?

I am using the UIScrollView delegate as mentioned in the comments and then resize the map view frame as it follows.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect frame = worldmap.frame;
    frame.size.height -= scrollView.contentOffset.y;
    worldmap.frame = frame;  
} 

... but it's not quite reacting correctly and performs poorly. How do I set the new size of the map frame correctly?

回答1:

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
}

回答2:

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.

回答3:

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

回答4:

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;
    }
}