Nuevo mapa de detalle de la sede foursquare

Question

Me encanta la forma en que la vista de un lugar diseñado foursquare. Especialmente el mapa con la ubicación del lugar en el "encabezado" de la vista ... ¿Cómo se hizo? Los detalles son obviamente algunos uiscrollview (tal vez uitableview?) Y detrás de ellos (en el encabezado) hay un mapa así que cuando se desplaza hacia arriba el mapa se muestra mientras la vista de desplazamiento rebota ... ¿alguien tiene una idea de cómo hacer esto?

Answer 1

Aquí es como me las arreglo para reproducirlo: -

Se necesita una UIViewController con un UIScrollView como su punto de vista. A continuación, el contenido de la UIView que añadir a su ScrollView debería tener este aspecto: -

- El marco de la MKMapView tienen una posición negativa y. En este caso, solo podemos ver 100 puntos de los mapas en el estado predeterminado (antes de arrastrar).
- Debe deshabilitar el acercamiento y el desplazamiento en su instancia de MKMapView.

Luego, el truco es bajar al centerCoordinate del MKMapView cuando arrastra hacia abajo, y ajustar su posición central.

Para ello, se calcula la cantidad de 1 punto representa como una latitud delta para que sepamos cuánto coordinar el centro del mapa debe ser movido al ser arrastrado de los puntos x en la pantalla: -

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

Una vez que esas propiedades se inicializan, debemos implementar el comportamiento del UIScrollViewDelegate. Cuando arrastramos, convertimos el movimiento expresado en puntos a una latitud. Y luego, movemos el centro del mapa usando la mitad de este valor.

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

se obtiene el mismo comportamiento que la aplicación Foursquare (pero mejor: en la aplicación en cuadro, el recenter mapas tiende a saltar, aquí, cambiando el centro se hace sin problemas).

Answer 2

El ejemplo anterior es agradable. Si necesita más ayuda, creo que están usando algo muy similar a RBParallaxTableViewController. https://github.com/Rheeseyb/RBParallaxTableViewController

Es esencialmente el mismo efecto que utiliza Path para su foto de encabezado.

Answer 3

La respuesta de Yonel es agradable, pero encontré un problema ya que tengo un pin en el centro del mapa. Debido a que el Y negativo, el punto está oculto bajo mi UINavigationBar.

Luego, no configuré la Y negativa y corrijo mi mapView.frame de acuerdo con el desplazamiento de desplazamiento.

Mi MAPview es de 320 x 160

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

Espero que esto ayude a alguien.