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

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

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

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

المقدّمة

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

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

كان Android 5.0 (المستوى 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 منفصلة:

  • ملف VectorDrawable بتنسيق XML
  • هو ملف 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 الخاص بـ ArtVectorDrawable: 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 الخاص بـ ArtVectorDrawable: 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" دعمًا محدودًا للتوافق مع العناصر القابلة للرسم المتّجهية من خلال إنشاء ملفات PNG في وقت التصميم. في المقابل، تتيح المكتبات التي يمكن رسمها والمتّجهات القابلة للرسم والمتّجهَين المرونة والتوافق الواسع النطاق، فهي عبارة عن مكتبة دعم تتيح لك استخدامها مع جميع إصدارات نظام Android الأساسي والإصدارات 2.1 من Android (المستوى 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): يُستخدَم لتحويل مسار إلى مسار آخر.
  • استكمال المسار يُستخدَم لتحديد أداة استقراء داخلي مرن (يتم تمثيلها كمسار) بدلاً من أدوات استقراء المسارات التي يحدّدها النظام، مثل LinearInterpolator.

تتوفّر الميزات التالية في Support Library 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 الخاص بـ ArtVectorDrawable: 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>
  • ملف GIF لـ Animator يتم استخدامه في ملف XML الخاص بـAnimationVectorDrawable: 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>