{"id":11278,"date":"2016-01-22T12:44:32","date_gmt":"2016-01-22T11:44:32","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=11278"},"modified":"2016-06-07T14:54:42","modified_gmt":"2016-06-07T12:54:42","slug":"personalizzare-i-callout-di-mapkit-con-smcalloutview","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/personalizzare-i-callout-di-mapkit-con-smcalloutview\/","title":{"rendered":"Personalizzare i callout di MapKit con SMCalloutView"},"content":{"rendered":"<p>Nello <strong>sviluppo di applicazioni iOS<\/strong> sempre pi\u00f9 spesso ci si trova a dover inserire all&#8217;interno delle proprie app mappe geografiche utili, ad esempio, per\u00a0mostrare eventuali\u00a0punti d&#8217;interesse all&#8217;interno della propria\u00a0app. In genere, per far ci\u00f2,\u00a0si tende ad utilizzare <strong>MapKit<\/strong>, il framework Apple che integra tutte le funzionalit\u00e0 necessarie alla loro\u00a0implementazione, che\u00a0offre\u00a0tutto ci\u00f2 che occorre a garantire un&#8217;ottima esperienza d&#8217;uso, coma la navigazione tramite gesture\u00a0per la\u00a0gestione di pan e zoom e via dicendo.<\/p>\n<p>Tra le varie funzioni offerte c&#8217;\u00e8\u00a0la possibilit\u00e0 di inserire dei POI (definiti come <strong>MKAnnotationPin<\/strong>) che alla pressione mostrano un callout. Le API, per\u00f2, sono piuttosto restrittive sull&#8217;uso di questi oggetti e non permettono la personalizzazione se non in qualche piccolo dettaglio, come gli accessori alla destra e alla sinistra del testo.<\/p>\n<p>In molti casi, per\u00f2, \u00e8 necessario personalizzare il callout senza per\u00f2 snaturare del tutto la sua funzione. In questi casi pu\u00f2 essere utile la classe SMCalloutView che permette di replicare un perfetto callout Apple ma con un contenuto deciso da noi.<\/p>\n<p>Per utilizzarlo sar\u00e0\u00a0sufficiente scaricare dalla\u00a0<a href=\"https:\/\/github.com\/nfarina\/calloutview\" target=\"_blank\">repo ufficiale<\/a>\u00a0su github i file <em>SMCalloutView.m<\/em> e <em>SMCalloutView.h<\/em> ed inserirli nel nostro progetto. A questo punto si deve istanziare un oggetto\u00a0SMCalloutView con il metodo <em>+platformCalloutView<\/em>. Fatto questo si dovr\u00e0\u00a0implementare il metodo del delegate di MKMapView\u00a0<em>&#8211; <span class=\"pl-en\">mapView<\/span><span class=\"pl-en\">:<\/span><span class=\"pl-en\">didSelectAnnotationView<\/span><\/em><span class=\"pl-en\"><em>:<\/em> per mostrare questo callout invece di quello standard Apple:<\/span><\/p>\n<pre class=\"lang:objc decode:true \">- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)annotationView {\r\n\/\/ Settaggi di base per il callout\r\nself.calloutView.title = annotationView.annotation.title;\r\nself.calloutView.subtitle = annotationView.annotation.subtitle;\r\n\/\/ Ereditare l'offeset da MKAnnotationView\r\nself.calloutView.calloutOffset = annotationView.calloutOffset;\r\n\/\/ E infine mostrare il callout\r\n[self.calloutView presentCalloutFromRect:annotationView.bounds inView:annotationView constrainedToView:self.view animated:YES];\r\n}<\/pre>\n<p>e ricordarsi di nascondere al momento giusto il callout:<\/p>\n<pre class=\"lang:objc decode:true \">- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view {\r\n[self.calloutView dismissCalloutAnimated:YES];\r\n}<\/pre>\n<p>Questo controllo a differenza di quello ufficiale Apple permette un&#8217;ampia personalizzazione consentendo di impostare il contenuto della view con un oggetto UIView qualsiasi semplicemente settando la propriet\u00e0 <strong>contentView<\/strong>.<\/p>\n<p><strong>Nota:<\/strong> nel caso in cui si volesse utilizzare alcune gesture o il semplice tap sull&#8217;oggetto, sar\u00e0 necessario implementare una classe custom di MKMapKit che effettui il forward delle gesture e dei tocchi. Trovate un semplice esempio nell&#8217;ultima parte di <a href=\"https:\/\/github.com\/nfarina\/calloutview\/blob\/master\/SampleProject\/MapKitComparisonController.m\" target=\"_blank\">questa classe<\/a>\u00a0fornita nel progetto di esempio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nello sviluppo di applicazioni iOS sempre pi\u00f9 spesso ci si trova a dover inserire all&#8217;interno delle proprie&#8230;<\/p>\n","protected":false},"author":557,"featured_media":11657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[30,481,105],"tags":[191,1593,1591,1592],"class_list":["post-11278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-materiale-open-source","category-risorse-utili","category-tips-tricks","tag-mapkit","tag-mapview-ios","tag-personalizzare-callout-ios","tag-personalizzare-info-windows-ios"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/557"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=11278"}],"version-history":[{"count":5,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11278\/revisions"}],"predecessor-version":[{"id":12103,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11278\/revisions\/12103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/11657"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=11278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=11278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=11278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}