新的foursquare会场详细地图 [英] New foursquare venue detail map

问题描述

我非常喜欢foursquare设计场地细节视图的方式。特别是地图位置在标题的视图中......它是如何完成的？细节显然是一些uiscrollview（也许是uitableview？）并且在它后面（在标题中）有一张地图所以当你向上滚动地图时，随着滚动视图反弹而被发现...有没有人知道如何做到这一点？

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?

推荐答案

以下是我设法重现它的方式： -

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

你需要一个 UIViewController ，其视图为 UIScrollView 。然后，您添加到滚动视图的 UIView 的内容应如下所示： -

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

- MKMapView 负 y 位置。在这种情况下，我们只能在默认状态下看到100个地图（在拖动之前）。

- 您需要在MKMapView实例上禁用缩放和滚动。

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

然后，诀窍是向下移动 MKMapView 的 centerCoordinate 向下拖动，并调整其中心位置。

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

为此，我们计算1点表示多少幅度，以便我们知道中心坐标多少在屏幕上拖动x点时应移动地图： -

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

初始化这些属性后，我们需要实现<$的行为C $ C> UIScrollViewDelegate 。当我们拖动时，我们将以点表示的移动转换为纬度。然后，我们使用此值的一半来移动地图的中心。

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

您获得与foursquare应用相同的行为（但是更好：在foursquare应用程序中，地图重新定位往往会跳跃，这里，更改中心顺利完成。）

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

这篇关于新的foursquare会场详细地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！