Punti chiave
- Un drawable vettoriale è una grafica vettoriale definita in un file XML come un insieme di punti, linee e curve insieme alle informazioni sul colore associate.
- I file drawable vettoriali sono scalabili, ovvero possono essere ridimensionati senza compromettere la qualità del display. Per questo sono ideali per l'uso nelle app Android, in quanto possono contribuire a ridurre le dimensioni dei file APK e migliorare le prestazioni.
- Per creare disegni vettoriali in Android Studio, fai clic con il tasto destro del mouse sulla cartella disegnabile nel progetto e seleziona Nuovo > Asset vettoriale. Puoi anche importare file SVG in Android Studio come drawable vettoriali.
Introduzione
UnVectorDrawable
è una grafica vettoriale definita in un file XML come un insieme di punti, linee e curve insieme alle informazioni sul colore associate. Il vantaggio principale dell'utilizzo di un drawable vettoriale è la scalabilità
dell'immagine. Può essere scalato senza perdita di qualità di visualizzazione, il che significa che lo stesso file viene ridimensionato per diverse densità di schermo senza perdita di qualità dell'immagine.
In questo modo si riducono le dimensioni dei file APK e la minore manutenzione da parte degli sviluppatori. Puoi anche utilizzare immagini vettoriali per l'animazione utilizzando più file XML anziché più immagini per ogni risoluzione del display.
Questa pagina e il video seguente forniscono una panoramica su come creare elementi drawable vettoriali in XML. Android Studio è anche in grado di convertire i file SVG nel formato disegnabile vettoriale, come descritto nell'articolo Aggiungere grafica vettoriale a più densità.
Android 5.0 (livello API 21) è stata la prima versione a supportare ufficialmente i drawable vettoriali con
VectorDrawable
e AnimatedVectorDrawable
, ma
puoi supportare versioni precedenti con la libreria di supporto Android, che fornisce le
classi VectorDrawableCompat
e
AnimatedVectorDrawableCompat
.
Informazioni sulla classe VectorDrawable
VectorDrawable
definisce un oggetto drawable statico. In modo simile al formato SVG, ogni grafica vettoriale è definita come una gerarchia ad albero, composta da oggetti path
e group
.
Ogni elemento path
contiene la geometria del contorno dell'oggetto e
group
contiene i dettagli per la trasformazione. Tutti i percorsi vengono tracciati
nello stesso ordine in cui vengono visualizzati nel file XML.
Lo strumento Vector asset Studio offre un modo semplice per aggiungere al progetto una grafica vettoriale come file XML.
XML di esempio
Ecco un esempio di file XML VectorDrawable
che mostra l'immagine
di una batteria in modalità di ricarica.
<!-- res/drawable/battery_charging.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group> </vector>
Questo XML esegue il rendering della seguente immagine:
Informazioni sulla classe AnimatedVectorDrawable
AnimatedVectorDrawable
aggiunge un'animazione alle proprietà di una grafica
vettoriale. Puoi definire una grafica vettoriale animata come tre file
di risorse separati o come un singolo file XML che definisce l'intero drawable. Diamo un'occhiata a entrambi gli approcci per una migliore comprensione: più file XML e file XML singolo.
File XML multipli
Utilizzando questo approccio, puoi definire tre file XML separati:
- Un file XML
VectorDrawable
. -
Un file XML
AnimatedVectorDrawable
che definisceVectorDrawable
di destinazione, i percorsi e i gruppi di destinazione da animare, le proprietà e le animazioni definite come oggettiObjectAnimator
oAnimatorSet
oggetti. - Un file XML animatore.
Esempio di più file XML
I seguenti file XML mostrano l'animazione di una grafica vettoriale.
- File XML di VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- File XML di AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
- File XML dell'animatore utilizzati nel file XML di AnimatedVectorDrawable:
rotation.xml
epath_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set>
Singolo file XML
Utilizzando questo approccio, puoi unire i file XML correlati in un unico file XML mediante il formato XML bundle. Al momento della creazione dell'app, il tag aapt
crea risorse separate e le fa riferimento nel vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e l'output è compatibile con le versioni precedenti.
Esempio di un singolo file XML
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
Soluzione di compatibilità con le versioni precedenti degli elementi drawable vettoriali
Per supportare il disegno vettoriale e il disegno vettoriale animato su dispositivi che eseguono versioni della piattaforma precedenti ad Android 5.0 (livello API 21) o utilizzare le funzionalità fillColor
, fillType
e strokeColor
precedenti ad Android 7.0 (livello API 24), VectorDrawableCompat
e AnimatedVectorDrawableCompat
sono disponibili tramite due librerie di supporto: support-vector-drawable
e animated-vector-drawable
, rispettivamente.
Android Studio 1.4 ha introdotto un supporto a compatibilità limitata per le risorse drawable vettoriali generando file PNG in fase di creazione. Tuttavia, le librerie di supporto drawable
vettoriali e animate offrono flessibilità e
ampia compatibilità: si tratta di una libreria di supporto che ti consente di utilizzarla con tutte le versioni della piattaforma Android fino ad Android 2.1 (livello API 7 o versioni successive). Per configurare la tua
app per l'utilizzo di librerie di supporto vettoriale, aggiungi l'elemento vectorDrawables
al file build.gradle
nel modulo dell'app.
Utilizza il seguente snippet di codice per configurare l'elemento vectorDrawables
:
Alla moda
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Alla moda
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
Kotlin
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
Puoi utilizzare VectorDrawableCompat
e
AnimatedVectorDrawableCompat
su tutti
i dispositivi con Android 4.0 (livello API 14) e versioni successive. Il modo in cui Android
carica i drawable, non tutti i luoghi che accettano un ID drawable, ad esempio in un file XML, supporta il caricamento dei drawable vettoriali. Il pacchetto android.support.v7.appcompat
ha aggiunto una serie di caratteristiche per semplificare l'utilizzo dei drawable vettoriali. Innanzitutto, quando utilizzi il pacchetto android.support.v7.appcompat
con ImageView
o con le sottoclassi come ImageButton
e FloatingActionButton
, puoi utilizzare il nuovo attributo app:srcCompat
per fare riferimento agli elementi drawable vettoriali, nonché a qualsiasi altro drawable disponibile per android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Per modificare gli elementi drawable in fase di runtime, puoi utilizzare il
setImageResource()
metodo come prima. L'utilizzo di AppCompat
e app:srcCompat
è il metodo più infallibile per integrare
elementi drawable vettoriali nella tua app.
Support Library 25.4.0 e versioni successive supporta le seguenti funzionalità:
- Morphing del percorso (valutatore del PathType) Utilizzato per morphing un percorso in un altro percorso.
- Interpolazione del percorso: utilizzata per definire un interpolatore flessibile (rappresentato come un percorso) anziché gli interpolatori definiti dal sistema come LinearInterpolator.
Support Library 26.0.0-beta1 e versioni successive supporta le seguenti funzionalità:
- Sposta lungo il percorso: l'oggetto geometrico può spostarsi, lungo un percorso arbitrario, all'interno di un'animazione.
Esempio di più file XML utilizzando la libreria di supporto
I seguenti file XML mostrano l'approccio che prevede l'utilizzo di più file XML per animare una grafica vettoriale.
- File XML di VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- File XML di AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- File XML dell'animatore utilizzato nel file XML di AnimatedVectorDrawable:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Singolo file XML
Il seguente file XML illustra l'approccio che prevede l'utilizzo di un singolo file XML per animare una grafica vettoriale. Al momento della creazione dell'app, il tag aapt
crea risorse separate e le fa riferimento nel vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e l'output è compatibile con le versioni precedenti.
Esempio di un singolo file XML che utilizza la libreria di supporto
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>