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

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

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

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

لمحة عن فئة 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 الخاص بـ 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، على التوالي.

تم تقديم دعم توافق محدود للرمز المتجه في الإصدار Android Studio 1.4. القابلة للرسم من خلال إنشاء ملفات PNG في وقت الإنشاء. ومع ذلك، فإن الخط المتجه القابل للرسم والدعم المتحرك القابل للرسم والمتجهات التي تقدم المكتبات كلاً من المرونة توافقًا واسعًا، فهي مكتبة دعم، لذا يمكنك استخدامها مع جميع إصدارات نظام Android الأساسي للعودة إلى Android 2.1 (المستوى 7 من واجهة برمجة التطبيقات وما فوقه). لتهيئة لاستخدام مكتبات دعم المتجه، أضِف السمة vectorDrawables إلى ملف build.gradle في وحدة التطبيق.

استخدام مقتطف الرمز التالي لضبط vectorDrawables العنصر:

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Groovy

// 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.

تتوفّر الميزات التالية في 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>
  • ملف 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>