Vector Drawable: bu nima, XML format va qanday ishlaydi

Vector Drawable nima?

Vector Drawable — SVG (Scalable Vector Graphics) spetsifikatsiyasiga asoslangan, XML formatidagi vektor tasvirni ifodalovchi Android resursidir. Google ushbu formatni Android 5.0 (API 21) da ikonkalar, illyustratsiyalar va boshqa interfeys grafik elementlari uchun raster tasvirlarga muqobil sifatida taqdim etdi.

PNG dan farqli o‘laroq, tasvir sobit o‘lchamdagi piksellar massivi sifatida saqlanadi, Vector Drawable esa shakllarni matematik tarzda — nuqtalar koordinatalari, Bezier egri chiziqlari, to‘ldirishlar va konturlar orqali tavsiflaydi. Bu shuni anglatadiki, bitta vektor tasvir turli ekran zichliklari (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) uchun olti PNG faylni almashtirishi mumkin, bu esa grafik resurslarni saqlashni tubdan soddalashtiradi.

Format nafaqat statik tasvirlarni, balki AnimatedVectorDrawable orqali animatsiyani, shuningdek, qorong‘u mavzuga moslashish va mavzu atributlari orqali shaxsiy ranglarni qo‘llab-quvvatlaydi. Android 7.0 (API 24) dan boshlab, Vector Drawable gradient to‘ldirishlar va murakkab kesish operatsiyalarini (clipPath) ham qo‘llab-quvvatlaydi, bu esa dizayn imkoniyatlarini kengaytiradi.

Vector Drawable ning asosiy komponentlari

Har bir Vector Drawable shakllar chiziladigan virtual koordinatalar tizimi bo‘lgan kenglik, balandlik va viewport parametrlari bilan vector ildiz elementini o‘z ichiga oladi. Ichkarida guruhlar (group) va yo‘llar (path) joylashgan bo‘lib, bu erda path M (moveTo), L (lineTo), C (cubicTo), Z (close) va boshqa buyruqlar ketma-ketligi orqali geometriyani aniqlaydi. Har bir path mavzu resurslariga murojaat qilishi mumkin bo‘lgan o‘z to‘ldirishiga (fillColor) va konturiga (strokeColor) ega bo‘lishi mumkin.

Qo‘shimcha elementlarga kesish uchun clip-path, gradient o‘tishlari uchun gradient va android:theme atributi orqali qorong‘u mavzuga moslashish atributlari kiradi. Vector Drawable dagi barcha ranglar mavzu atributlariga havolalar sifatida belgilanishi mumkin (masalan, ?attr/colorPrimary), bu esa resurslarni takrorlamasdan mavzu o‘zgarganda ikonkalarning ko‘rinishini o‘zgartiradi.

Vector Drawable formati: XML tuzilishi

Vector Drawable XML fayli res/drawable/ katalogiga joylashtiriladi va <vector> ildiz elementiga ega. Ichkarida ierarxiyani tashkil qilish uchun <group> va konturlarni tavsiflash uchun <path> bo‘lishi mumkin. Har bir path SVG yo‘l formatidagi chizish buyruqlari qatori bo‘lgan pathData atributini o‘z ichiga oladi.

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

Misolda 24×24 viewport ichida radiusi 10 birlik bo‘lgan doira tasvirlangan. fillColor parametri rang resursiga murojaat qiladi, strokeWidth va strokeColor esa konturni belgilaydi. width va height o‘lchamlari dp da ko‘rsatiladi — bu qo‘shimcha o‘zgartirishlarsiz turli piksel zichligidagi ekranlarda to‘g‘ri masshtablashni ta’minlaydi.

Guruhlash va transformatsiyalar

group elementi bir nechta path ni guruhlash va ularga umumiy transformatsiyalarni qo‘llash imkonini beradi: aylantirish (rotation), siljitish (translateX, translateY) va masshtablash (scaleX, scaleY). Guruhlar ichma-ich bo‘lishi mumkin, bu esa ishlashni yo‘qotmasdan yuzlab elementlardan murakkab ierarxiya yaratish imkonini beradi.

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

pivotX/pivotY atributi bilan guruhlash animatsiya uchun ishlatiladi: tasvirning bir qismini boshqa elementlardan mustaqil ravishda aylantirish yoki masshtablash mumkin, bu ayniqsa animatsion holat ikonkalarini (masalan, yuklash → muvaffaqiyat) yaratish uchun foydalidir.

Vector Drawable va raster grafika

Vektor va raster grafika o‘rtasidagi tanlov foydalanish stsenariysiga bog‘liq. Vector Drawable kam detalli ikonkalar, illyustratsiyalar va interfeys elementlari uchun ideal, minglab ranglarga ega fotosuratlar va murakkab tasvirlar esa raster formatlarda qoladi.

Android Performance Patterns (Google I/O 2016) ga ko‘ra, PNG ikonkalarini Vector Drawable bilan almashtirish ko‘plab grafik resurslarga ega ilovalar uchun APK hajmini 40–60% ga kamaytiradi. Biroq, yuzlab path ga ega murakkab vektorlarni render qilishda CPU yuki ortadi, shuning uchun animatsiyalar va tez-tez qayta chizishlar uchun keshlashtirilgan rasterlardan foydalanish tavsiya etiladi.

Qachon Vector Drawable ni tanlash kerak

Vector Drawable interfeys ikonkalari (asboblar paneli, navigatsiya, statuslar), logotiplar, oddiy illyustratsiyalar va animatsion elementlar uchun maqbuldir. Format ko‘plab ekranlarni qo‘llab-quvvatlashda ayniqsa foydalidir: olti zichlik uchun PNG yaratish o‘rniga bitta XML fayl yetarli. Bu dizaynni saqlashni soddalashtiradi va o‘lcham nomuvofiqligi xatolarini bartaraf qiladi. Fotorealistik gradientlarga ega fotosuratlar va tasvirlar uchun hali ham WebP siqish bilan raster formatlardan foydalaniladi.

Vector Drawable animatsiyasi

Android Vector Drawable animatsiyasini ikki mexanizm orqali qo‘llab-quvvatlaydi: AnimatedVectorDrawable (API 21 dan mavjud) va AnimatedStateListDrawable. Birinchisi path atributlarini — aylantirish, siljitish, rang va shakl o‘zgarishini animatsiya qilish imkonini beradi. Ikkinchisi silliq o‘tish bilan turli holatlar (bosish, tanlash) o‘rtasida almashadi.

AnimatedVectorDrawable uchta XML fayldan foydalanadi: Vector Drawable ning o‘zi, animatsiya tavsifi bilan ObjectAnimator va target ni (guruh yoki yo‘l nomi) animator bilan bog‘laydigan AnimatedVectorDrawable. Animatsiya fillColor, strokeColor, rotation, translateX/Y, scaleX/Y va hatto pathData ni o‘zgartirishi mumkin — ya’ni bir shaklni boshqasiga silliq aylantirishi mumkin (morflashtirish).

Morflashtirish animatsiyasi namunasi

„Plus” ikonkasi „x’” belgisiga aylanadigan animatsiyani ko‘rib chiqamiz. Asosiy cheklov: pathData buyruqlari soni boshlang‘ich va yakuniy holatda bir xil bo‘lishi kerak, aks holda animatsiya ishlamaydi.

<!-- 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 animatsiyasi pathData xususiyatini boshlang‘ich „plus” shaklidan „x’” shakliga 300 millisekund ichida o‘zgartiradi. Tizim ikki SVG yo‘l buyruqlar to‘plami o‘rtasidagi koordinatalarni avtomatik interpolyatsiya qiladi. Bunday animatsiya Material Design da tugmalar va ikonka holatlarining silliq o‘tishlari uchun keng qo‘llaniladi.

Vector Drawable kod namunalari

Qorong‘u mavzuni qo‘llab-quvvatlaydigan orqa strelka ikonkasi uchun to‘liq XML vektor misolini ko‘rib chiqamiz. Rang mavzu atributiga havola orqali belgilanadi, bu esa resurslarni takrorlamasdan yorug‘ va qorong‘u mavzu o‘rtasida almashishda ikonka rangini avtomatik o‘zgartiradi.

<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 qiymati bilan avtomatik ravishda tizim boshqaruv elementi rangini qo‘llaydi — yorug‘ mavzuda bu to‘q kul rang, qorong‘uda esa oq rang. arrow nomli guruh ushbu ikonkani AnimatedVectorDrawable orqali animatsiya qilish imkonini beradi.

Vector Drawable ni koddan yuklash

Android da Vector Drawable ni dasturiy yuklash uchun AppCompatResources.getDrawable() sinfi yoki ContextCompat.getDrawable() metodi ishlatiladi. Jetpack Compose dagi zamonaviy loyihalarda raster va vektor Drawable lar resurs formatini avtomatik aniqlaydigan painterResource orqali yuklanadi.

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() dan foydalanishda AppCompat kutubxonasi API darajasiga qarab tegishli drawable versiyasini o‘zi tanlaydi: Android 5.0 (API 21) dan eski qurilmalarda raster zaxira versiya (fallback), yangilarida esa Vector Drawable ishlatilishi mumkin. Jetpack Compose da painterResource bu moslikni avtomatik boshqaradi.