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

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

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

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

مقدّمة

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

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

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

لمحة عن فئة VectorDrawable

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

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

توفّر أداة استوديو مواد العرض الموجّهة إلى Vector طريقة بسيطة لإضافة رسم متّجه إلى المشروع كملف 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 هذا الصورة التالية:

لمحة عن فئة ArtVectorDrawable

تضيف السمة 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 الخاصة بالرسوم المتحركة التي يتم استخدامها في ملف 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 من "أدوات الإنشاء" أو إصدار أحدث، ويكون الناتج متوافقًا مع الإصدارات القديمة.

مثال على ملف 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 من Android Studio توافقًا محدودًا مع رسومات المتّجه من خلال إنشاء ملفات بتنسيق 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): يُستخدَم لتحويل مسار إلى مسار آخر.
  • التوسيع/التصغير على طول المسار: يُستخدَم لتحديد interpolator (مُعدِّل) مرن (ممثَّل كمسار) بدلاً من مُعدِّلات التمويه التي يحدّدها النظام، مثل 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 الخاص بالرسوم المتحركة الذي يتم استخدامه في ملف XML الخاص بـ AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

ملف XML واحد

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

مثال على ملف 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>