ios - Nuevo mapa detallado del lugar de foursquare

xcode uiscrollview

Question

Realmente me encanta la forma en que Foursquare diseñó la vista detallada del lugar. 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 (¿quizás uitableview?) Y detrás de él (en el encabezado) hay un mapa, de modo que cuando se desplaza hacia arriba, el mapa se está descubriendo a medida que la vista de scroll rebota ... ¿Alguien tiene una idea de cómo hacerlo?

Answer 1

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 2

Esta es la forma en que me las arreglo para reproducirlo:

Necesita un UIViewController con un UIScrollView como su vista. Luego, el contenido de la vista UIView que agregue a su vista de desplazamiento debería verse así:

- El marco del MKMapView tiene una posición y negativa . En este caso, solo podemos ver 100pts de los mapas en el estado predeterminado (antes de arrastrar).
- Debe desactivar el zoom y el desplazamiento en su instancia de MKMapView.

Luego, el truco consiste en mover hacia abajo la centerCoordinate de MKMapView cuando arrastra hacia abajo y ajustar su posición central.

Para eso, calculamos cuánto representa 1 punto como una latitud delta para saber cuánto se debe mover la coordenada central del mapa cuando se arrastra de x puntos 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 se inicializan esas propiedades, necesitamos implementar el comportamiento de 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;
    }
}

Obtienes el mismo comportamiento que la aplicación foursquare (pero mejor: en la aplicación foursquare, los mapas más recientes tienden a saltar, aquí, cambiar el centro se hace sin problemas).

Answer 3

La respuesta de Yonel es agradable, pero encontré un problema porque tengo un pin en el centro del mapa. Debido a la Y negativa, el punto está oculto bajo mi barra de UINavigation.

Entonces, no configuré la Y negativa, y corrijo mi mapView.frame según el desplazamiento del desplazamiento.

Mi mapView es 320 x 160

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

Espero que esto ayude a alguien.