Compatibile con Xcode 8

Come creare una applicazione di Foto Editing per iOS con Swift

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Ammettiamolo, molti mostri si tramutano in principi e principesse grazie all’applicazione di un filtro fotografico o grazie ad un tocco di foto editing. Spesso i filtri riescono a dare quel tocco in più di dinamismo e vitalità ad una foto che altrimenti, nell’era del “bello visivo” passerebbe inosservata.

Tantissime sono le applicazioni che hanno fatto del Foto Editing il loro cavallo di battaglia. Pensa, per esempio, ad Enlight o allo stesso Istagram. Tant’è che anche la stessa Apple, già da diverse versioni di iOS, permette la modifica delle foto e l’aggiunta di filtri fotografici ad un’immagine.

Le immagini sono lo strumento comunicativo del nostre tempo. Più in là saranno sicuramente i video a far da padrone alla comunicazione, ma sino ad allora, se vuoi salire in groppa al cavallo del vincitore e stai provando a creare una applicazione di Foto Editing per iOS con il linguaggio Swift, non puoi non aggiungere i Filtri fotografici alla tua App.

Se lo stai pensando, no, non è assolutamente vero che il Foto Editing è complicato. Anzi, per certi aspetti è davvero semplice per via di semplificazioni fornite da pacchetti, meglio conosciuti come Framework, che svolgeranno gran parte del lavoro complicato.

Cominciamo da qualcosa di semplice. Rispondiamo alla prima domanda fondamentale. Cos’è un filtro fotografico?

Un filtro è l’applicazione di uno strato di colore sopra ad una foto. Il colore desiderato verrà fuso insieme agli altri presenti nell’immagine alterandone la percezione naturale.

Dato che esistono tantissimi modi di fare foto editing, in questo tutorial voglio affrontare solo l’applicazione di tre filtri fondamentali: Bianco e Nero, Seppia ed uno Casuale. Quindi, l’obiettivo di questo tutorial sarà insegnarti a creare una semplice applicazione in cui, data una fotografia, potrai applicare uno di questi tre filtri.

Creare una applicazione di foto editing per iOS

Il tutorial prevede una conoscenza discreta del linguaggio Swift, se sei un nuovo sviluppatore, puoi seguire il mio corso gratuito sul linguaggio Swift prima di cominciare questo progetto.

Sei pronto a creare la tua prima app di foto editing? Allora cominciamo!

Il Setting del progetto

Apri Xcode e crea un nuovo progetto Single View per iPhone. Dai un nome al tuo progetto, assicuratevi di aver selezionato il linguaggio Swift come linguaggio e premi Next. Seleziona una cartella in cui posizionare il progetto e, infine, premi su Create.

Per prima cosa, scarica quest’immagine e trascinala all’interno del tuo progetto. Ti si aprirà un menu il quale ti chiederà alcune impostazioni per l’importazione dell’immagine. Tra queste, l’unica che devi selezionare è Copy Item if needed:

Importare immagine dentro progetto xCode

Entra nel main.storyBoard, aggiungi una UIImageView al centro della View principale e ridimensionala in modo da riempire tutto lo schermo. Adesso selezionala e crea quattro vincoli di Auto Layout:

  1. Equal Width ed Equal Height con la view principale.
  2. Center Horizontally e Center Vertically sempre con la view principale.

Aggiungere una UIImageView e vincoli Auto Layout

Cos’è l’Auto Layout? è il sistema che si utilizza per creare applicazioni con un’interfaccia universale ed adattabile alle dimensioni dei diversi dispositivi (iPhone e iPad).

Nella gif sopra ho impostato l’immagine alla UIImageView. Infatti, una volta portata dentro il progetto, l’immagine può essere selezionata dall’Attributes Inspector (il menu di destra) dall’attributo Image.

Dato che l’immagine può avere dimensioni differenti rispetto all’area occupata dalla UIImageView puoi cambiare la modalità di visualizzazione e di ridimensionamento dell’immagine. Io ho scelto la Aspect Fit che mostrerà l’immagine nelle sue dimensioni naturali. Essendo più grande dell’area della UIImageView verrà visualizzata leggermente tagliata. Se utilizzi altri immagini, cambia la proprietà Mode.

Se invece ti stessi domandando come importare un’immagine dal rullino o direttamente dalla fotocamera, ho scritto un tutorial che fa al caso tuo.

Adesso mancano i bottoni per la scelta del filtro da applicare. Aggiungi una Stack View di tipo orizzontale nella parte inferiore dell’applicazione e aggiungi tre bottoni che rinominerai in Seppia, Bianco e Nero e Casuale. Anche per la stack, imposta dei vincoli di Auto Layout e la dislocazione corretta degli elementi all’interno della stack:

Stack View orizzontale e bottoni

Se hai dei problemi con la realizzazione di quest’interfaccia o del progetto, in fondo alla pagina trovi il download dell’app completa.

Le IBOutlet e IBAction

