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:

Foursquare Example

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

Default Header

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?

try this: http://stackoverflow.com/questions/10979323/new-foursquare-venue-detail-map — Piotr Tomasik, Nov 21 '12 at 08:54

score 6 · Answer 1 · edited Jan 26 '13 at 13:53

6

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
}

edited Jan 26 '13 at 13:53

Shmidt

16,436
18
88
136

answered Nov 12 '12 at 00:51

iDev

23,310
7
60
85

Thanks. This seems to be the right way. However I have issues to get resizing work correctly. I've tried to to it with "CGRect frame = worldmap.frame; frame.size.height -= scrollView.contentOffset.y; worldmap.frame = frame;" But it doesn't quite work right. – Bernd Nov 12 '12 at 18:05
@BerndPlontsch, What is the problem you are facing with that? – iDev Nov 12 '12 at 18:45
The frame size doesn't match (a problem with the assigned value?) and the redrawing performance is quite slow on my Phone5 and in the Simulator. – Bernd Nov 12 '12 at 18:49

score 1 · Answer 2 · edited Jan 28 '13 at 09:35

1

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.

edited Jan 28 '13 at 09:35

petert

6,672
3
38
46

answered Nov 03 '12 at 11:29

Fry

6,235
8
54
93

How to implement this change? When I stretch the map view in Interface Builder then the map view gets bigger but the area in the bounce area stays unchanged. – Bernd Nov 03 '12 at 19:43
I never use Interface Builder... You should change the map frame in `didScroll` method, using scrollView contentOffset. Interface Builder is evil ! You'll lost the control of your app whit it. – Fry Nov 13 '12 at 13:37
Please see my current edit. I am using the didScroll method now and try to resize the map but unfortunately it doesn't quite work out yet. – Bernd Nov 13 '12 at 17:51
Have you change the header view of table ? – Fry Nov 16 '12 at 09:19
Hm. I can resize the height now with the value from the scrollView.contentOffset.y parameter from scrollViewDidScroll delegate. The problem is that the origin of the tableHeaderView stays were it is. So I need to move its frame to a negative value. This doesn't seem to work [[[self tableView] tableHeaderView] setFrame:CGRectMake(0, scrollView.contentOffset.y, worldmap.frame.size.width, 150-scrollView.contentOffset.y)] ; //150 is the original height as a fixed value. – Bernd Nov 16 '12 at 19:50
I tried the same with negative frame positioning values for the maps frame. That does't work neither: [worldmap setFrame:CGRectMake(0, scrollView.contentOffset.y, worldmap.frame.size.width, 150-scrollView.contentOffset.y)]; – Bernd Nov 16 '12 at 20:04

score 0 · Answer 3 · answered Oct 10 '13 at 03:56

0

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

answered Oct 10 '13 at 03:56

Daniel Bowden

988
1
10
23

score 0 · Answer 4 · answered Jun 26 '15 at 18:59

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

Expand UITableView Header View to Bounce Area When Pulling Down

4 Answers4

Linked