Vector Drawable: mi ez, XML formátum és hogyan működik

Mi az a Vector Drawable?

Vector Drawable egy Android erőforrás, amely vektorképet jelenít meg XML formátumban, az SVG (Scalable Vector Graphics) specifikáció alapján. A Google ezt a formátumot az Android 5.0 (API 21) verzióban vezette be a raszterképek alternatívájaként ikonok, illusztrációk és egyéb grafikus interfészelemek számára.

A PNG-től eltérően, ahol a kép fix méretű pixeltömbként van tárolva, a Vector Drawable matematikailag írja le a formákat — pontok koordinátáin, Bezier-görbéken, kitöltéseken és körvonalakon keresztül. Ez azt jelenti, hogy egyetlen vektorkép akár hat PNG-fájlt is helyettesíthet különböző képernyősűrűségekhez (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), ami győkeresen leegyszerűsíti a grafikus erőforrások karbantartását.

A formátum nemcsak statikus képeket, hanem animációt is támogat az AnimatedVectorDrawable révén, valamint a sötét témához való alkalmazkodást és egyéni színeket a témaattribútumokon keresztül. Az Android 7.0 (API 24) verziótól kezdve a Vector Drawable támogatja a gradienseket és az összetett vágási műveleteket (clipPath) is, ami kibővíti a tervezési lehetőségeket.

A Vector Drawable fő összetevői

Minden Vector Drawable tartalmazza a vector gyökérelemet szélesség, magasság és viewport paraméterekkel — egy virtuális koordináta-rendszert, amelyben a formák rajzolódnak. Belül csoportok (group) és útvonalak (path) találhatók, ahol a path parancsok sorozatával határozza meg a geometriát: M (moveTo), L (lineTo), C (cubicTo), Z (close) és mások. Minden path-nek lehet saját kitöltése (fillColor) és körvonala (strokeColor), amelyek témaerőforrásokra hivatkozhatnak.

További elemek közé tartozik a clip-path vágáshoz, a gradient átmenetekhez és a sötét témához való alkalmazkodás attribútumai az android:theme attribútumon keresztül. A Vector Drawable-ban lévő összes szín megadható témaattribútumokra való hivatkozként (pl. ?attr/colorPrimary), ami megváltoztatja az ikonok megjelenését a téma váltásakor az erőforrások duplikálása nélkül.

Vector Drawable formátum: XML struktúra

A Vector Drawable XML-fájlja a res/drawable/ könyvtárba kerül, és a <vector> gyökérelemmel rendelkezik. Belül lehetnek egymásba ágyazott <group> elemek a hierarchia szervezéséhez és <path> a körvonalak leírásához. Minden path tartalmazza a pathData attribútumot — egy rajzolóparancsokat tartalmazó sztringet SVG útvonal formátumban.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

A példában egy 10 egység sugarú kör van leírva egy 24×24-es viewport-ban. A fillColor paraméter egy szín erőforrásra hivatkozik, míg a strokeWidth és strokeColor a körvonalat határozza meg. A width és height méretek dp-ben vannak megadva — ez biztosítja a helyes skálázást a különböző pixelsűrűségű képernyőkön további átalakítások nélkül.

Csoportosítás és transzformációk

A group elem lehetővé teszi több path csoportosítását és közös transzformációk alkalmazását: forgatás (rotation), eltolás (translateX, translateY) és skálázás (scaleX, scaleY). A csoportok egymásba ágyazhatók, ami lehetővé teszi összetett hierarchiák létrehozását tucatnyi elemből teljesítményveszteség nélkül.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

A pivotX/pivotY attribútummal történő csoportosítást animációhoz használják: a kép egy része függetlenül forgatható vagy skálázható a többi elemtől, ami különösen hasznos animált állapotikonok (pl. betöltés → siker) létrehozásához.

Vector Drawable vs rasztergrafika

A vektor és rasztergrafika közötti választás a használati forgatókönyvtől függ. A Vector Drawable ideális ikonok, illusztrációk és kevés részlettel rendelkező interfészelemek számára, míg a fényképek és ezrek színt tartalmazó összetett képek raszterformátumokban maradnak.

