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 مع معلمات العرض والارتفاع ومنفذ العرض — نظام إحداثيات افتراضي تُرسم فيه الأشكال. في الداخل توجد مجموعات (group) ومسارات (path)، حيث يحدد المسار الهندسة عبر سلسلة من الأوامر: M (moveTo)، L (lineTo)، C (cubicTo)، Z (close) وغيرها. يمكن أن يكون لكل مسار تعبئة fillColor وحدود strokeColor خاصة به، والتي يمكن أن تشير إلى موارد السمة.

تتضمن العناصر الإضافية clip-path للقص، gradient للانتقالات المتدرجة وسمات التكيف مع السمة الداكنة عبر السمة android:theme. يمكن تحديد جميع الألوان في Vector Drawable كمراجع لسمات السمة (مثلاً ?attr/colorPrimary)، مما يغير مظهر الأيقونات عند تغيير السمة دون ازدواجية الموارد.

تنسيق Vector Drawable: بنية XML

يوضع ملف XML لـ Vector Drawable في دليل res/drawable/ وله عنصر جذر . في الداخل يمكن أن تكون عناصر متداخلة لتنظيم التسلسل الهرمي وعناصر لوصف الخطوط. يحتوي كل مسار على سمة 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 وحدات في منفذ عرض 24×24. تشير المعلمة fillColor إلى مورد لون، بينما يحدد strokeWidth وstrokeColor الحدود. يُحدد العرض والارتفاع بـ dp — مما يضمن تحجيم صحيح على الشاشات بكثافات بكسل مختلفة دون تحويلات إضافية.

التجميع والتحويلات

يسمح عنصر group بتجميع مسارات متعددة وتطبيق تحويلات مشتركة عليها: التدوير (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% للتطبيقات التي تحتوي على عدد كبير من الموارد الرسومية. ومع ذلك، عند عرض متجهات معقدة بمئات المسارات، يزداد حمل المعالج، لذلك يُنصح باستخدام نقطيات مخبأة مسبقاً للرسوم المتحركة وإعادة الرسم المتكررة.

متى تختار Vector Drawable

Vector Drawable مثالي لأيقونات الواجهة (شريط الأدوات، التنقل، الحالات)، والشعارات، والرسوم التوضيحية البسيطة والعناصر المتحركة. التنسيق مفيد بشكل خاص عند دعم شاشات متعددة: بدلاً من إنشاء PNG لست كثافات، يكفي ملف XML واحد. هذا يبسط صيانة التصميم ويزيل أخطاء عدم تطابق الأحجام. للصور الفوتوغرافية والصور ذات التدرجات الواقعية، لا تزال التنسيقات النقطية مع ضغط WebP مستخدمة.

الرسوم المتحركة لـ Vector Drawable

يدعم Android الرسوم المتحركة لـ Vector Drawable عبر آليتين: AnimatedVectorDrawable (متاح منذ API 21) وAnimatedStateListDrawable. الأولى تتيح تحريك سمات المسار — التدوير، الإزاحة، تغيير اللون وتحويل الشكل. الثانية تتبدل بين حالات مختلفة (ضغط، تمييز) مع انتقالات سلسة.

يستخدم AnimatedVectorDrawable ثلاثة ملفات XML: Vector Drawable نفسه، وObjectAnimator يصف الرسوم المتحركة، وAnimatedVectorDrawable رابط يربط الهدف (اسم المجموعة أو المسار) مع المحرك. يمكن للرسوم المتحركة تغيير 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 هذه التوافقية تلقائياً.