Compatibile con Xcode 8

Tutorial modificare e Trascinare un MKPointAnnotation in Swift

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Nel precedente tutorial MapKit tutorial in Swift, location reminder con il PointAnnotation (propedeutico per seguire questo) ti ho introdotto gli elementi principali per inserire, all’interno di un’applicazione, una mappa o Map View e dei punti d’interesse utilizzando il framework MapKit e il Modificare e Trascinare un MKPointAnnotation in SwiftCoreLocation.

Fino ad ora, con quanto appreso dallo scorso tutorial, dovresti essere in grado di tracciare gli spostamenti dell’utente e quindi la tua posizione. In più al classico puntino blu che ti mostra la tua posizione nella mappa, hai visto come posizionare un Point Annotation nella Map View nel punto in cui l’utente era posizionato.

In questo tutorial voglio spingermi oltre e aggiungerai, al progetto precedente, la possibilità di:

  • personalizzare un MKPointAnnotation in Swift.
  • spostare e riposizionare un Point Annotation in Swift.

In particolare aggiungerai, al posto del classico “pallino”, un’immagine a piacere e la possibilità di riposizionare un Point Annotation semplicemente trascinandolo in un altro punto della mappa.

In questo tutorial sto utilizzando la versione di Xcode 7.2 (le successive funzionano lo stesso) e il linguaggio di programmazione Swift. Il progetto che sto creando è una modifica di un altro progetto che puoi scaricare, o creare seguendo, questo indirizzo: MapKit tutorial in Swift, location reminder con il PointAnnotation.

Sei pronto? Allora cominciamo!

Creare un Point Annotation personalizzato

Per personalizzare un Point Annotation utilizzerai un metodo implementato grazie al protocol MKViewDelegate. Questo metodo, che prende il nome di viewForAnnotation, viene attivato ogni volta in cui viene fatta una richiesta di creazione di un’AnnotationView.

l’MKAnnotationView è l’oggetto responsabile alla gestione del punto d’annotazione sulla mappa. Contiene le informazioni sulla posizione del punto, cioè l’MKPointAnnotation e le proprietà per la modifica dell’aspetto.

Nel tuo ViewController.swift, aggiungi la seguente funzione:

La rimane in attesa fin quando non viene richiesta la generazione di un Annotation View.

