نظرة عامة على المتجهات القابلة للرسم

تجربة طريقة Compose
‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرَّف على كيفية عرض الرسومات في Compose.
ImageVector →

النقاط الرئيسية

  • المتّجه القابل للرسم هو رسم متّجه محدّد في ملف XML كمجموعة من النقاط والخطوط والمنحنيات مع معلومات الألوان المرتبطة بها.
  • تكون المتّجهات القابلة للرسم قابلة للتوسّع، ما يعني أنّه يمكن تغيير حجمها بدون فقدان جودة العرض. وهذا يجعلها مثالية للاستخدام في تطبيقات Android، لأنّها تساعد في تقليل حجم ملفات APK وتحسين الأداء.
  • يمكنك إنشاء متّجهات قابلة للرسم في "استوديو Android" من خلال النقر بزر الماوس الأيمن على المجلد القابل للرسم في مشروعك واختيار "جديد" > "مادة عرض المتّجه". يمكنك أيضًا استيراد ملفات SVG إلى "استوديو Android" كمتّجهات قابلة للرسم.
ملخّص من إنشاء Google Bard في 24 يوليو 2023

مقدمة

VectorDrawable هو رسم متّجه يتم تحديده في ملف XML كمجموعة من النقاط والخطوط والمنحنيات مع معلومات الألوان المرتبطة به. تتمثّل الميزة الرئيسية لاستخدام متّجه قابل للرسم في قابلية توسيع الصورة. ويمكن تغيير حجمه بدون فقدان جودة العرض، ما يعني أنّه يتم تغيير حجم الملف نفسه ليناسب كثافات الشاشة المختلفة بدون فقدان جودة الصورة. ويؤدي ذلك إلى تقليل حجم ملفات APK وتقليل أعمال الصيانة التي يجريها المطوّر. يمكنك أيضًا استخدام صور المتّجه للصور المتحركة من خلال استخدام ملفات XML متعددة بدلاً من صور متعددة لكل دقة عرض.

تقدّم هذه الصفحة والفيديو أدناه نظرة عامة حول كيفية إنشاء متّجهات قابلة للرسم في ملفات XML. يمكن لبرنامج "استوديو Android" أيضًا تحويل ملفات SVG إلى تنسيق المتّجه القابل للرسم، كما هو موضّح في قسم إضافة رسومات متّجهة متعددة الكثافة.

كان الإصدار Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) هو الإصدار الأول الذي يتيح رسميًا استخدام المتّجهات القابلة للرسم مع VectorDrawable وAnimatedVectorDrawable، ولكن يمكنك إتاحة الإصدارات الأقدم من خلال مكتبة دعم Android التي توفّر الفئتَين VectorDrawableCompat وAnimatedVectorDrawableCompat.

لمحة عن فئة VectorDrawable

يحدّد VectorDrawable عنصرًا ثابتًا قابلاً للرسم. على غرار تنسيق SVG، يتم تحديد كل رسم متّجه على أنّه تسلسل هرمي على شكل شجرة يتكوّن من عناصر path وgroup. يحتوي كل path على الشكل الهندسي لمخطط العنصر، ويحتوي group على تفاصيل التحويل. يتم رسم جميع المسارات بالترتيب نفسه الذي تظهر به في ملف XML.

الشكل 1: نموذج للتسلسل الهرمي لمادة عرض متّجهة قابلة للرسم

توفّر أداة استوديو مواد العرض الخاصة بالمتّجهات طريقة بسيطة لإضافة رسم متّجه إلى المشروع كملف XML.

مثال على ملف XML

في ما يلي نموذج لملف XML بتنسيق VectorDrawable يعرض صورة لبطارية في وضع الشحن. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

يعرض ملف XML هذا الصورة التالية:

لمحة عن فئة AnimatedVectorDrawable

تضيف السمة AnimatedVectorDrawable تأثيرًا متحركًا إلى سمات رسم متّجه. يمكنك تحديد رسم متّجه متحرك على أنّه ثلاثة ملفات موارد منفصلة أو ملف XML واحد يحدّد العنصر القابل للرسم بالكامل. لنتعرّف على الطريقتَين لفهمهما بشكل أفضل: ملفات XML متعدّدة وملف XML واحد.

ملفات XML متعدّدة

باستخدام هذا النهج، يمكنك تحديد ثلاثة ملفات XML منفصلة:

  • ملف XML لـ VectorDrawable
  • ملف XML من النوع AnimatedVectorDrawable يحدّد العنصر VectorDrawable المستهدَف والمسارات والمجموعات المستهدَفة التي سيتم تحريكها والخصائص والرسوم المتحركة المحدّدة كعناصر من النوع ObjectAnimator أو AnimatorSet.
  • ملف XML لصور متحركة

مثال على ملفات XML متعددة

توضّح ملفات XML التالية تأثيرات الحركة في رسم متّجه.

  • ملف XML الخاص بـ VectorDrawable: ‏vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • ملف XML الخاص بـ AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • ملفات XML الخاصة ببرنامج Animator والمستخدَمة في ملف XML الخاص بـ AnimatedVectorDrawable: rotation.xml وpath_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />
     
    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

