Home Tutorial Creare Effetto Gradient

Creare Effetto Gradient

Gradient effect

156
0

Creare Effetto Gradient

In questo Tutorial vedremo come applicare un effetto gradient ad un elemento.

Nell’esempio utilizzeremo la classe “Cagradientlayer” e creeremo un effetto sfumato su una subView, bottone e sullo sfondo della view principale.

effetto GradierCreiamo un nuovo progetto e all’interno della scena importiamo dalla libreria un bottone e una view configurandoli graficamente come da figura.

Creiamo successivamente i riferimenti di tipo “@IBOutlet” all’interno del file viewController.swift collegato alla scena.

Richiamiamo i due elementi all’interno del metodo viewDidLoad e applichiamo il codice per creare un effetto stondato ai bordi della view e del bottone.

Ora creiamo all’interno del progetto un nuovo file di tipo .swift chiamandolo “effettoSfondo” e spostiamoci al suo intero.

In questo file per creeremo un extension della classe “UIView” e al suo interno inseriremo il metodo per la creazione dell’effetto.

Nel codice sopra abbiamo importato la libreria UIKit, creato una extension della classe UIView e al suo interno abbiamo creato il metodo personalizzato chiamandolo “insEffettoGradient“.

In entrata abbiamo inserito tre parametri di tipo “UIColor” di cui l’ultimo opzionale e chiamandoli rispettivamente primoColore, secondoColore e terzoColore.

All’interno del metodo abbiamo creato una costate di tipo “CAGradientLayer” chiamandola gradientLayer e successivamente abbiamo configurato i diversi parametri per ottenere l’effetto.

.frame = bounds, controlliamo se i terzoColore ha un valore o è nil, se nil imposto gradientLayer.colors = [primoColore.cgColor, secondoColore.cgColor] e gradientLayer.locations = [0.0, 1.0] altrimenti gradientLayer.colors = [primoColore.cgColor, secondoColore.cgColor, terzoColore!.cgColor] e gradientLayer.locations =  [0.0, 0.5, 1.0].

In pratica facendo questo controllo in base alla valore del terzo parametro l’effetto sarà fatto tra 2 o 3 colori.

Fatto questo impostiamo i parametri di inizio e di fine effetto tramite .startPoint.endPoint  e infine abbiamo aggiunto un la costante gradientLayer come parametro di un sublayer.

Ovviamente, giocando con i valori dei parametri, possiamo modificare il comportamento dell’effetto sia in termini di quantità di colori sia dei punti di inizio e fine.

Infine, spostandoci nuovamente del file viewController.swif abbiamo assegnato al bottone, subView e sfondo l’effetto tramite l’assegnazione del metodo creato come riportato nel codice seguente

Risultato Finale

gradierEffect

Per qualunque dubbio o domanda scrivete un commento in questa lezione.

Materiale Progetto