Vector Drawable: bu nədir, XML formatı və necə işləyir

Vector Drawable nədir?

Vector Drawable — SVG (Scalable Vector Graphics) spesifikasiyasına əsaslanan, XML formatında vektor şəklini təqdim edən Android resursudur. Google bu formatı Android 5.0 (API 21)-də ikonlar, illüstrasiyalar və digər interfeys qrafik elementləri üçün raster şəkillərə alternativ olaraq təqdim etdi.

PNG-dən fərqli olaraq, şəklin sabit ölçülü piksel massivi kimi saxlandığı halda, Vector Drawable formaları riyazi olaraq — nöqtələrin koordinatları, Bezier əyriləri, doldurmalar və konturlar vasitəsilə təsvir edir. Bu o deməkdir ki, bir vektor şəkli müxtəlif ekran sıxlıqları (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) üçün altı PNG faylını əvəz edə bilər ki, bu da qrafik resursların saxlanmasını köklü şəkildə asanlaşdırır.

Format təkcə statik şəkilləri deyil, həm də AnimatedVectorDrawable vasitəsilə animasiyanı, həmçinin qaranlıq mövzuya uyğunlaşma və mövzu atributları vasitəsilə fərdi rəngləri dəstəkləyir. Android 7.0 (API 24)-dən etibarən Vector Drawable həmçinin gradient doldurmaları və mürəkkəb kəsmə əməliyyatlarını (clipPath) dəstəkləyir ki, bu da dizayn imkanlarını genişləndirir.

Vector Drawable-ın əsas komponentləri

Hər Vector Drawable formaların çəkildiyi virtual koordinat sistemi olan en, hündürlük və viewport parametrləri ilə vector əsas elementini ehtiva edir. Daxildə qruplar (group) və yollar (path) yerləşir, burada path M (moveTo), L (lineTo), C (cubicTo), Z (close) və digər komandaların ardıcıllığı ilə həndəsəni təyin edir. Hər path-ın mövzu resurslarına istinad edə bilən öz doldurması (fillColor) və konturu (strokeColor) ola bilər.

Əlavə elementlərə kəsmə üçün clip-path, gradient keçidləri üçün gradient və android:theme atributu vasitəsilə qaranlıq mövzuya uyğunlaşma atributları daxildir. Vector Drawable-də bütün rənglər mövzu atributlarına istinadlar kimi təyin edilə bilər (məsələn, ?attr/colorPrimary), bu da resursları təkrarlamadan mövzu dəyişikliyi zamanı ikonların görünüşünü dəyişir.

Vector Drawable formatı: XML strukturu

Vector Drawable XML faylı res/drawable/ qovluğunda yerləşdirilir və <vector> əsas elementinə malikdir. İçəridə iyerarxiyanı təşkil etmək üçün <group> və konturları təsvir etmək üçün <path> ola bilər. Hər path SVG yol formatında rəsm komandaları sətri olan pathData atributunu ehtiva edir.

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

Nümunədə 24×24 viewport daxilində radiusu 10 vahid olan dairə təsvir edilmişdir. fillColor parametri rəng resursuna istinad edir, strokeWidth və strokeColor isə konturu təyin edir. width və height ölçüləri dp ilə göstərilir — bu, əlavə çevirmələr olmadan müxtəlif piksel sıxlığına malik ekranlarda düzgün miqyaslamanı təmin edir.

Qruplaşdırma və transformasiyalar

group elementi bir neçə path-ı qruplaşdırmağa və onlara ümumi transformasiyalar tətbiq etməyə imkan verir: döndərmə (rotation), yerdəyişmə (translateX, translateY) və miqyaslama (scaleX, scaleY). Qruplar iç-içə ola bilər ki, bu da performans itkisi olmadan yüzlərlə elementdən ibarət mürəkkəb iyerarxiya yaratmağa imkan verir.

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

pivotX/pivotY atributu ilə qruplaşdırma animasiya üçün istifadə olunur: şəklin bir hissəsini digər elementlərdən asılı olmayaraq döndərmək və ya miqyaslamaq olar ki, bu da animasiya olunmuş vəziyyət ikonları (məsələn, yükləmə → uğur) yaratmaq üçün xüsusilə faydalıdır.

Vector Drawable vs raster qrafika

Vektor və raster qrafika arasında seçim istifadə ssenarisindən asılıdır. Vector Drawable az detallı ikonlar, illüstrasiyalar və interfeys elementləri üçün idealdır, minlərlə rəngə malik fotoşəkillər və mürəkkəb şəkillər isə raster formatlarda qalır.

