Compatibile con Xcode 8

BlurEffect e VisualEffect con Swift. Personalizza la grafica della tua applicazione iOS

A cura di Mabur

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Cos’è che rende bella un’applicazione? chi è che sancisce i canoni di bellezza moderni?

Quando si parla di arte e bellezza le idee sono sempre contrastanti. Se per me qualcosa è bello, per te potrebbe non esserlo.

Purtroppo, o per fortuna, il mondo moderno è caratterizzato dal seguire gli andamenti dei gusti e costumi degli utilizzatori. Se un’azienda come Apple si accorge che i suoi dispositivi non vengono più apprezzati, allora li modificherà nella speranza di riacquistare credibilità e fiducia. Ma è sempre così?

Spesso non è l’utente a veicolare una società ma è la società a muovere l’utenza. Ti faccio subito un esempio!

Prima di iOS 7 ti ricordi com’era la grafica del sistema operativo?

Quel tipo di interfaccia era stato introdotto per la prima volta dallo stesso Steve Jobs e prendeva il nome di Skeumorfismo. Lo skeumorfismo aveva la caratteristica di emulare le stesse caratteristiche degli oggetti reali. Per esempio, l’applicazione Note, aveva le sembianze di un block note reale e, più in generale, ogni applicazione tendeva ad utilizzare immagini e layout tridimensionali per dare un maggior senso di realismo.BlurEffect e VisualEffect con Swift

Oggi quel tipo grafica è odiata e poco apprezzata dalla generazione moderna. O meglio, gli stessi che oggi dicono che lo skeumorfismo è poco bello, prima lo amavano e apprezzavano.

Le tendenze cambiano continuamente.

Dall’introduzione di iOS7, e continua tutt’ora con iOS 9, Apple ha letteralmente mandato in pensione lo Skeumorfismo a favore di un tipo di grafica più semplice e minimale, il Flat Design. Uno dei pregi del Flat Design, oltre a poter essere realizzato da tutti senza grandi conoscenze, è quello di portare con se tanti effetti grafici che prima erano improponibili.

Ma non dilunghiamoci troppo e cerchiamo di capire come introdurre nelle nostre applicazioni qualche effetto grafico per renderla appetibili al grande pubblico.

Uno degli effetti grafici maggiormente utilizzati è lo sfocato o Blur. L’effetto sfocatura, infatti, è stato molto apprezzato per il suo senso di profondità e piacevolezza alla vista. Oramai è un punto caratterizzante delle maggiori applicazioni in circolazione.

Insomma.. vuoi dare un po di vita alla tua app? impara ad utilizzare il BlurEffect e VisualEffect con Swift. Un’immagine di sfondo con effetto blur.. stà più che bene ed è proprio quello che serve! ed oggi vedrai come farlo.

Cosa imparerai da questo tutorial

In questo tutorial realizzerai un’applicazione a cui verrà applicata un’immagine di sfondo caratterizzata dall’utilizzo dell’UIBlurEffect con il linguaggio Swift.

Applicazione-EffettoBlur

Nello specifico, tratterò i seguenti punti:

  1. Come inserire una Image View da Storyboard
  2. Come applicare un’immagine alla nostra Image View.
  3. Personalizzare l’ImageView utilizzando il UIBlurEffect e il UIVisualeffectView con il linguaggio Swift.

Il progetto è compatibile con la versione di Xcode 7, o successive. Per continuare a seguire la guida è necessario che tu possegga alcune conoscenze di base come il linguaggio di programmazione Swift (il link porta al corso gratuito realizzato da Peppe).

Sei pronto? Allora cominciamo!

Inserire un’immagine di sfondo ad un View Controller

Crea un nuovo progetto da File\New\Project…, seleziona iOS e Single View Application. Premi Next. Chiama il progetto “BlurEffect e VisualEffect con Swift”. Fai attenzione a selezionare il giusto linguaggio di programmazione e ad assicurarti che Language sia impostato su Swift. Vai avanti, seleziona una cartella di destinazione ed infine clicca su Create.

Hai dato vita ad un nuovo progetto!

Inizia subito ad inserire una Image View nel tuo View Controller. Dalla sezione sinistra della tua finestra seleziona il Main.storyboard. Al centro della finestra apparirà il tuo ViewController.

