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

تجربة ميزة "الكتابة"

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

ImageVector →

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

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

الملخّص الذي أنشأه 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. مثال على التسلسل الهرمي لمادة عرض قابلة للرسم باستخدام متّجه

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

لمحة عن فئة ArtVectorDrawable

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

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

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

• ملف VectorDrawable بتنسيق XML
• هو ملف AnimatedVectorDrawable بتنسيق XML تحدد قيمة 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 الخاص بـ 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 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 على جميع الأجهزة على الأجهزة التي تعمل بنظام التشغيل 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): يُستخدَم للتحول مسار إلى مسار آخر.
• التوسيع/التصغير على طول المسار: يُستخدَم لتحديد 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 الخاص بـ ArtVectorDrawable الملف: 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>