New foursquare venue detail map

Question

I really love the way foursquare designed venue detail view. Especially the map with venue location in the "header" of view ... How was it done? Details are obviously some uiscrollview (maybe uitableview?) and behind it (in the header) there is a map so when you scroll up the map is beeing uncovered as the scroll view bounces... does anyone has an idea how to do this?

Answer 1

Here's the way I manage to reproduce it:-

You need a UIViewController with a UIScrollView as its view. Then, the content of the UIView you add to your scrollview should look like this :-

- The frame of the MKMapView have a negative y position. In this case, we can only see 100pts of the maps in the default state (before dragging).
- You need to disable zooming and scrolling on your MKMapView instance.

Then, the trick is to move down the centerCoordinate of the MKMapView when you drag down, and adjust its center position.

For that, we compute how much 1point represent as a delta latitude so that we know how much the center coordinate of the map should be moved when being dragged of x points on the screen :-

- (void)viewDidLoad {
    [super viewDidLoad];
    UIScrollView* scrollView = (UIScrollView*)self.view;
    [scrollView addSubview:contentView];
    scrollView.contentSize = contentView.frame.size;
    scrollView.delegate = self;
    center = CLLocationCoordinate2DMake(43.6010, 7.0774);
    mapView.region = MKCoordinateRegionMakeWithDistance(center, 1000, 1000);
    mapView.centerCoordinate = center;
    //We compute how much latitude represent 1point.
    //so that we know how much the center coordinate of the map should be moved 
    //when being dragged.
    CLLocationCoordinate2D referencePosition = [mapView convertPoint:CGPointMake(0, 0) toCoordinateFromView:mapView];
    CLLocationCoordinate2D referencePosition2 = [mapView convertPoint:CGPointMake(0, 100) toCoordinateFromView:mapView];
    deltaLatFor1px = (referencePosition2.latitude - referencePosition.latitude)/100;
}

Once those properties are initialized, we need to implement the behavior of the UIScrollViewDelegate. When we drag, we convert the move expressed in points to a latitude. And then, we move the center of the map using the half of this value.

- (void)scrollViewDidScroll:(UIScrollView *)theScrollView {
    CGFloat y = theScrollView.contentOffset.y;
    // did we drag ?
    if (y<0) {
        //we moved y pixels down, how much latitude is that ?
        double deltaLat = y*deltaLatFor1px;
        //Move the center coordinate accordingly 
        CLLocationCoordinate2D newCenter = CLLocationCoordinate2DMake(center.latitude-deltaLat/2, center.longitude);
        mapView.centerCoordinate = newCenter;
    }
}

You get the same behavior as the foursquare app (but better: in the foursquare app, the maps recenter tends to jump, here, changing the center is done smoothly).

Answer 2

The example above is nice. If you need more help, I think they're using something very similar to RBParallaxTableViewController. https://github.com/Rheeseyb/RBParallaxTableViewController

It's essentially the same effect that Path uses for its header photo.

Answer 3

Yonel's answer is nice, but I found a problem as I have a pin at the center of the map. Because the negative Y, the point is hidden under my UINavigationBar.

Then, I didn't set the Negative Y, and I correct my mapView.frame according the scroll offset.

My mapView is 320 x 160

_mapView.frame = CGRectMake(0, 160, 320, -160+y);

Hope this helps someone.