Android Performance Patterns-ə (Google I/O 2016) görə, PNG ikonlarının Vector Drawable ilə əvəz edilməsi çox sayda qrafik resursu olan tətbiqlər üçün APK ölçüsünü 40–60% azaldır. Bununla belə, yüzlərlə path-a malik mürəkkəb vektorların render edilməsi zamanı CPU yükü artır, buna görə də animasiyalar və tez-tez yenidən çəkilmələr üçün əvvəlcədən keşlənmiş rasterlərdən istifadə tövsiyə olunur.

Nə vaxt Vector Drawable seçməli

Vector Drawable interfeys ikonları (alətlər paneli, naviqasiya, statuslar), loqolar, sadə illüstrasiyalar və animasiya olunmuş elementlər üçün optimaldır. Format çoxsaylı ekranların dəstəklənməsi zamanı xüsusilə sərfəlidir: altı sıxlıq üçün PNG yaratmaq əvəzinə bir XML faylı kifayətdir. Bu, dizaynın saxlanmasını asanlaşdırır və ölçü uyğunsuzluğu səhvlərini aradan qaldırır. Fotorealistik gradientlərə malik fotoşəkillər və şəkillər üçün hələ də WebP sıxılması ilə raster formatlardan istifadə olunur.

Vector Drawable animasiyası

Android Vector Drawable animasiyasını iki mexanizm vasitəsilə dəstəkləyir: AnimatedVectorDrawable (API 21-dən mövcuddur) və AnimatedStateListDrawable. Birincisi path atributlarını — döndərmə, yerdəyişmə, rəng və forma dəyişikliyini animasiya etməyə imkan verir. İkincisi hamar keçidlə müxtəlif vəziyyətlər (basma, seçmə) arasında keçid edir.

AnimatedVectorDrawable üç XML faylından istifadə edir: Vector Drawable-ın özü, animasiya təsviri ilə ObjectAnimator və target-i (qrup və ya yolun adı) animatorla birləşdirən AnimatedVectorDrawable. Animasiya fillColor, strokeColor, rotation, translateX/Y, scaleX/Y və hətta pathData-nı dəyişə bilər — yəni bir formanı digərinə hamar şəkildə çevirə bilər (morfinq).

Morfinq animasiyası nümunəsi

«Plus» ikonasının «x» işarəsinə çevrildiyi animasiyaya baxaq. Əsas məhdudiyyət: pathData komandalarının sayı başlanğıc və son vəziyyətdə eyni olmalıdır, əks halda animasiya işləməyəcək.

<!-- 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 animasiyası pathData xüsusiyyətini ilkin «plus» formasından «x» formasına 300 millisaniyə ərzində dəyişir. Sistem iki SVG yol komandaları dəsti arasında koordinatları avtomatik interpolyasiya edir. Belə animasiya Material Design-də düymə və ikon vəziyyətlərinin hamar keçidləri üçün geniş istifadə olunur.

Vector Drawable kod nümunələri

Qaranlıq mövzu dəstəyi ilə geri ox ikonası üçün tam XML vektor nümunəsinə baxaq. Rəng mövzu atributuna istinadla təyin edilir ki, bu da resursları təkrarlamadan açıq və qaranlıq mövzu arasında keçid zamanı ikonanın rəngini avtomatik dəyişir.

<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 parametri ?attr/colorControlNormal dəyəri ilə avtomatik olaraq sistem idarəetmə elementi rəngini tətbiq edir — açıq mövzuda bu tünd boz, qaranlıqda isə ağdır. arrow adlı qrup bu ikonanı AnimatedVectorDrawable vasitəsilə animasiya etməyə imkan verir.

Vector Drawable-ın koddan yüklənməsi

Android-də Vector Drawable-ın proqramlı yüklənməsi üçün AppCompatResources.getDrawable() sinfi və ya ContextCompat.getDrawable() metodu istifadə olunur. Jetpack Compose-da müasir layihələrdə raster və vektor Drawable resursların formatını avtomatik təyin edən painterResource vasitəsilə yüklənir.

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() istifadə edərkən AppCompat kitabxanası API səviyyəsindən asılı olaraq müvafiq drawable versiyasını özü seçir: Android 5.0 (API 21)-dən köhnə cihazlarda raster ehtiyat versiya (fallback), daha yenilərində isə Vector Drawable istifadə oluna bilər. Jetpack Compose-da painterResource bu uyğunluğu avtomatik idarə edir.