新的foursquare会场详细地图

Question

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

Answer 1

这是我设法重现它的方式: -

你需要一个UIViewController带有UIScrollView视图的视图.然后,UIView您添加到滚动视图的内容应如下所示: -

-所述的框架的MKMapView具有负的y位置.在这种情况下,我们只能看到默认状态下的100个地图(在拖动之前).
- 您需要在MKMapView实例上禁用缩放和滚动.

然后,关键是要向下移动centerCoordinate的MKMapView,当你向下拖动,并调整其中心位置.

为此,我们计算1点表示为delta纬度的数量,以便我们知道在屏幕上拖动x点时应该移动地图的中心坐标: -

- (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.当我们拖动时,我们将以点表示的移动转换为纬度.然后,我们使用此值的一半来移动地图的中心.

- (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应用程序中,地图重新定位往往会跳跃,在这里,更改中心顺利完成).