Nuova mappa dettagli foursquare

Question

Mi piace molto il modo in cui Foursquare ha progettato la vista dei dettagli della sede. Soprattutto la mappa con la posizione della sede nella "testata" di vista ... Come è stato fatto? I dettagli sono ovviamente un po 'di visione utente (forse uitableview?) E dietro di esso (nell'intestazione) c'è una mappa, quindi quando si scorre la mappa viene scoperto mentre la vista di scorrimento rimbalza ... qualcuno ha un'idea di come farlo?

Answer 1

Ecco il modo in cui riesco a riprodurla: -

Avete bisogno di una UIViewController con un UIScrollView come suo punto di vista. Poi, il contenuto del UIView si aggiunge al tuo ScrollView dovrebbe essere simile a questo: -

- La cornice del del MKMapView avere un effetto negativo y posizione. In questo caso, possiamo vedere solo 100 punti delle mappe nello stato predefinito (prima del trascinamento).
- È necessario disabilitare lo zoom e lo scorrimento sull'istanza di MKMapView.

Quindi, il trucco è quello di spostare verso il basso il centerCoordinate del MKMapView quando si trascina verso il basso e regolare la sua posizione centrale.

Per questo, calcoliamo la quantità di 1 punto rappresentano come latitudine delta in modo che sappiamo quanto la coordinata centro della mappa dovrebbe essere spostato quando viene trascinato di punti x sullo schermo: -

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

Dopo aver inizializzato tali proprietà, è necessario implementare il comportamento di UIScrollViewDelegate. Quando trasciniamo, convertiamo la mossa espressa in punti in una latitudine. E poi, spostiamo il centro della mappa usando la metà di questo valore.

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

si ottiene lo stesso comportamento come l'applicazione Foursquare (ma meglio: in app Foursquare, il recenter mappe tende a saltare, qui, cambiando il centro è fatto senza problemi).

Answer 2

L'esempio di cui sopra è bello. Se hai bisogno di ulteriore aiuto, penso che stiano usando qualcosa di molto simile a RBParallaxTableViewController. https://github.com/Rheeseyb/RBParallaxTableViewController

È essenzialmente lo stesso effetto che Path utilizza per la sua foto di intestazione.

Answer 3

La risposta di Yonel è buona, ma ho trovato un problema perché ho uno spillo al centro della mappa. Poiché la Y negativa, il punto è nascosto sotto la mia UINavigationBar.

Quindi, non ho impostato il negativo Y, e correggo il mio mapView.frame in base allo scroll scroll.

mio MapView è di 320 x 160

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

Spero che questo aiuti qualcuno.