Punti chiave
- Un drawable vettoriale è una grafica vettoriale definita in un file XML come un insieme di punti, linee con le relative informazioni sui colori.
- 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 del tuo file APK e per migliorare le prestazioni.
- Per creare disegni vettoriali in Android Studio, fai clic con il tasto destro del mouse sulla cartella di drawable. nel progetto e selezionando 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 insieme di punti, linee e curve insieme ai relativi
le informazioni sul colore. Il principale vantaggio dell'utilizzo di un drawable vettoriale è l'immagine
e scalabilità. Può essere scalato senza perdita di qualità del display, il che significa
lo stesso file viene ridimensionato per densità di schermo diverse senza perdita della 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 usando più file XML al posto di 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 in utilizzando Aggiungi 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 assistenza Android, che fornisce
VectorDrawableCompat
e
AnimatedVectorDrawableCompat
corsi.
Informazioni sulla classe VectorDrawable
VectorDrawable
definisce un drawable statico
. In modo simile al formato SVG, ogni grafica vettoriale è definita come un albero
composta da oggetti path
e group
.
Ciascun path
contiene la geometria del contorno dell'oggetto e
group
contiene i dettagli della trasformazione. Tutti i percorsi sono tracciati
nello stesso ordine in cui appaiono nel file XML.
L'elemento Asset vettoriale studio offre un modo semplice per aggiungere una grafica vettoriale al progetto come file XML.
XML di esempio
Ecco un esempio di file XML VectorDrawable
che esegue il rendering di un'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 l'animazione alle proprietà di un vettore
grafica. Puoi definire una grafica vettoriale animata in tre distinti
di risorse o come singolo file XML che definisce l'intero drawable. Iniziamo
Per una migliore comprensione, esamina entrambi gli approcci: più file XML e singolo
XML.
File XML multipli
Utilizzando questo approccio, puoi definire tre file XML separati:
- Un file XML
VectorDrawable
. -
Un file XML
AnimatedVectorDrawable
che definisce il targetVectorDrawable
, scegliere come target percorsi e gruppi da animare, le proprietà e le animazioni definite comeObjectAnimator
oggettiAnimatorSet
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
file:
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'unica
tramite il formato XML del bundle. Al momento di creare l'app,
Il tag aapt
crea risorse separate e le fa riferimento nel
il vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e
è 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 drawable vettoriale e il drawable vettoriale animato su dispositivi con versioni della piattaforma precedenti
rispetto ad Android 5.0 (livello API 21) oppure usa fillColor
, fillType
e
strokeColor
con funzionalità inferiori 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 il supporto della compatibilità limitata per i vettori
di risorse generando file PNG in fase di creazione. Tuttavia, il vettore drawable
e le librerie di supporto drawable vettoriali animati offrono flessibilità
un'ampia compatibilità: è una libreria di supporto, quindi puoi utilizzarla con
Versioni della piattaforma Android tornando ad Android 2.1 (livello API 7 o versioni successive). Per configurare
per utilizzare librerie di supporto vettoriali, aggiungi vectorDrawables
al tuo file build.gradle
nel modulo dell'app.
Utilizza il seguente snippet di codice per configurare 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 usare VectorDrawableCompat
e
AnimatedVectorDrawableCompat
su tutti
su dispositivi con Android 4.0 (livello API 14) e versioni successive. Il modo in cui Android
carica gli elementi drawable, non tutti quelli che accettano un ID drawable, ad esempio in un file XML
supporta il caricamento di drawable vettoriali. La
Il pacchetto android.support.v7.appcompat
ha aggiunto un numero
di caratteristiche per semplificare l'uso dei drawable vettoriali. In primo luogo, quando utilizzi
android.support.v7.appcompat
pacchetto con
ImageView
o con sottoclassi come
ImageButton
e
FloatingActionButton
, puoi
utilizza il nuovo attributo app:srcCompat
per fare riferimento a drawable vettoriali
così come qualsiasi altra risorsa trainabile 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
setImageResource()
come in precedenza. Spazio di archiviazione usato: AppCompat
e app:srcCompat
è il metodo più infallibile per integrare
elementi disegnabili vettoriali nella tua app.
Support Library 25.4.0 e versioni successive supporta le seguenti funzionalità:
- Morphing del percorso (valutatore del PathType) utilizzato per la morphing da un percorso all'altro.
- Interpolazione del percorso: utilizzata per definire un tipo di dell'interpolatore (rappresentato come un percorso) al posto dell'interpolatore definito 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, in un percorso arbitrario, come parte 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
file:
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 di creare l'app,
Il tag aapt
crea risorse separate e le fa riferimento nel
il vettore animato. Questo approccio richiede Build Tools 24 o versioni successive e
è 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>