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 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?

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

Answer 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.