Az Android Performance Patterns (Google I/O 2016) szerint a PNG-ikonok Vector Drawable-re cserélése 40–60%-kal csökkenti az APK méretét a sok grafikus erőforrással rendelkező alkalmazásoknál. Azonban összetett, tucatnyi path-t tartalmazó vektorok megjelenítésekor a CPU-terhelés megnő, ezért animációkhoz és gyakori újarajzoláshoz a gyorsítótárba helyezett raszterek használata ajánlott.

Mikor válasszuk a Vector Drawable-t

Vector Drawable optimális interfészikonokhoz (eszköztár, navigáció, állapotok), logókhoz, egyszerű illusztrációkhoz és animált elemekhez. A formátum különösen előnyös több képernyő támogatásakor: hat sűrűséghez PNG generálása helyett egyetlen XML-fájl elegendő. Ez leegyszerűsíti a tervezés karbantartását és kiküszöböli a méret-eltérési hibákat. Fényképekhez és fotorealisztikus átmenetekkel rendelkező képekhez továbbra is WebP tömörítéssel ellátott raszterformátumokat használnak.

Vector Drawable animáció

Az Android két mechanizmuson keresztül támogatja a Vector Drawable animációját: AnimatedVectorDrawable (API 21-től elérhető) és AnimatedStateListDrawable. Az első lehetővé teszi a path attribútumok animálását — forgatás, eltolás, szín- és formaátváltozás. A második különböző állapotok (nyomás, kiválasztás) között vált sima átmenettel.

Az AnimatedVectorDrawable három XML-fájlt használ: magát a Vector Drawable-t, az ObjectAnimator-t az animáció leírásával és az összekötő AnimatedVectorDrawable-t, amely a target-et (csoport vagy útvonal neve) összeköti az animátorral. Az animáció változtathatja a fillColor, strokeColor, rotation, translateX/Y, scaleX/Y és akár a pathData értékét is — vagyis simán átalakíthatja az egyik formát a másikba (morphing).

Példa morphing animációra

Tekintsünk egy animációt, amelyben a „plusz” ikon „keriszt” ikonná alakul át. A fő korlátozás: a pathData parancsok számának meg kell egyeznie a kezdeti és végállapotban, különben az animáció nem működik.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

Az ObjectAnimator plus_to_close animáció 300 ezredmásodperc alatt változtatja a pathData tulajdonságot a kezdeti „plusz” formáról a „keriszt” formára. A rendszer automatikusan interpolálja a koordinátákat a két SVG útvonalparancs-készlet között. Az ilyen animációt széles körben használják a Material Design-ban a gombok és ikonok állapotának sima átmeneteihez.

Vector Drawable kódpéldák

Nézzünk meg egy teljes XML vektor példát a vissza nyíl ikonhoz sötét téma támogatással. A szín egy témaattribútumra való hivatkozással van meghatározva, ami automatikusan megváltoztatja az ikon színét a világos és sötét téma közötti váltáskor, erőforrások duplikálása nélkül.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Az android:tint paraméter ?attr/colorControlNormal értékkel automatikusan alkalmazza a vezérlőelem rendszerszínét — világos témában ez sötétszürke, sötétben fehér. Az arrow nevű csoport lehetővé teszi ennek az ikonnak az animálását az AnimatedVectorDrawable révén.

Vector Drawable betöltése kódból

A Vector Drawable programozott betöltéséhez Androidban az AppCompatResources.getDrawable() osztály vagy a ContextCompat.getDrawable() metódus használható. Modern Jetpack Compose projektekben a raszter és vektor Drawable-ok a painterResource segítségével tölthetők be, amely automatikusan felismeri az erőforrás formátumát.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Az AppCompatResources.getDrawable() használatakor az AppCompat könyvtár maga választja ki a megfelelő drawable verziót az API szinttől függően: az Android 5.0 (API 21) előtti eszközökön raszter tartalékverzió (fallback) használható, az újabbakon Vector Drawable. A Jetpack Compose-ban a painterResource automatikusan kezeli ezt a kompatibilitást.