新四方场地细节图 [英] 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:-

您需要一个带有 UIScrollView 作为其视图的 UIViewController.然后，您添加到滚动视图的 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 位置.在这种情况下，我们只能看到默认状态下(拖动前)的 100pts 地图.
- 您需要在 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.

为此，我们计算 1point 表示多少纬度，以便我们知道在屏幕上拖动 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;
}

一旦这些属性被初始化，我们需要实现 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).

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