النقاط الرئيسية
- الخط المتجه القابل للرسم هو رسم متّجه محدّد في ملف XML على أنّه مجموعة من النقاط والخطوط والمنحنيات بالإضافة إلى معلومات اللون المرتبطة به.
- العناصر القابلة للرسم المتجهة قابلة للتطوير، مما يعني أنه يمكن تغيير حجمها دون فقدان جودة العرض. وهذا يجعلها مثالية للاستخدام في تطبيقات Android، حيث يمكن أن يساعد في تقليل حجم ملفات APK وتحسين الأداء.
- يمكنك إنشاء رسومات متجهات قابلة للرسم في "استوديو Android" من خلال النقر بزر الماوس الأيمن على المجلد القابل للرسم في مشروعك واختيار جديد > مادة عرض المتجه. يمكنك أيضًا استيراد ملفات SVG إلى "استوديو Android" كموجّهات قابلة للرسم.
مقدّمة
VectorDrawable
هو رسم متّجه يتم تعريفه في ملف XML على أنّه مجموعة من النقاط والخطوط والمنحنيات بالإضافة إلى معلومات اللون المرتبطة به. إنّ الميزة الرئيسية لاستخدام متجه قابل للرسم هي قابلية تحجيم الصور. ويمكن تغيير حجمه بدون فقدان جودة العرض، ما يعني أنّه يتم تغيير حجم الملف نفسه ليلائم كثافات شاشة مختلفة بدون فقدان جودة الصورة.
يؤدي ذلك إلى تصغير حجم ملفات APK والحد من صيانة المطوِّرين. يمكنك أيضًا
استخدام صور المتجهات للصور المتحركة من خلال استخدام ملفات XML متعددة بدلاً من صور
متعددة لكل درجة دقة عرض.
توفر هذه الصفحة والفيديو أدناه نظرة عامة حول كيفية إنشاء رسومات متجهات قابلة للرسم بتنسيق XML. يمكن أيضًا لتطبيق "استوديو Android" تحويل ملفات SVG إلى تنسيق الرسومات المتّجهة القابل للرسم، كما هو موضّح في إضافة رسومات متّجهات متعددة الكثافة.
كان الإصدار 5.0 من Android (المستوى 21 من واجهة برمجة التطبيقات) هو أوّل إصدار يتوافق رسميًا مع الرسومات المتجهة القابلة للرسم باستخدام VectorDrawable
وAnimatedVectorDrawable
، ولكن يمكنك استخدام الإصدارات القديمة من خلال مكتبة الدعم في Android التي توفّر الفئتَين VectorDrawableCompat
وAnimatedVectorDrawableCompat
.
نبذة عن فئة VectorDrawable
تحدّد السمة VectorDrawable
كائنًا ثابتًا قابل للرسم. على غرار تنسيق SVG، يتم تعريف كل رسم متّجه كتدرّج هرمي شجرة يتكوّن من كائن path
وgroup
.
يحتوي كل path
على الشكل الهندسي لمخطط العنصر، ويحتوي كل سمة group
على تفاصيل حول التحويل. يتم رسم جميع المسارات بالترتيب نفسه الذي تظهر به في ملف XML.
توفّر أداة 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 منفصلة:
- ملف
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 الخاص بـ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>