Punti chiave
- Un disegno vettoriale è una grafica vettoriale definita in un file XML come un insieme di punti, linee e curve insieme alle informazioni sui colori associate.
- Gli elementi di disegno vettoriali sono scalabili, ovvero possono essere ridimensionati senza perdere la qualità della visualizzazione. Questo le rende ideali per l'utilizzo nelle app per Android, in quanto possono contribuire a ridurre le dimensioni dei file APK e a migliorare le prestazioni.
- Puoi creare disegnabili vettoriali in Android Studio facendo clic con il tasto destro del mouse sulla cartella disegnabile nel progetto e selezionando Nuovo > Asset vettoriale. Puoi anche importare file SVG in Android Studio come disegni vettoriali.
Introduzione
Un elementoVectorDrawable
è una grafica vettoriale definita
in un file XML come un insieme di punti, linee e curve insieme alle relative informazioni
sui colori. Il principale vantaggio dell'utilizzo di un elemento disegnabile vettoriale è la scalabilità dell'immagine. Può essere scalato senza perdere la qualità di visualizzazione, il che significa che lo stesso file viene ridimensionato per diverse densità dello schermo senza perdere la qualità dell'immagine.
Ciò comporta file APK di dimensioni inferiori e una minore manutenzione per gli sviluppatori. Puoi anche utilizzare immagini vettoriali per le animazioni, utilizzando più file XML anziché più immagini per ogni risoluzione di visualizzazione.
Questa pagina e il video di seguito forniscono una panoramica su come creare disegnabili vettoriali in XML. Android Studio è in grado di convertire i file SVG nel formato VectorDrawable, come descritto nell'articolo Aggiungere grafica vettoriale a più densità.
Android 5.0 (livello API 21) è stata la prima versione a supportare ufficialmente gli trainabili vettoriali con VectorDrawable
e AnimatedVectorDrawable
, ma puoi supportare le versioni precedenti con la libreria di supporto Android, che fornisce le classi VectorDrawableCompat
e AnimatedVectorDrawableCompat
.
Informazioni sulla classe VectorDrawable
VectorDrawable
definisce un oggetto disegnabile statico. Analogamente al formato SVG, ogni grafica vettoriale è definita come una gerarchia ad albero, composta da oggetti path
e group
.
Ogni 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 un'immagine vettoriale al progetto come file XML.
XML di esempio
Ecco un file XML VectorDrawable
di esempio che esegue il rendering dell'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 una grafica vettoriale. Puoi definire un'immagine vettoriale animata come tre file di risorse separati o come un singolo file XML che definisce l'intero tracciabile. Diamo un'occhiata a entrambi gli approcci per una migliore comprensione: più file XML e singolo file XML.
Più file XML
Con questo approccio, puoi definire tre file XML separati:
- Un file XML
VectorDrawable
. -
Un file XML
AnimatedVectorDrawable
che definisce il valoreVectorDrawable
di destinazione, i percorsi e i gruppi di destinazione da animare, le proprietà e le animazioni definite come oggettiObjectAnimator
oAnimatorSet
. - 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 Animator 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
Con questo approccio, puoi unire i file XML correlati in un singolo file XML tramite il formato XML bundle. Al momento della creazione dell'app, il tag aapt
crea risorse separate e vi fa riferimento nel vettore animato. Questo approccio richiede strumenti di build 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 di disegno 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 utilizza 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 di compatibilità limitato per gli elementi di disegno vettoriali generando file PNG al momento della creazione. Tuttavia, le librerie di supporto VectorDrawable e Animation Vectorportable offrono flessibilità e un'ampia compatibilità: è una libreria di supporto che puoi utilizzare con tutte le versioni della piattaforma Android fino ad Android 2.1 (livello API 7 e versioni successive). Per configurare la tua app in modo che utilizzi librerie di supporto vettoriali, aggiungi l'elemento vectorDrawables
al tuo file build.gradle
nel modulo dell'app.
Utilizza il seguente snippet di codice per configurare l'elemento vectorDrawables
:
trendy
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
trendy
// 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 gli elementi disegnabili, non ogni posizione che accetta un ID disegnabile, come in un file XML, supporta il caricamento di disegnabili vettoriali. Al pacchetto android.support.v7.appcompat
sono state aggiunte una serie di funzionalità per semplificare l'utilizzo delle tracce vettoriali. Innanzitutto, quando utilizzi il
pacchetto android.support.v7.appcompat
con
ImageView
o con sottoclassi come
ImageButton
e
FloatingActionButton
, puoi
utilizzare il nuovo attributo app:srcCompat
per fare riferimento ai disegni vettoriali
oltre che a qualsiasi altro disegnabile disponibile per android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Per modificare gli elementi disegnabili in fase di runtime, puoi utilizzare il metodo setImageResource()
come prima. L'utilizzo di AppCompat
e app:srcCompat
è il metodo più infallibile per integrare
elementi di disegno vettoriali nella tua app.
La Libreria di supporto 25.4.0 e versioni successive supporta le seguenti funzionalità:
- Morphing del percorso (valutatore del tipo di percorso) Utilizzato per modificare un percorso in un altro.
- Interpolazione del percorso Utilizzata per definire un interpolatore flessibile (rappresentato come un percorso) al posto di interpolatori definiti dal sistema come LinearInterpolator.
La Libreria di supporto 26.0.0-beta1 e versioni successive supporta le seguenti funzionalità:
- Sposta lungo il percorso L'oggetto geometrico può spostarsi, lungo 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 Animator 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 vi fa riferimento nel vettore animato. Questo approccio richiede strumenti di build 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>