問題描述

我真的很喜歡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).

這篇關于新四方場地細節圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！