Adesso non ti resta altro che collegare l’interfaccia con il tuo ViewController per iniziare a scrivere il codice per l’aggiunta dei filtri.

Crea una IBOutlet per l’ImageView rinominata in “myImageView”. (Se non sai di cosa sto parlando guarda questa mia guida). Per i tre bottoni, dato che svolgeranno delle operazioni, crea tre rispettive IBAction chiamate “addFiltroSeppia_clicked”, “addFiltroBiancoNero_clicked” e “addFiltroCasuale_clicked”:

aggiungere IBOutlet e Action per app Filtri foto

Il codice finale dovrebbe risultare uguale a quello che vedi qui sotto (ricordati che devi comunque collegare il codice all’interfacci anche se copi ed incolli il seguente codice):

Aggiungere un filtro fotografico con la classe CIFilter

Ad inizio tutorial ti ho detto che creare una applicazione di Foto Editing per iOS è relativamente semplice. Lo è perché esiste un framework, cioè un insieme di classe predefinite, chiama CoreImage che ti mette a disposizione delle funzioni per l’alterazione delle immagini.

La classe da cui partirai si chiama CIContext, ovvero CoreImageContext. Devi sapere che qualsiasi alterazione ad un’immagine non viene mai fatta direttamente sull’immagine vera e propria bensì su una copia invisibile. Tale copia viene conservata e gestita dal CIContext che fa manager di tutte le modifiche effettuate ad una foto.

Il costruttore dell’oggetto CIContext ha diversi parametri, quello che utilizzeremo noi ha per parametro un dizionario di AnyObject per chiave e valore. Tale dizionario serve a definire delle opzioni per il CIContext. Dato che è opzionale, noi passeremo nil come valore.

Dato che un oggetto CIContext verrà utilizzato per la creazione di tutti i filtri, sotto la definizione della classe ViewController, aggiungi un nuovo attributo con un’istanza di tale oggetto:

Quando utilizzi i filtri, o le altre funzionalità del CoreImage framework, non puoi lavorare con le semplice UIImage (cioè il tipo di dato che contiene l’immagine che adesso hai nella UIImageView), bensì devi utilizzare un tipo apposito chiamato CIImage.

Una volta trasformata una UIImage in CIImage è possibile applicargli un filtro o qualsivoglia modifica.

I filtri fotografici sono gestiti dalla classe CIFilter. Il costruttore di tale oggetto vuole come parametro il codice identificativo del filtro. Una volta creato un filtro, può essere applicato all’immagine (non l’originale ma la CIImage) utilizzando il metodo setValue(value: AnyObject?, forKey: String) che come primo parametro accetta l’immagine a cui applicare il filtro e, come secondo, una stringa che identifica come questo filtro deve trattare l’immagine passata.

Una volta applicato il filtro, questo cambiamento deve essere tramutato in immagine e, pertanto, bisogna creare una nuova immagine partendo da quella che ha generato. Per farlo si utilizza un metodo della classe CIContext chiamato createCGImage che come parametri in ingresso richiede l’output dell’immagine con il filtro applicato e le dimensioni della nuova immagine da creare.

Infine, l’immagine CIImage restituita dal context, può essere finalmente passata alla UIImageView (semper dopo un’opportuna trasformazione da CIImage in UIImage).

Capita la teoria, la pratica è un gioco da ragazzi! Comunque, se dovessi avere dei problemi nella comprensione del codice o di alcuni passaggi, non esitare a lasciare un commento in fondo alla pagina.

Filtro Bianco e Nero

Aggiungi il seguente codice all’interno del metodo addFiltroBiancoNero_clicked:

Filtro Bianco e Nero con CoreImage Filter swift

Filtro Seppia

Il filtro seppia ti permette di definire anche la forza dell’effetto. Puoi cambiarla a tuo piacimento utilizzando il setValue alla chiave kcIInputIntensityKey:

Filtro seppia Core Image e Swift

Filtro Casuale

Per la generazione del filtro casuale ti farò vedere un sistema alternativo. Utilizzerai il metodo imageByApplyngFilter della CIImage al quale applicherai il filtro HueAdjust (immaginalo come un “modificatore di colori”) a cui passerai un numero random che, per semplicità, creerà un colore casuale da applicare.

Filtro casuale Core Image swift

 Conclusione e Download del progetto

In questa prima parte sei riuscito a creare una applicazione di foto editing per iOS mediante l’utilizzo di semplici classi fornite dal framework Core Image.

L’app però è ancora prematura e richiede delle migliorie. Puoi provare a farlo come esercizio. Prova ad aggiungere la possibilità di ritornare indietro nelle modifiche effettuate e ad aggiungere dei preview degli effetti vicino ai bottoni per la selezione del filtro.

Infine, se vuoi scaricare il mio progetto, sblocca il seguente modulo:

[sociallocker]
Download [wpdm_package id=’1127′]
[/sociallocker]

Buona Programmazione!

Start typing and press Enter to search

auto-layout-in-xcode-la-guida-definitivaCreare una Table View con ricerca in Swift