Vector Drawable: какво е, XML формат и как работи

Какво е Vector Drawable?

Vector Drawable е Android ресурс, който представява векторно изображение в XML формат, базиран на SVG (Scalable Vector Graphics) спецификацията. Google представи този формат в Android 5.0 (API 21) като алтернатива на растерните изображения за икони, илюстрации и други графични елементи на интерфейса.

За разлика от PNG, където изображението се съхранява като масив от пиксели с фиксиран размер, Vector Drawable описва формите математически — чрез координати на точки, криви на Безие, зъпълвания и контури. Това означава, че едно векторно изображение може да замени до шест PNG файла за различни пълътности на екрана (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), което радикално опростява поддръжката на графичните ресурси.

Форматът поддържа не само статични изображения, но и анимация чрез AnimatedVectorDrawable, както и адаптация към тъмна тема и персонализирани цветове чрез атрибутите на темата. От Android 7.0 (API 24) нататък, Vector Drawable поддържа също градиентни зъпълвания и сложни операции за изрязване (clipPath), което разширява възможностите за дизайн.

Основни компоненти на Vector Drawable

Всяка Vector Drawable съдържа основен елемент vector с параметри за ширина, височина и viewport — виртуална координатна система, в която се рисуват формите. Вътре се намират групи (group) и пътища (path), където path дефинира геометрията чрез последователност от команди: M (moveTo), L (lineTo), C (cubicTo), Z (close) и други. Всяко path може да има собствено зъпълване (fillColor) и контура (strokeColor), които могат да се позовават към ресурсите на темата.

Допълнителните елементи включват clip-path за изрязване, gradient за градиентни преходи и атрибути за адаптация към тъмна тема чрез атрибута android:theme. Всички цветове в Vector Drawable могат да бъдат зададени като препратки към атрибутите на темата (напр. ?attr/colorPrimary), което променя външия вид на иконите при смяна на темата без дублиране на ресурси.

Формат на Vector Drawable: XML структура

XML файлът на Vector Drawable се поставя в директорията res/drawable/ и има основен елемент <vector>. Вътре могат да има вложени <group> за организация на йерархията и <path> за описание на контурите. Всяко path съдържа атрибута pathData — низ от команди за рисуване в формата на SVG пътище.

<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>

В примера е описан кръг с радиус 10 единици в viewport 24×24. Параметърът fillColor се позовава към ресурс за цвят, а strokeWidth и strokeColor определят контурата. Размерите width и height се посочват в dp — това осигурява правилно мащабиране на екрани с различна пълътност на пикселите без допълнителни трансформации.

Групиране и трансформации

Елементът group позволява групиране на няколко path и прилагане на общи трансформации: завъртане (rotation), преместване (translateX, translateY) и мащабиране (scaleX, scaleY). Групите могат да бъдат вложени, което позволява създаването на сложна йерархия от стотици елементи без загуба на производителност.

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

Групирането с атрибута pivotX/pivotY се използва за анимация: част от изображението може да бъде завъртана или мащабирана независимо от другите елементи, което е особено полезно за създаване на анимирани икони на състояние (напр. зареждане → успех).

Vector Drawable срещу растерна графика

Изборът между векторна и растерна графика зависи от сценария на използване. Vector Drawable е идеален за икони, илюстрации и елементи на интерфейса с малко количество детайли, докато снимките и сложните изображения с хиляди цветове остават в растерни формати.

Според Android Performance Patterns (Google I/O 2016), замяната на PNG иконите с Vector Drawable намалява размера на APK с 40–60% за приложения с много графични ресурси. При визуализацията на сложни вектори със стотици path обаче натоварването на CPU се увеличава, затова за анимации и често преправяне се препоръчва използването на кеширани растри.

Кога да изберете Vector Drawable

Vector Drawable е оптимален за икони на интерфейса (лента за инструменти, навигация, състояния), логотипи, прости илюстрации и анимирани елементи. Форматът е особено изгоден при поддръжка на много екрани: вместо да генерирате PNG за шест пълътности, един XML файл е достатъчен. Това опростява поддръжката на дизайна и елиминира грешките за несъвпадение на размерите. За снимки и изображения с фотореалистични градиенти все още се използват растерни формати с WebP компресия.

Анимация на Vector Drawable

Android поддържа анимация на Vector Drawable чрез два механизма: AnimatedVectorDrawable (наличен от API 21) и AnimatedStateListDrawable. Първият позволява анимиране на path атрибутите — завъртане, преместване, промяна на цвята и формата. Вторият преключва между различни състояния (натискане, избиране) с гладко преходване.

AnimatedVectorDrawable използва три XML файла: самия Vector Drawable, ObjectAnimator с описание на анимацията и свързващия AnimatedVectorDrawable, който свързва target (името на групата или пътя) с аниматора. Анимацията може да променя fillColor, strokeColor, rotation, translateX/Y, scaleX/Y и дори pathData — тоест да трансформира една форма в друга по гладкия начин (morphing).

Пример за morphing анимация

Нека разгледаме анимация, в която иконата „плюс” се превръща в „кръст”. Основното ограничение: броят на pathData командите трябва да бъде едиакъв в началното и крайното състояние, иначе анимацията няма да работи.

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

Анимацията ObjectAnimator plus_to_close променя свойството pathData от началната форма „плюс” към формата „кръст” за 300 милисекунди. Системата автоматично интерполира координатите между двата набора от SVG команди за пътища. Такава анимация се използва масово в Material Design за гладки преходи на състоянията на бутоните и иконите.

Примери за код на Vector Drawable

Нека разгледаме пълен пример на XML вектор за иконата стрелка назад с поддръжка на тъмна тема. Цвятът се задава чрез препратка към атрибут на темата, което автоматично променя цвята на иконата при преключване между светла и тъмна тема без дублиране на ресурси.

<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>

Параметърът android:tint със стойност ?attr/colorControlNormal автоматично прилага системния цвят на елемента за управление — на светла тема е тъмносив, на тъмна — бял. Групата с име arrow позволява анимирането на тази икона чрез AnimatedVectorDrawable.

Зареждане на Vector Drawable от код

За програмно зареждане на Vector Drawable в Android се използва класът AppCompatResources.getDrawable() или методът ContextCompat.getDrawable(). В съвременните проекти на Jetpack Compose растерните и векторните Drawable се зареждат чрез painterResource, който автоматично открива формата на ресурса.

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
)

При използването на AppCompatResources.getDrawable(), библиотеката AppCompat сама избира подходящата версия на drawable в зависимост от API нивото: на устройства преди Android 5.0 (API 21) може да се използва растерна резервна версия (fallback), на по-новите — Vector Drawable. В Jetpack Compose, painterResource управлява тази съвместимост автоматично.