Share
Mentre Android non supporta direttamente gli SVG (Scalable Vector Graphics), Lollipop ha introdotto una nuova classe chiamata VectorDrawable, che consente a designer e sviluppatori di disegnare risorse in modo simile utilizzando solo il codice.
In questo articolo, imparerai come creare un VectorDrawable con file XML e animali nei tuoi progetti. Questo è supportato solo per dispositivi con Android 5.0 o versioni successive e attualmente non esistono implementazioni della libreria di supporto. I file sorgente di questo tutorial sono disponibili su GitHub.
La principale somiglianza tra a VectorDrawable e un'immagine SVG standard è che entrambi vengono estratti usando a sentiero valore. Pur comprendendo come i percorsi SVGsono tratte fuori dallo scopo di questo articolo, la documentazione ufficiale può essere trovata sul sito web del W3C. Per questo articolo, devi semplicemente sapere che il tag path è dove si verifica il disegno. Diamo un'occhiata al file SVG che disegna la seguente immagine:
Ci sono cinque parti principali di questa immagine:
Il seguente codice disegna questa immagine come SVG:
Anche se questo può sembrare un po 'schiacciante, in realtà non è necessario comprendere appieno come tutto venga elaborato per implementare un VectorDrawable nel tuo codice. Tuttavia, va notato che ho separato ciascuna delle cinque sezioni nel loro blocco unico nel codice per la leggibilità.
La sezione superiore consiste di due archi per disegnare il quadrato arrotondato e le sezioni che seguono rappresentano rispettivamente gli insiemi di linee in basso, in alto, a destra e a sinistra. Per trasformare questo codice SVG in a VectorDrawable, devi prima definire il vettore oggetto in XML. Il seguente codice è preso dal vector_drawable_cpu.xml file nel codice di esempio per questo articolo.
Successivamente, è possibile aggiungere i dati del percorso. Il seguente codice è suddiviso in cinque tag di percorso diversi anziché in un percorso di grandi dimensioni.
Come puoi vedere, ogni sezione del percorso usa semplicemente il pathData attributo per il disegno. Ora puoi includere il VectorDrawable File XML come un drawable in uno standard ImageView e si ridimensionerà a qualsiasi dimensione richiesta dalla tua app, senza la necessità di utilizzare alcun codice Java.
Ora che sai come creare immagini usando solo il codice, è il momento di divertirti un po 'e animarle. Nell'animazione seguente, noterai che ciascuno dei gruppi di fili sta pulsando verso e lontano dalla CPU.
Per ottenere questo effetto, dovrai avvolgere ogni sezione che desideri animare in a
Successivamente, vorrai creare animatori per ogni tipo di animazione. In questo caso, ce n'è uno per ogni gruppo di fili per un totale di quattro. Di seguito è riportato un esempio dell'animazione del gruppo principale e ne occorrerà anche uno per il lato inferiore, sinistro e destro. Ciascuno dei file XML dell'animatore può essere trovato nel codice di esempio.
Come puoi vedere, il nome della proprietà è impostato per translateY, il che significa che l'animazione si muoverà lungo l'asse Y. Il valueFrom e valueto controlla la posizione di inizio e fine. IMPOSTANDO Modalità di ripetizione a inverso e repeatCount a infinito, l'animazione verrà interrotta per sempre fintanto che il VectorDrawable è visibile. Il durata dell'animazione è impostata su 250, che è il tempo in millisecondi.
Per applicare le animazioni al tuo file drawable, dovrai crearne una nuova animata-vector File XML per associare gli animatori con VectorDrawable gruppi. Il seguente codice è usato per creare il animated_cpu.xml file.
Quando tutto il tuo XML è pronto, puoi utilizzare il animated_cpu.xmldisegnabile in un ImageView per visualizzarlo.
Per iniziare la tua animazione, dovrai ottenere un'istanza di animatable dal ImageView e chiama inizio.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Dopo inizio è stato chiamato, i fili dell'immagine della CPU inizieranno a muoversi con un codice Java molto minimale usato.
Un caso di uso comune per a VectorDrawable sta trasformando un'immagine in un'altra, come l'icona della barra delle azioni che cambia da un'icona di hamburger a una freccia. Per fare ciò, entrambi i percorsi di origine e destinazione devono seguire un formato identico per il numero di elementi. Per questo esempio definiremo le frecce rivolte a sinistra e a destra viste sopra come stringhe.
M300,70 l 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
Successivamente, dovrai creare un drawable iniziale per una freccia usando il percorso per freccia sinistra. Nel codice di esempio, viene chiamato vector_drawable_left_arrow.xml.
La principale differenza tra l'animazione della CPU e la trasformazione risiede nel animator_left_right_arrow.xml file.
Noterai il valueFrom e valueto le proprietà fanno riferimento ai dati del percorso per la freccia sinistra e destra, il valueType è impostato per pathType e nome della proprietàè impostato per pathData. Quando questi sono impostati, l'animatore saprà di cambiare un set di dati di percorso all'altro. Quando l'animatore è finito, è necessario associare il VectorDrawable con il objectAnimator usando un nuovo animata-vector oggetto.
Infine, dovrai semplicemente associare il drawable animato con un ImageView e avvia l'animazione nel tuo codice Java.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Come hai visto, il VectorDrawable la classe è abbastanza semplice da usare e consente un sacco di personalizzazione per aggiungere semplici animazioni. Mentre il VectorDrawable la classe è attualmente disponibile solo per dispositivi con Android 5.0 e versioni successive, sarà preziosa dato che più dispositivi supportano Lollipop e le versioni future di Android.
Accentsconagua