Lo ripeto in caso ti fosse sfuggito. L’Annotation View è l’involucro che contiene il Point Annotation (l’oggetto che contiene le informazioni di posizione. Per questo motivo è necessario modificarne la struttura per evitare che l’Annotation View si comporti da standard annotation point (il punto che hai utilizzato nel precedente tutorial).

Il metodo, infatti, inizia controllando che la generazione dell’annotazione non corrisponda con le posizione dell’utente (MKUserLocation). Se l’annotation da aggiungere non è già quello utilizzato per rappresentare la posizione dell’utente allora passa avanti, altrimenti restituisce nil che, come ho appena detto, farà generare il classico punto blu che rappresenta la posizione utente.

Con la dequeueReusableAnnotationViewWithIdentifier sei in grado di prendere una ViewAnnotation che momentaneamente non viene mostrata nella mappa (perché si trova fuori dalla porzione vista) e riutilizzarla con le nuove caratteristiche.

Questa operazione, che è simile al sistemo utilizzato per le celle delle Table View, permette di risparmiare un sacco di memoria, in quanto non vengono creati tutti i point annotation bensì solo quelli della porzione di mappa visualizzata.

Se non esiste nessuna AnnotationView (if pinView == nil) si passa a crearne una nuova.

La MKAnnotationView è un tipo di Annotazione generica e totalmente customizzabile (a differenza della MKPinAnnotationView che rappresenta il classico pin con il pallino fin ora utilizzato). Grazie alla MKAnnotationView, sei in grado di cambiare l’immagine utilizzata per rappresentare il punto sulla mappa. Nel codice utilizziamo l’immagine chiamata “pin.png” che sostituisce la classica rappresentazione del PointAnnotation (sotto vedrai come aggiungere l’immagine al progetto) .

Con la canShowCallout attivi la visualizzazione delle informazioni del PointAnnotation, infatti se cliccherai sul PointAnnotation, nella mappa, verrà aperta la finestrella con nome e descrizione.

L’immagine dell’AnnotationView

Ho creato un’immagine, che sostituirà quella del Point Annotation classico, che puoi scaricare da qui: ping.png. Una volta scaricata, trascinala dentro il tuo Project Navigator, assicurati di selezionare Copy items if needed e premi su Finish.

portare un immagine su Xcode 6.1

tecnicamente dovresti creare un xcasset con le 3 risoluzione dell’immagine per poter essere ben visualizzata in tutti i tipi di dispositivi.

Visualizzare l’AnnotationView

Fai un Build & Run dell’applicazione e prova ad inserire un nuovo Point Annotation.

Quando cliccherai su Salva verrà generato un PointAnnotation con nome e descrizione uguale a quelle inserite nei due TextField e in più, dato che verrà chiamato il metodo ViewForAnnotation, il PointAnnotation verrà personalizzato con le caratteristiche da te desiderate:

editare un PointAnnotation in Swift

Muovere una AnnotationView in Swift con il didChangeDragState

Adesso è arrivato il fatidico momento di sbloccare la possibilità di muovere un l’Annotation View in Swift.

Aggiungi, nel metodo viewForAnnotation e dove hai personalizzato l’Annotation View, il seguente codice:

Impostare la proprietà draggable uguale a true permette all’utente di poter selezionare e spostare un PointAnnotation a suo piacimento.

Inserisci il metodo didChageDragState che si attiverà ogni qual volta un’AnnotationView verrà spostata da un punto ad un altro (La proprietà che ti comunica se il pin si sta muovendo o no, è la draggableStatus). Un metodo utile di debug (per vedere se funziona) è quello di inserire, all’interno del metodo, un print che ti informa quando stai muovendo la annotation view:

Avvia l’applicazione. Per spostare l’AnnotationView devi cliccarlo con il tasto sinistro e poi trascinarlo dove vuoi:spostare un pointAnnotation in Swift

Perché il Point Annotation, quando mi sposto sulla mappa, si muove insieme a me?

Quando hai iniziato a spostare il Point, il suo DragState, è passato al valore Dragging (in movimento). Questa opzione purtroppo non si toglie in automatico quando finisce lo spostamento. Quindi, quando ti muovi per la mappa, continuerà a spostarsi insieme a te.

Per evitare di portarli a spasso e risolvere il problema, quando finisci di spostare l’AnnotationView devi riportare il DragState a None. Edita la funzione didChangeDragState:

MKAnnotationViewDragState è un tipo enum.

Se altre cose come metodi, classi e proprietà ti sono suonate come nuovi, ti consiglio di partire dalle basi con lo studio del linguaggio Swift: visita il corso gratuito sulla programmazione Swift.

Adesso ogni qual volta finirai di muovere il PointAnnotation la funzione didChangeDragState controllerà se il newState è impostato su Ending o Cancelling (che determinano la fine del movimento del point Annotation) e setterà il DragState su None grazie alla funzione setDragState.

Provare per credere:

spostare un pointAnnotation correttamente in Swift

Considerazioni e Download del progetto

Adesso hai uno strumento in più per personalizzare la MapView. Anche se spostare nella posizione corretta un PointAnnotation rende il tutto più user friendly ancora al progetto mancano molte funzioni tra le quali, la cancellazione di un PointAnnotation, il salvataggio su Database e una View dove mostrare i dettagli di ogni Point Annotation.

Dove andare da qui

Ecco alcuni tutorial che ti consiglio di guardare dopo aver concluso con questo:

Download del progetto

Se hai avuto problemi con il progetto, qui sotto, puoi scaricare quello fatto da me e confrontarlo con il tuo:

[sociallocker] [wpdm_package id=’1137′] [/sociallocker]

Buona Programmazione!

 

Start typing and press Enter to search

Mappe con il linguaggio SwiftCore Data in Swift