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

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

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

  • الرسم المتّجه هو رسم متّجه محدّد في ملف XML على شكل مجموعة من النقاط والخطوط والمنحنيات بالإضافة إلى معلومات الألوان المرتبطة به.
  • الرسومات المتّجهة قابلة للتطوير، ما يعني أنّه يمكن تغيير حجمها بدون فقدان جودة العرض. وهذا يجعلها مثالية للاستخدام في تطبيقات Android، لأنّها يمكن أن تساعد في تقليل حجم ملفات APK وتحسين الأداء.
  • يمكنك إنشاء رسومات متّجهة في "استوديو Android" من خلال النقر بزر الماوس الأيمن على مجلد الرسومات في مشروعك واختيار "جديد" > "مادة عرض متّجهة". يمكنك أيضًا استيراد ملفات SVG إلى استوديو Android كرسومات متّجهة.
Summary generated by Google Bard on 24 July, 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 للصور المتحركة المستخدَمة في ملف 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، على التوالي.

قدّم "استوديو Android" 1.4 دعمًا محدودًا للتوافق مع الأنظمة القديمة للرسومات المتّجهة من خلال إنشاء ملفات 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 على جميع الأجهزة التي تعمل بإصدار Android 4.0 (مستوى واجهة برمجة التطبيقات 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.

تتيح "مكتبة الدعم" 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 file: 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>