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

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

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

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

مقدّمة

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

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

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

نبذة عن فئة VectorDrawable

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

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

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

مثال على تنسيق XML

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

<!-- 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 هذا الصورة التالية:

لمحة عن فئة MoveVectorDrawable

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

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

باستخدام هذا الأسلوب، يمكنك تحديد ثلاثة ملفات 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 الخاص بـAnimationVectorDrawable: 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 الخاص بـحقّقerVectorDrawable: 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 والإصدارات الأحدث من Support Library مع الميزات التالية:

  • تحويل المسار (مقيِّم PathType): يُستخدَم لتحويل مسار إلى مسار آخر.
  • استيفاء المسار تُستخدَم لتحديد جهاز استقراء مرن (يتم تمثيله كمسار) بدلاً من أدوات الاستيفاء التي يحددها النظام مثل LinearInterpoator.

يتوافق الإصدار 26.0.0-الإصدار التجريبي 1 والإصدارات الأحدث من Support Library مع الميزات التالية:

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

مثال على ملفات 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 الخاص بـAnimationVectorDrawable: 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 الخاص بـ MoveVectorDrawable: 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>