Compatibile con Xcode 8

Pinch e Tap to Zoom in Swift. Come zoommare una immagine

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Hai una galleria d’immagini e hai bisogno di zoommare le tue immagini?

Niente paura! A differenza di quello che si può pensare eseguire lo zoom di un’immagine con il linguaggio Swift è un vero e proprio gioco da ragazzi.

Il processo è reso così semplice grazie ad un piccolo aiuto fornito da un oggetto speciale chiamata Scroll View (un contenitore di view che può essere scrollato e zoommato). All’interno della Scroll View, che è l’effettivo burattinaio dello zoom, verrà inserita un’image view la quale conterrà l’immagine dal zoommare.

Più facile a farsi che a dirsi! Vediamo subito come implementare il Pinch e Tap to Zoom in Swift.

Scroll View e Image View

Apri Xcode e crea un nuovo progetto. Seleziona “Single View Application”, poi assegna un titolo a piacere ed imposta il linguaggio Swift. Dallo storyboard aggiungi una Scroll View, allargala a tutto schermo ed aggiungi le constraints necessarie. Successivamente, trascina una Image View dentro la Scroll View appena creata.

Ti starai chiedendo: “perché mai dovrei aggiungere una immagine in una Scroll View?!” Perché è il modo più semplice per gestire lo zoom di un’immagine. Anche qui aggiungi le solite 4 constraints ai margini, più altre 2 per centrare il contenuto dell’immagine.

Aggiunta della Scroll View e della Image View Fatto ciò, imposta l’immagine dell’Image View con una di tuo gradimento, io ho usato il logo di xCoding. Cambia l’attributo “Mode” su “Aspect Fit” per evitare che l’immagine venga rappresentata nel modo sbagliato.

Per aggiungere un’immagine al progetto, apri la cartella Assets.xcassets dal Project Navigator, seleziona il file desiderato dal Finder e trascinalo su Xcode (sotto “AppIcon”) per creare un nuovo asset di immagini.

aggiunta-immagine

Successivamente modifica l’attributo “Image” della Image View con il nome dell’immagine appena aggiunta.

Hai quasi completato la Storyboard! Crea un IBOutlet per entrambi gli elementi (io li ho chiamati “image” e “scroll”) ed imposta il delegate della Scroll View trascinandola sul quadratino giallo del View Controller.

Creazione del delegate

Il Pinch to Zoom

Bene, hai finito con l’interfaccia grafica! È arrivato il momento di passare al codice.

Per prima cosa aggiungi il protocollo UIScrollViewDelegate alla tua classe. Questo protocollo ti permetterà di aggiungere i metodi per rendere la tua immagine “zoommabile”:

Successivamente, nel metodo viewDidLoad, aggiungi le seguenti proprietà alla tua Scroll View:

Come sicuramente avrai intuito, i parametri minimumZoomScale e maximumZoomScale regolano rispettivamente le dimensioni minime e massime che l’immagine può assumere durante lo zoom (in realtà non dipendono dall’immagine che inserirai, bensì qualsiasi elemento che inserirai all’interno della tua ScrollView è influenzato da questi valori). Un valore di 1.0 sta a significare nessun cambiamento di scala, mentre un valore di 3.0 significa che il contenuto potrà essere ingradito fino a tre volte la dimensione attuale.

Ovviamente puoi impostare i valori che preferisci, in base alle tue esigenze e soprattutto in base alle dimensioni dell’immagine. Più è alta la risoluzione, più potrai zoommare senza creare sgranature.

Infine, dato che hai impostato il View Controller come delegate della Scroll View (cioè sarà il View Controller a gestire i metodi della Scroll View), aggiungi il metodo viewForZoomingInScrollView. Questo metodo, presente nel protocollo UIScrollViewDelegate, viene richiamato ogniqualvolta l’utente esegue uno zoom con le dita sulla Scoll View. Il metodo viewForZooming(in scrollView: UIScrollView) restituisce una UIView, nel nostro caso restituiremo la Image View zoommata:

Bene, è arrivato il momento di compilare ed eseguire il progetto della tua App! Se sei utilizzando il simulatore, premi alt + click per simulare la gesture del pinch to zoom.

Pinch to Zoom, parte 1

 

Implementazione del Tap to Zoom

Adesso è arrivato il momento di andare un po’ oltre e di vedere come zoommare l’immagine eseguendo un doppio Tap su un punto dello schermo. Per sbloccare tale funzionalità hai bisogno di un GestureRecognizer, cioè un particolare oggetto che riesce ad intercettare gli eventi di tocco e altri sullo schermo. Mi prenderò la briga di dare il loro utilizzo per scontato, se vuoi ampliare queste conoscenze a riguardo, nel corso di sviluppo app iOS di Giuseppe Sapienza c’è un’intera lezione a riguardo.

Procediamo! Inserisci il seguente codice nel metodo viewDidLoad:

Analizziamo il codice appena inserito (I numeri si riferiscono al commento che trovi nel codice qui sopra):

  1. Crea una costante per la gestione del UITapGestureRecognizer. Il recognizer utilizza come funzione di riferimento il selettore ViewController.zoom (attenzione, il nome del mio ViewController potrebbe non essere uguale al tuo), il quale avrà un parametro che come tipo di dato sarà un UITapGestureRecognizer, cioè l’oggetto che ha invocato il metodo.
  2. Cambia il numero di tap richiesti per attivare il recognizer e di conseguenza il metodo zoom.
  3. Aggiungi la gestureRecognizer, contenuta nella costante “tap”, alla Scroll View.

D’ora in poi, quando premerai velocemente due volte sulla Scroll View verrà richiamata la funzione zoom, che non hai ancora creato. Subito dopo il viewDidLoad, aggiungi il metodo zoom(sender: UITapGestureRecognizer) cioè la funzione che verrà richiamata quando l’utente premerà due volte velocemente sulla scroll view:

Analizziamo nuovamente il codice:

  1. Controlla il valore di zoom attuale. Nel caso in cui l’immagine non sia ancora stata zoommata del 150% rispetto all’originale, attiva il codice dentro l’if.
  2. Nel caso in cui la condizione sopra riportata sia vera, il metodo setZoomScale, zoomma l’immagine del valore massimo impostato alla tua scrollView (ad inizio tutorial hai messo 3 come maximumZoomScale).
  3. Se l’immagine è stata già zoommata, cioè l’if è a condizione false, viene attivato l’else che riporta la scroll al suo valore di minimumZoomScale.

Conclusioni

Nel codice che ti ho lasciato, avrai notato che a differenza delle Image View presenti su iOS, la tua funzione di zoom su doppio Tap non zoomma nel punto in cui hai cliccato, bensì sempre al centro. Per ovviare a questo problema, dà un’occhiata al codice nel progetto completo che trovi qui sotto.

Hai ufficialmente finito questo tutorial! Se qualcosa non dovesse esserti chiara, fammelo sapere nei commenti oppure crea una domanda nella sezione “Chiedi aiuto”.

Di seguito trovi il link per scaricare il mio progetto completo, nel caso in cui ti sia perso qualche passaggio.

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

Buona programmazione!

Changelog

  • 22/03/2017 – Aggiunto il changelog, tutorial aggiornato ad Xcode 8.3 e Swift 3.1.

Start typing and press Enter to search