Android Vector Drawable

In questo tutorial, parleremo di Android Vector Drawable. Inoltre, li implementeremo nella nostra applicazione Android.

Android Vector Drawable
Creazione di path per asset vettoriali
Android Vector Drawable Struttura del progetto di esempio
CodiceAndroid Vector Drawable

Android Vector Drawable

Spesso usiamo PNG come immagini disegnabili. Affinché le immagini PNG funzionino per diverse dimensioni dello schermo, creiamo più risorse PNG con diverse dimensioni e densità. Di conseguenza, le immagini PNG occupano spazio extra e portano a grandi dimensioni APK delle applicazioni Android.

Ecco dove Vector Drawable viene in nostro soccorso! Sono il vostro sostituto per le immagini PNG.

Un VectorDrawable è un grafico vettoriale definito in un file XML come un insieme di punti, linee e curve insieme alle sue informazioni di colore associate.

Possono essere scalati secondo le dimensioni dello schermo senza perdita di qualità. Sono anche resi rapidamente sullo schermo. I VectorDrawable sono un file XML.

Puoi aggiungere un nuovo Vector Asset nella tua cartella drawable usando New | Vector Asset.

Così possiamo creare Vector drawables di icone Material Design. Il codice per il VectorDrawable appare così:

Sono impostati nel tag vector. android:viewportWidth e android:viewportHeight sono utilizzati per impostare la larghezza e l’altezza dei limiti del drawable. Entro queste dimensioni, il disegnabile vettoriale viene disegnato sulla tela.

path è il tag che crea il disegnabile. All’interno del tracciato creiamo linee, curve, archi e impostiamo il bordo, il colore di sfondo. Facciamo così i comandi path nel pathData.

I drawable vettoriali sono stati introdotti a partire da Android Lollipop e superiori ma, grazie alla retrocompatibilità, sono compatibili anche con le versioni precedenti.

Creazione di path per asset vettoriali

I comandi path consistono in un alfabeto seguito da coordinate. Immaginate di creare percorsi come se steste facendo un dipinto. Gli alfabeti maiuscoli rappresentano la posizione assoluta. Le lettere minuscole rappresentano la posizione relativa.

M – comando moveto. È un modo per dire di spostare la matita alla coordinata data sulla vista. Esempio M 100 100 sposta una matita immaginaria alla coordinata 100, 100 sulla tela.
L – comando line to. Si usa per disegnare una linea dalla posizione corrente alla posizione specificata.
Esempio : M 100 100, L 120 100 disegna una linea orizzontale.
z – Si usa per chiudere un percorso. Disegna una linea dall’ultima posizione alla prima. Esempio M 100 100 L 120 100 L 120 120 L 100 120 Z crea un quadrato.
C – Si usa per creare una curva di bezier. Abbiamo bisogno di specificare tre serie di coordinate dopo questo. Il primo e il secondo sarebbero i due punti di controllo tra il punto iniziale e il punto finale.
A – è usato per disegnare un arco. Dopo a è necessario specificare il seguente formato: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry e x axis sono i due raggi specificati.

Possiamo specificare più di un percorso in un vettore impostando i tag path all’interno di un tag group.

Creiamo qualche interessante Vector Drawable casuale nella nostra applicazione Android utilizzando le conoscenze di cui sopra.

Android Vector Drawable Struttura del progetto di esempio

CodiceAndroid Vector Drawable

Il codice per il layout activity_main.xml è riportato di seguito:

Guardiamo una volta per tutte l’implementazione dei Vector Drawables.

ic_rectangle.xml

Nel codice sopra, abbiamo creato due percorsi. Ognuno è un triangolo rettangolo.

Impostare questo sul nostro LinearLayout farebbe apparire lo sfondo come:

ic_w.xml

Nel codice sopra, stiamo cercando di creare un simbolo W usando le linee.

Nota: Invece di un percorso separato, possiamo unire tutto in un singolo comando di percorso. Anche se puoi usare più percorsi per avere una chiara comprensione di cosa fa ogni percorso.

ic_w_filled.xml
Nel codice sottostante, useremo il comando z per chiudere i percorsi e riempire il colore al loro interno: