Vector Drawable: چیست، فرمت XML و نحوه کار

Vector Drawable چیست؟

Vector Drawable منبع Android است که یک تصویر برداری در قالب XML را بر اساس مشخصات SVG (Scalable Vector Graphics) نمایش می‌دهد. Google این قالب را در Android 5.0 (API 21) به عنوان جایگزینی برای تصاویر شطرنجی برای آیکون‌ها، تصاویر و سایر عناصر گرافیکی رابط معرفی کرد.

برخلاف PNG که در آن تصویر به عنوان آرایه‌ای از پیکسل‌های با اندازه ثابت ذخیره می‌شود، Vector Drawable اشکال را به صورت ریاضی — از طریق مختصات نقاط، منحنی‌های Bezier، پرکننده‌ها و خطوط — توصیف می‌کند. این بدان معناست که یک تصویر برداری می‌تواند تا شش فایل 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>

در مثال، دایره‌ای با شعاع ۱۰ واحد در 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 را برای برنامه‌های دارای منابع گرافیکی زیاد ۴۰–۶۰٪ کاهش می‌دهد. با این حال، هنگام رندر بردارهای پیچیده با صدها path، بار CPU افزایش می‌یابد، بنابراین برای انیمیشن‌ها و بازنقاشی مکرر استفاده از rasterهای کش شده توصیه می‌شود.

چه زمانی Vector Drawable را انتخاب کنیم

Vector Drawable برای آیکون‌های رابط (نوار ابزار، ناوبری، وضعیت‌ها)، لوگوها، تصاویر ساده و عناصر متحرک بهینه است. این قالب به ویژه هنگام پشتیبانی از صفحه‌های متعدد مفید است: به جای تولید PNG برای شش تراکم، یک فایل XML کافی است. این کار نگهداری طراحی را ساده می‌کند و خطاهای عدم تطابق اندازه را از بین می‌برد. برای عکس‌ها و تصاویر با گرادیان‌های فوتورئالیستی همچنان از قالب‌های شطرنجی با فشرده‌سازی WebP استفاده می‌شود.

انیمیشن Vector Drawable

Android انیمیشن Vector Drawable را از طریق دو مکانیزم پشتیبانی می‌کند: AnimatedVectorDrawable (قابل دسترس از API 21) و AnimatedStateListDrawable. اولی امکان انیمیشن ویژگی‌های path — چرخش، جابجایی، تغییر رنگ و شکل — را فراهم می‌کند. دومی بین حالت‌های مختلف (فشار، انتخاب) با انتقال روان جابجا می‌شود.

AnimatedVectorDrawable از سه فایل XML استفاده می‌کند: خود Vector Drawable، ObjectAnimator با توضیحات انیمیشن و AnimatedVectorDrawable اتصال‌دهنده که target (نام گروه یا مسیر) را به animator متصل می‌کند. انیمیشن می‌تواند 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 را از شکل اولیه «بعلاوه» به شکل «ضربدر» در ۳۰۰ میلی‌ثانیه تغییر می‌دهد. سیستم به طور خودکار مختصات را بین دو مجموعه دستورات مسیر 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 این سازگاری را به طور خودکار مدیریت می‌کند.