ios - 新四方场地细节图

Question

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

Answer 1

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

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

- 框架的位置为MKMapView负y。在这种情况下，我们只能看到默认状态下（拖动前）的 100pts 地图。
- 您需要在 MKMapView 实例上禁用缩放和滚动。

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

为此，我们计算 1point 表示为 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 应用程序中，地图居中趋于跳跃，在这里，更改中心很顺利）。

Answer 2

上面的例子很好。如果您需要更多帮助，我认为他们正在使用与 RBParallaxTableViewController 非常相似的东西。https://github.com/Rheeseyb/RBParallaxTableViewController

这与 Path 用于其标题照片的效果基本相同。

Answer 3

Yonel 的回答很好，但我发现了一个问题，因为我在地图的中心有一个大头针。因为负Y，所以点隐藏在我的UINavigationBar下。

然后，我没有设置负 Y，我根据滚动偏移量更正了我的 mapView.frame。

我的地图视图是 320 x 160

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

希望这可以帮助某人。