Dalla sezione destra della tua finestra (quando parlo di nostra finestra intendo la finestra del programma Xcode), in basso scegli, dalla libreria degli oggetti o Object library,  l’oggetto UIImageView e trascinalo sul controller.

image_View

Adesso riposiziona e allarga l’Image View in modo che riempia tutto il bordo del View Controller. A questo punto devi vincolarla al layout grazie ai vincoli di Auto Layout. Dato che questo non è un tutorial di base, puoi apprendere queste nozioni qui.

Fatto?

Benissimo! Ora devi aggiungere un’immagine al tuo progetto.

Apri la cartella contenente la tua immagine di sfondo (ne puoi trovare a migliaia cercando con google). Selezionala e trascinala all’interno della cartella “Supporting Files” posta nella colonna di sinistra del tuo Xcode.

Non appena l’immagine verrà rilasciata all’interno della tua cartella, ti verrà richiesto di scegliere le opzioni per l’aggiunta del file. Assicurati che la casella “Copy items if needed” sia spuntata, questo farà una copia fisica dell’immagine all’interno del tuo progetto. In questo modo l’immagine sarà sempre disponibile.

Assegnare un’immagine ad una Image View

Dopo avere inserito l’ immagine nel progetto, devi assegnare la stessa alla Image View inserita precedentemente.

Dallo storyboard seleziona l’Image View e dal menu di destra scegli la sezione “Show the attribuites Inspector”. Se clicchi sulla casella Image, dal menù a tendina, vedrai comparire il nome dell’immagine caricata precedentemente. Puoi selezionarla tranquillamente.

Bene, ora l’immagine è associata all’Image View! un altro passo avanti.

condividi xCoding

Ho impiegato un po’ di tempo a scrivere questo tutorial, sarei davvero felice se contribuissi al mio progetto semplicemente mettendo un mi piace o follow alle mie pagine

[addtoany]

Grazie davvero :-)

Applicare il BlurEffect e VisualEffect con il linguaggio Swift ad una Image View

Fase due, andiamo di codice!

In alto a destra di Xcode, c’è un’icona con due anelli che si incrociano, premilo. Una volta premuto le finestre si restringeranno ed apparirà a fianco dello storyboard un’altra finestra con dentro il codice della classe ViewController.

[box type=”tick”]Se non dovessi ricordarti cos’è una classe o stai avendo delle difficoltà ad interpretare il codice, forse è meglio se cominci con qualcosa di più soft come le basi dello sviluppo e programmazione.[/box]

Se adesso fai un click con il mouse sull’immagine e contemporaneamente premo il tasto CTRL, puoi creare un collegamento dell’immagine direttamente al ViewController.  All’IBOutlet dai il nome di “immagineBKG”:

Nella funzione viewDidLoad, adesso, inserisci il seguente codice:

Prima viene creato l’oggetto UIBlurEffect che è colui che contiene i parametri stilistici per l’effetto sfocatura. Infatti il suo costruttore accetta come parametro lo stile o la quantità di sfocatura che andrai ad applicare all’immagine. Gli stili permessi sono tre e sono enumerati dall’Enum UIBlurEffectStyle:

  1. UIBlurEffectStyle.Light
  2. UIBlurEffectStyle.Dark
  3. UIBlurEffectStyle.ExtraLight

Una volta creato l’oggetto stilistico, viene creata la UIView che effettivamente conterrà l’effetto. Essendo una UIView utilizzata solo per gli stili grafici, prende il nome di UIVisualEffectView e la sua costruzione è data dal passaggio dell’effetto che conterrà (UIVisualEffectView(effect:)). La UIVisualEffectView, inoltre, viene ridimensionata in modo da riempire tutto lo spazio dell’Image View.

Infine, la UIVisualEffectView viene applicata all’Image View.

É importante capire che non è l’effetto vero e proprio ad essere applicato all’immagine. Bensì viene creata una pellicola, la UIVisualEffectView, che viene incollata sopra la Image View.

Questa caratteristica ti permette di poter facilmente togliere l’effetto, infatti ti basta rimuovere la UIVisualEffectView dalla gerarchie delle view, oppure di poter creare ed aggiungere altri in combinazione con quelli già presenti.

Ed ecco che finalmente hai creato la tua prima View con effetto sfocatura!

Il Visual Effect View with Blur. Aggiungere una finestra in rilievo con effetto Blur ad una View classica senza scrivere una riga di codice