ملف XML واحد

باستخدام هذا النهج، يمكنك دمج ملفات XML ذات الصلة في ملف XML واحد من خلال تنسيق حزمة XML. عند إنشاء التطبيق، تنشئ علامة aapt موارد منفصلة وتشير إليها في المتجه المتحرك. يتطلّب هذا النهج الإصدار 24 أو إصدارًا أحدث من &quot;أدوات الإنشاء&quot;، ويكون الناتج متوافقًا مع الأنظمة القديمة.

مثال على ملف XML واحد 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

حلّ التوافق مع الأنظمة القديمة للمتّجهات القابلة للرسم

لإتاحة استخدام المتّجهات القابلة للرسم والمتّجهات المتحركة القابلة للرسم على الأجهزة التي تعمل بإصدارات نظام أساسي أقدم من Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات)، أو استخدام وظائف fillColor وfillType وstrokeColor على إصدارات أقدم من Android 7.0 (المستوى 24 من واجهة برمجة التطبيقات)، يتوفّر VectorDrawableCompat وAnimatedVectorDrawableCompat من خلال مكتبتَي دعم: support-vector-drawable وanimated-vector-drawable على التوالي.

قدّم الإصدار 1.4 من &quot;استوديو Android&quot; توافقًا محدودًا مع المتّجهات القابلة للرسم من خلال إنشاء ملفات PNG في وقت الإصدار. ومع ذلك، توفّر مكتبات الدعم للمتّجهات القابلة للرسم والمتّجهات المتحركة القابلة للرسم المرونة والتوافق على نطاق واسع، فهي مكتبة دعم، لذا يمكنك استخدامها مع جميع إصدارات نظام Android الأساسي بدءًا من الإصدار Android 2.1 (مستوى واجهة برمجة التطبيقات 7 والإصدارات الأحدث). لضبط تطبيقك لاستخدام مكتبات دعم المتّجهات، أضِف العنصر vectorDrawables إلى ملف build.gradle في وحدة التطبيق.

استخدِم مقتطف الرمز التالي لضبط العنصر vectorDrawables:

أنيق

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

أنيق

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

يمكنك استخدام VectorDrawableCompat و AnimatedVectorDrawableCompat على جميع الأجهزة التي تعمل بالإصدار 4.0 من نظام التشغيل Android (المستوى 14 لواجهة برمجة التطبيقات) والإصدارات الأحدث. بسبب الطريقة التي يحمّل بها Android المتّجهات القابلة للرسم، لا يمكن تحميل المتّجهات القابلة للرسم في كل مكان يقبل معرّفًا لمتّجه قابل للرسم، مثل ملف XML. أضافت حزمة android.support.v7.appcompat عددًا من الميزات لتسهيل استخدام المتّجهات القابلة للرسم. أولاً، عند استخدام حزمة android.support.v7.appcompat مع ImageView أو مع فئات فرعية مثل ImageButton وFloatingActionButton، يمكنك استخدام سمة app:srcCompat الجديدة للإشارة إلى المتّجهات القابلة للرسم وأي متّجهات أخرى قابلة للرسم متاحة لـ android:src: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

لتغيير العناصر القابلة للرسم في وقت التشغيل، يمكنك استخدام طريقة setImageResource() كما في السابق. يُعدّ استخدام AppCompat وapp:srcCompat الطريقة الأكثر أمانًا لدمج المتّجهات القابلة للرسم في تطبيقك.

تتيح مكتبة الدعم 25.4.0 والإصدارات الأحدث الميزات التالية:

  • تحويل المسار (مقيِّم PathType): يُستخدَم لتحويل مسار إلى مسار آخر.
  • Path Interpolation: يُستخدَم لتحديد أداة احتساب معدل التغير في الصور المتحركة مرنة (ممثَّلة كمسار) بدلاً من أدوات احتساب معدل التغير في الصور المتحركة التي يحدّدها النظام، مثل LinearInterpolator.

تتيح مكتبة الدعم 26.0.0-beta1 والإصدارات الأحدث الميزات التالية:

  • التحريك على طول المسار: يمكن تحريك العنصر الهندسي في أي اتجاه على طول مسار عشوائي كجزء من الحركة.

مثال على ملفات XML متعددة تستخدم مكتبة الدعم

توضّح ملفات XML التالية طريقة استخدام ملفات XML متعددة لتحريك رسم متّجه.

  • ملف XML الخاص بـ VectorDrawable: ‏vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • ملف XML الخاص بـ AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • ملف XML الخاص بـ Animator والمستخدَم في ملف XML الخاص بـ AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

ملف XML واحد

يوضّح ملف XML التالي طريقة استخدام ملف XML واحد لتحريك رسم متّجه. عند إنشاء التطبيق، تنشئ علامة aapt موارد منفصلة وتشير إليها في المتجه المتحرك. يتطلّب هذا النهج الإصدار 24 أو إصدارًا أحدث من &quot;أدوات الإنشاء&quot;، ويكون الناتج متوافقًا مع الأنظمة القديمة.

مثال على ملف XML واحد يستخدم مكتبة الدعم 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>