Visual Blur-Effect

Ma c’è di più! Puoi anche decidere di avere lo sfondo statico e sopra una finestra con il BlurEffect. Stavolta sarà più semplice dato che non scriverai nemmeno una riga di codice. Hum.. quindi dove sta il divertimento?

Procediamo dunque senza esitazione. Prima di tutto, Dall’Object Library scorri la lista degli oggetti, come hai già fatto per trovare la ImageView, fino a trovare l’oggetto Visual Effect View with Blur. 

Trascinalo sopra l’Image View che fa da sfondo all’Interface Controller e posizionalo dove più ti piace. Ricordati di vincolare la finestra con l’auto layout. ricordi? no? leggi qui.

La Visual Effect View with Blur ha la particolarità di essere predisposta per il BlurEffect. Cioè l’unica cosa che dovrai fare è selezionare il tipo di livello d’effetto, Extra Light, Light e Dark, dal menù a tendina che puoi trovare nell’Attributes inspector nella sezione Visual Effect View.

Prova ad avviare l’applicazione, se tutto è andato per il verso giusto, come per incanto dovresti vedere il tuo effetto già perfettamente applicato e senza nemmeno scrivere una riga di codice!

Ma non finisce qui, ovviamente su questa finestra puoi mettere tutti gli oggetti che preferisci, come un’altra ImageView e delle Label come ho fatto io nell’immagine del paragrafo. Con la Visual Effect View with Blur dare un effetto sfocato ad un’immagine diventa molto più semplice e altrettanto efficace. Come effetto finale non è male e può dare alla nostra app una look davvero accattivante.

Il Visual effect Views with Blur and Vibrancy. Ancora una cosa per te!

Pensavi di aver finito? magari! ho ancora una cosetta in serbo stile “One More Thing” beh, non esageriamo. L’ultima cosa di cui voglio parlarti è l’effetto Vibrancy o vibrato che permette di rifinire e dare un tocco più elegante al già bello Blur Effect.

Vediamo cos’è e come applicarlo!

La funzione vibrancy rende trasparente, utilizzando sempre una finitura blur, un testo o un’immagine. più facile a vedersi che a dirsi:

effetto Vibrancy

Vediamo come realizzarlo.

All’oggetto Visual Effect View with Blur, che nell’immagine che vedi sopra ho ridimensionato alle dimensioni di 300×300 pixel, imposta l’effetto Dark per enfatizzare di più l’effetto. Se fai un bel run della tua app vedrai un bell’effetto Blur-Dark esattamente al centro del tuo simulatore.

Fatto questo, seleziona, sempre dalla libreria degli oggetti, il Visual effect Views with Blur and Vibrancy e dimensionalo e posizionalo esattamente sopra il precedente. Anche qua seleziona l’effetto Dark ed in più spunta la casella Vibrancy posta un po’ più in giù nel menu.

Prova a fare girare l’applicazione ora! Non noti la differenza? non è cambiato nulla? Tranquillo adesso avverrà la magia.

Ora, sulla Visual effect Views with Blur and Vibrancy posiziona una Label al centro della view e se vuoi fare come ho fatto io, vai di font custom, scegli Helvetica Neue, Bold con un bel 50 di dimensione (ricordati di mettere 2 linee altrimenti non vai a capo).

Bene è fatto tutto! Prova a fare girare l’app ora e vedrai come d’incanto comparire la tua scritta con un effetto trasparente ma opaco.

Considerazioni

Ma perché utilizzare un’effetto così? e in quali casi? beh.. la risposta è semplice, in tutti i casi nei quali ci troviamo ad avere un testo statico con uno sfondo fisso, ad esempio nelle guide all’uso delle app, o comunque quando vogliamo evidenziare il nostro testo allora è il momento dello sfondo con un po’ di sfocatura!

Spero che con questo tutorial di averti dato abbastanza materiale per migliorare graficamente l’applicazione e renderla più accattivante che mai.

Dove andare da qui

Ecco una lista dei tutorial che ti consiglio di guardare per migliorare l’impatto della tua applicazione:

  1. Tutorial UIKit in Swift. Come animare la propria applicazione
  2. Tutorial Alert View e Action Sheets in iOS8 con Swift
  3. Passare informazioni da View a View in Swift 

Buona Programmazione!

Start typing and press Enter to search

Come aggiungere il Touch ID in Swift