إضافة رسومات متجهات متعددة الكثافة

يتضمّن استوديو Android أداة تُسمى "استوديو مواد العرض الخاصة بالمتّجهات" تساعدك في إضافة رموز Material واستيراد ملفات الرسومات المتجهة القابلة للتطوير (SVG) وملفات مستندات Adobe Photoshop (PSD) إلى مشروعك كموارد رسومات متجهة قابلة للرسم. يؤدي استخدام الرسومات المتجهة بدلاً من الصور النقطية إلى تقليل حجم حزمة APK، لأنّه يمكن تغيير حجم الملف نفسه ليناسب كثافات الشاشة المختلفة بدون فقدان جودة الصورة. بالنسبة إلى الإصدارات القديمة من Android التي لا تتوافق مع المتّجهات القابلة للرسم، يمكن لأداة استوديو مواد العرض الخاصة بالمتّجهات تحويل المتّجهات القابلة للرسم إلى أحجام مختلفة من الصور النقطية لكل كثافة شاشة في مدّة التصميم.

لمحة عن "استوديو مواد العرض الخاصة بالمتّجهات"

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

لاستخدام الرسومات المتجهة القابلة للرسم مع Jetpack Compose، يجب ضبط الحد الأدنى لمستوى واجهة برمجة التطبيقات على Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) أو إصدار أحدث.

لا يتوافق الإصدار 4.4 من نظام التشغيل Android (المستوى 20 من واجهة برمجة التطبيقات) والإصدارات الأقدم مع الرسومات المتجهة القابلة للرسم. إذا تم ضبط الحد الأدنى لمستوى واجهة برمجة التطبيقات على أحد مستويات واجهة برمجة التطبيقات هذه، يتوفّر لك خياران عند استخدام استوديو مواد العرض الخاصة بالمتّجهات: إنشاء ملفات Portable Network Graphic (PNG) (الإعداد التلقائي) أو استخدام تقنية التوافق مع الأنظمة القديمة في AndroidX.

للتوافق مع الأنظمة القديمة، ينشئ "استوديو مواد العرض الخاصة بالمتّجهات" صورًا نقطية من الرسومات المتجهة القابلة للرسم. يتم تجميع الرسومات المتجهة والنقطية معًا في حزمة APK. يمكنك الإشارة إلى الرسومات المتجهة القابلة للرسم باسم Drawable في رمز Kotlin أو @drawable في رمز XML. وعند تشغيل تطبيقك، يتم عرض الصورة المتجهة أو النقطية المقابلة تلقائيًا حسب مستوى واجهة برمجة التطبيقات.

إذا كنت تريد استخدام الرسومات المتجهة فقط، يمكنك استخدام الإصدار 1.0.0 من AndroidX أو إصدار أحدث. تتطلّب هذه الطريقة إجراء تغيير على ملف build.gradle قبل تشغيل "استوديو مواد العرض الخاصة بالمتّجهات"، كما هو موضّح في AndroidX. يتيح لك الفئة VectorDrawableCompat في AndroidX إمكانية استخدام VectorDrawable في الإصدار 2.1 من نظام التشغيل Android (المستوى 7 من واجهة برمجة التطبيقات) والإصدارات الأحدث.

أنواع الرسومات المتجهة المتوافقة

توفّر مواصفات "التصميم المتعدّد الأبعاد من Google" رموزًا متعدّدة الأبعاد يمكنك استخدامها في تطبيقات Android. يساعدك "استوديو مواد العرض الخاصة بالمتّجهات" في اختيار رموز Material واستيرادها وتغيير حجمها، بالإضافة إلى تحديد مستوى التعتيم وإعدادات الانعكاس من اليمين إلى اليسار.

يتيح لك "استوديو مواد العرض الخاصة بالمتّجهات" أيضًا استيراد ملفات SVG وPSD الخاصة بك. ‫SVG هو معيار مفتوح يستند إلى XML تابع لاتحاد شبكة الويب العالمية (W3C). يتوافق تنسيق ملف PSD مع ميزات Adobe Photoshop. يتوافق "استوديو مواد العرض الخاصة بالمتّجهات" مع المعايير الأساسية، ولكن ليس مع جميع ميزات SVG وPSD. عند تحديد ملف SVG أو PSD، يقدّم لك استوديو مواد العرض الخاصة بالمتّجهات ملاحظات فورية حول ما إذا كان رمز الرسومات متوافقًا أم لا. يحوّل الملف إلى ملف XML يحتوي على رمز VectorDrawable. إذا تلقّيت أخطاء، عليك التأكّد من أنّ المتّجه القابل للرسم يظهر على النحو المطلوب. لمزيد من المعلومات حول ميزات PSD المسموح بها، يُرجى الاطّلاع على الميزات المتاحة والقيود المفروضة على ملفات PSD.

بالنسبة إلى الإصدار 5.0 من نظام التشغيل Android (مستوى واجهة برمجة التطبيقات 21) والإصدارات الأحدث، يمكنك استخدام الفئة AnimatedVectorDrawable لتحريك خصائص الفئة VectorDrawable. باستخدام AndroidX، يمكنك استخدام الفئة AnimatedVectorDrawableCompat لتحريك الفئة VectorDrawable في الإصدار 3.0 من نظام التشغيل Android (المستوى 11 من واجهة برمجة التطبيقات) والإصدارات الأحدث. لمزيد من المعلومات، يُرجى الاطّلاع على صور متّجهة متحركة في Compose.

اعتبارات ملفات SVG وPSD

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

يمكن أن تكلف عملية التحميل الأوّلي لرسومات متّجهة دورات وحدة معالجة مركزية أكثر من الصورة النقطية المقابلة. بعد ذلك، يصبح استخدام الذاكرة والأداء متشابهَين بين التطبيقَين. ننصحك بأن يكون الحد الأقصى لحجم صورة متجهة 200 × 200 وحدة مستقلة الكثافة، وإلا قد يستغرق رسمها وقتًا طويلاً جدًا.

على الرغم من أنّ المتّجهات القابلة للرسم تتوافق مع لون واحد أو أكثر، من المنطقي في كثير من الحالات تلوين الرموز بالأسود (android:fillColor="#FF000000"). وباستخدام هذا الأسلوب، يمكنك إضافة درجة لون إلى المتّجه القابل للرسم الذي وضعته في التنسيق، وسيتغير لون الرمز إلى درجة اللون. إذا لم يكن لون الرمز أسود، قد يمتزج لون الرمز مع لون التدرّج.

حلول التوافق مع الإصدارات السابقة لملفات Vector Drawable

يلخّص الجدول التالي التقنيتَين اللتَين يمكنك استخدامهما لتحقيق التوافق مع الإصدارات القديمة:

يمكن أن يؤدي استخدام الرسومات المتجهة القابلة للرسم إلى إنشاء حزمة APK أصغر، ولكن قد يستغرق التحميل الأوّلي للرسومات المتجهة القابلة للرسم وقتًا أطول.

إنشاء ملفات PNG

يتيح الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث استخدام الرسومات المتجهة. إذا كان تطبيقك يتضمّن مستوى أدنى لمستوى واجهة برمجة التطبيقات، يضيف استوديو مواد العرض الخاصة بالمتّجهات ملف الرسومات المتجهة القابلة للرسم إلى مشروعك. بالإضافة إلى ذلك، ينشئ Gradle صور نقطية بتنسيق PNG بدقة مختلفة في مدّة التصميم. ينشئ Gradle كثافات PNG المحدّدة من خلال السمة generatedDensities الخاصة باللغة الخاصة بالنطاق (DSL) في ملف build.gradle.

في الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، تتوافق أداة Vector Asset Studio مع جميع عناصر VectorDrawable. لضمان التوافق مع الأنظمة القديمة مع الإصدار 4.4 من نظام التشغيل Android (مستوى واجهة برمجة التطبيقات 20) والإصدارات الأقدم، يتيح استوديو مواد العرض الخاصة بالمتّجهات استخدام عناصر تنسيق XML التالية:

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

AndroidX

تتطلّب هذه الطريقة الإصدار 1.0 أو الإصدارات الأحدث من AndroidX والإصدار 3.2 أو الإصدارات الأحدث من "مكوّن إضافي متوافق مع Android لنظام Gradle"، كما تستخدم الرسومات المتجهة فقط. يتيح لك الصف VectorDrawableCompat في AndroidX إتاحة VectorDrawable في الإصدار 2.1 من نظام التشغيل Android (المستوى 7 من واجهة برمجة التطبيقات) والإصدارات الأحدث.

قبل استخدام "استوديو مواد العرض الخاصة بالمتّجهات"، يجب إضافة عبارة إلى ملف build.gradle:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

تشغيل "استوديو مواد العرض الخاصة بالمتّجهات"

لبدء "استوديو مواد العرض الخاصة بالمتّجهات"، اتّبِع الخطوات التالية:

1. في "استوديو Android"، افتح مشروع تطبيق Android.

2. في نافذة المشروع، اختَر طريقة العرض في Android.

3. انقر بزر الماوس الأيمن على المجلد res واختَر New (جديد) > Vector Asset (مادة عرض متجهة).

   تتضمّن بعض طرق العرض والمجلدات الأخرى للمشاريع عنصر القائمة هذا أيضًا.

   يظهر "استوديو مواد العرض الخاصة بالمتّجهات".

   

   الشكل 1 استوديو مواد العرض الخاصة بالمتّجهات

4. إذا ظهر مربّع الحوار يجب استخدام إصدار أحدث من المكوّن الإضافي المتوافق مع Android لنظام Gradle بدلاً من ذلك، عليك تصحيح إصدار Gradle باتّباع الخطوات التالية:

   1. انقر على ملف (File) > بنية المشروع (Project Structure).

   2. في مربّع الحوار بنية المشروع، اختَر المشروع.

   3. في حقل إصدار المكوّن الإضافي لنظام Android، غيِّر إصدار المكوّن الإضافي لنظام Gradle المتوافق مع Android إلى 1.5.0 أو إصدار أحدث، ثم انقر على حسنًا.

      تتم مزامنة المشروع باستخدام Gradle.

   4. في طريقة عرض Android ضمن نافذة المشروع، انقر بزر الماوس الأيمن على المجلد res واختَر جديد > مادة عرض متجهة.

      يظهر "استوديو مواد العرض الخاصة بالمتّجهات".

5. تابِع استيراد رسم متّجه.

استيراد رسم متّجه

يساعدك "استوديو مواد العرض الخاصة بالمتّجهات" في استيراد ملف رسومات متّجهة إلى مشروع تطبيقك. اتّبِع أحد الإجراءات التالية:

• إضافة رمز متوافق مع إرشادات التصميم المتعدّد الأبعاد
• استيراد ملف SVG أو PSD

إضافة رمز متوافق مع إرشادات التصميم المتعدّد الأبعاد

بعد فتح "استوديو مواد العرض الخاصة بالمتّجهات"، يمكنك إضافة رمز متوافق مع إرشادات التصميم المتعدّد الأبعاد باتّباع الخطوات التالية:

1. في "استوديو مواد العرض الخاصة بالمتّجهات"، اختَر قصاصات فنية.

2. في حقل "الصور المتحركة"، انقر على الزر.

3. يظهر مربّع الحوار اختيار الرمز. يمكنك فلترة الرموز الظاهرة من خلال اختيار فئة رموز من القائمة أو كتابة عبارة في حقل البحث كما هو موضّح في الشكل 2.

   

   الشكل 2 فلترة رموز Material في "استوديو مواد العرض الخاصة بالمتّجهات"

   اختَر رمز متوافق مع إرشادات التصميم المتعدّد الأبعاد وانقر على حسنًا. يظهر الرمز في معاينة Vector Drawable.

4. يمكنك اختياريًا تغيير اسم المورد وحجمه وشفافيته وإعداد الانعكاس من اليمين إلى اليسار (RTL):

   • الاسم: اكتب اسمًا جديدًا إذا كنت لا تريد استخدام الاسم التلقائي. ينشئ استوديو مواد العرض الخاصة بالمتّجهات تلقائيًا اسمًا فريدًا (يضيف رقمًا إلى نهاية الاسم) إذا كان اسم المورد هذا متوفّرًا في المشروع. يمكن أن يحتوي الاسم على أحرف صغيرة وشرطات سفلية وأرقام فقط.

   • تجاهل: اختَر هذا الخيار إذا كنت تريد تعديل حجم الصورة. عند كتابة حجم جديد، سيظهر التغيير في مساحة المعاينة.

     القيمة التلقائية هي 24 × 24 وحدة بكسل مستقلة عن الكثافة، وهي القيمة المحدّدة في مواصفات التصميم المتعدد الأبعاد. أزِلوا العلامة من مربّع الاختيار للرجوع إلى الإعداد التلقائي.

   • التعتيم: استخدِم شريط التمرير لضبط مستوى تعتيم الصورة. يظهر التغيير في مساحة المعاينة.

   • تفعيل النسخ المطابق التلقائي للتنسيق من اليمين إلى اليسار: حدِّد هذا الخيار إذا كنت تريد عرض صورة طبق الأصل عندما يكون التنسيق من اليمين إلى اليسار بدلاً من اليسار إلى اليمين. على سبيل المثال، تتم قراءة بعض اللغات من اليمين إلى اليسار، لذا إذا كان لديك رمز سهم، قد تحتاج إلى عرض صورة معكوسة له في هذه الحالة. يُرجى العِلم أنّه إذا كنت تعمل على مشروع قديم، قد تحتاج أيضًا إلى إضافة android:supportsRtl="true" إلى بيان تطبيقك. تتوفّر ميزة "النسخ المطابق التلقائي" على الإصدار 5.0 من نظام التشغيل Android (مستوى واجهة برمجة التطبيقات 21) والإصدارات الأحدث، ومع AndroidX.

5. انقر على التالي.

6. يمكنك اختياريًا تغيير دليل الوحدة ودليل الموارد:

   • دليل الموارد (Res Directory): اختَر مجموعة رموز المصدر للموارد التي تريد إضافة المتّجه القابل للرسم إليها: src/main/res أو src/debug/res أو src/release/res أو مجموعة رموز مصدر يحدّدها المستخدم. تنطبق مجموعة رموز المصدر الرئيسية على جميع تنويعات الإصدار، بما في ذلك إصدارات تصحيح الأخطاء والإصدارات العلنية. تتجاوز مجموعات رموز المصدر الخاصة بالتصحيح والأخطاء مجموعة رموز المصدر الرئيسية ويتم تطبيقها على إصدار واحد من الإصدار. مجموعة رموز المصدر لتصحيح الأخطاء مخصصة لتصحيح الأخطاء فقط. لتحديد مجموعة رموز المصدر جديدة، اختَر ملف (File) > بنية المشروع (Project Structure) > التطبيق (app) > أنواع الإصدارات (Build Types). على سبيل المثال، يمكنك تحديد مجموعة مصادر تجريبية وإنشاء إصدار من الرمز يتضمّن النص "إصدار تجريبي" في أسفل يسار الشاشة. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة ضبط صيغ الإنشاء.

   تعرض منطقة أدلة الإخراج المتّجه القابل للرسم والدليل الذي سيظهر فيه.

7. انقر على إنهاء.

   يضيف "استوديو مواد العرض الخاصة بالمتّجهات" ملف XML يحدّد الرسم المتّجهي إلى المشروع في المجلد app/src/main/res/drawable/. من طريقة عرض Android في نافذة المشروع، يمكنك عرض ملف XML المتجه الذي تم إنشاؤه في مجلد drawable.

8. إنشاء المشروع

   إذا كان الحد الأدنى لمستوى واجهة برمجة التطبيقات هو الإصدار 4.4 من نظام التشغيل Android (المستوى 20 لواجهة برمجة التطبيقات) أو إصدار أقدم، ولم تفعّل تقنية AndroidX، سينشئ استوديو مواد العرض الخاصة بالمتّجهات ملفات PNG. من طريقة عرض ملفات المشروع في نافذة المشروع، يمكنك عرض ملفات PNG وXML التي تم إنشاؤها في المجلد app/build/generated/res/pngs/debug/.

   يجب عدم تعديل ملفات الصور النقطية التي تم إنشاؤها، بل استخدام ملف XML المتجه بدلاً من ذلك. يعيد نظام التصميم إنشاء ملفات الصور النقطية تلقائيًا عند الحاجة، لذا لا تحتاج إلى صيانتها.

استيراد ملف SVG أو PSD

بعد فتح "استوديو مواد العرض الخاصة بالمتّجهات"، يمكنك استيراد ملف رسومات موجّهة يمكن تغيير حجمها (SVG) أو PSD باتّباع الخطوات التالية:

1. في "استوديو مواد العرض الخاصة بالمتّجهات"، انقر على ملف محلي.

   يجب أن يكون الملف على محرك أقراص محلي. إذا كان الملف مخزّنًا على الشبكة، عليك أولاً تنزيله إلى محرّك أقراص محلي.

2. حدِّد ملف صورة من خلال النقر على … .

   تظهر الصورة في معاينة Vector Drawable.

   إذا كان ملف SVG أو PSD يحتوي على ميزات غير متوافقة، سيظهر خطأ في أسفل استوديو مواد العرض الخاصة بالمتّجهات، كما هو موضّح في الشكل 3.

   

   الشكل 3 يُظهر "استوديو مواد العرض الخاصة بالمتّجهات" بعض الأخطاء.

   إذا ظهرت لك أخطاء، عليك التأكّد من أنّ الصورة المتجهة القابلة للرسم التي تم استيرادها يتم عرضها بشكل صحيح. تنقَّل بين عناصر القائمة للاطّلاع على الأخطاء.

   للاطّلاع على قائمة بالعناصر المتوافقة، يُرجى الرجوع إلى حلول التوافق مع الإصدارات القديمة لرسومات Vector Drawable. لمزيد من المعلومات حول ملفات PSD المسموح بها، يُرجى الاطّلاع على الدعم والقيود المفروضة على ملفات PSD.

3. يمكنك اختياريًا تغيير اسم المورد وحجمه وشفافيته وإعداد الانعكاس من اليمين إلى اليسار (RTL):

   • الاسم: اكتب اسمًا جديدًا إذا كنت لا تريد استخدام الاسم التلقائي. ينشئ استوديو مواد العرض الخاصة بالمتّجهات تلقائيًا اسمًا فريدًا (يضيف رقمًا إلى نهاية الاسم) إذا كان اسم المورد هذا متوفّرًا في المشروع. يمكن أن يحتوي الاسم على أحرف صغيرة وشرطات سفلية وأرقام فقط.

   • تجاهل: اختَر هذا الخيار إذا كنت تريد تعديل حجم الصورة. بعد اختيارها، يتغيّر الحجم إلى حجم الصورة نفسها. عند تغيير الحجم، سيظهر التغيير في منطقة المعاينة. القيمة التلقائية هي 24 × 24 وحدة بكسل مستقلة عن الكثافة، وهي القيمة المحدّدة في مواصفات التصميم المتعدد الأبعاد.

   • التعتيم: استخدِم شريط التمرير لضبط مستوى تعتيم الصورة. يظهر التغيير في مساحة المعاينة.

   • تفعيل النسخ المطابق التلقائي للتنسيق من اليمين إلى اليسار: حدِّد هذا الخيار إذا كنت تريد عرض صورة طبق الأصل عندما يكون التنسيق من اليمين إلى اليسار بدلاً من اليسار إلى اليمين. على سبيل المثال، تتم قراءة بعض اللغات من اليمين إلى اليسار، لذا إذا كان لديك رمز سهم، قد تحتاج إلى عرض صورة معكوسة له في هذه الحالة. ملاحظة: إذا كنت تعمل على مشروع قديم، قد تحتاج إلى إضافة android:supportsRtl="true" إلى بيان تطبيقك. تتوفّر ميزة "النسخ المطابق التلقائي" على الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، بالإضافة إلى AndroidX.

4. انقر على التالي.

5. يمكنك تغيير دليل الموارد اختياريًا باتّباع الخطوات التالية:

   • دليل الموارد (Res Directory): اختَر مجموعة مصادر الموارد التي تريد إضافة رسم متّجهي إليها: src/main/res أو src/debug/res أو src/release/res أو مجموعة مصادر من تعريف المستخدم. تنطبق مجموعة رموز المصدر الرئيسية على جميع تنويعات التصميم، بما في ذلك تصحيح الأخطاء والإصدار. تتجاوز مجموعات رموز المصدر الخاصة بالتصحيح والأصدار مجموعة رموز المصدر الرئيسية ويتم تطبيقها على إصدار واحد من الإصدارات. تُستخدم مجموعة رموز المصدر الخاصة بتصحيح الأخطاء لتصحيح الأخطاء فقط. لتعريف مجموعة رموز المصدر جديدة، اختَر ملف > بنية المشروع > التطبيق > أنواع التصميم. على سبيل المثال، يمكنك تحديد مجموعة رموز المصدر إصدار تجريبي وإنشاء نسخة من رمز يتضمّن النص "إصدار تجريبي" في أسفل يسار الشاشة. لمزيد من المعلومات، يُرجى الاطّلاع على إعداد تنويعات الإصدارات.

   تعرض منطقة أدلة الإخراج المتّجه القابل للرسم والدليل الذي سيظهر فيه.

6. انقر على إنهاء.

   يضيف "استوديو مواد العرض الخاصة بالمتّجهات" ملف XML يحدّد الرسم المتّجهي إلى المشروع في المجلد app/src/main/res/drawable/. من طريقة عرض Android في نافذة المشروع، يمكنك عرض ملف XML المتجه الذي تم إنشاؤه في مجلد drawable.

7. إنشاء المشروع

   إذا كان الحد الأدنى لمستوى واجهة برمجة التطبيقات هو الإصدار 4.4 من نظام التشغيل Android (المستوى 20 لواجهة برمجة التطبيقات) أو إصدار أقدم، ولم تفعّل تقنية AndroidX، سينشئ استوديو مواد العرض الخاصة بالمتّجهات ملفات PNG. من طريقة عرض ملفات المشروع في نافذة المشروع، يمكنك عرض ملفات PNG وXML التي تم إنشاؤها في المجلد app/build/generated/res/pngs/debug/.

   يجب عدم تعديل ملفات الصور النقطية التي تم إنشاؤها، بل استخدام ملف XML المتجه بدلاً من ذلك. يعيد نظام التصميم إنشاء ملفات الصور النقطية تلقائيًا عند الحاجة، لذا لا تحتاج إلى صيانتها.

الإشارة إلى مادة عرض متّجهة في Jetpack Compose

بعد استخدام استوديو مواد العرض الخاصة بالمتّجهات لإضافة مادة عرض إلى مجلد res/drawable، يمكنك الرجوع إليها في الرمز البرمجي.

في Jetpack Compose، الطريقة الأكثر شيوعًا لعرض الرسومات المتجهة هي استخدام العنصر المركّب Icon أو Image.

الدالة البرمجية القابلة للإنشاء Icon هي الطريقة العادية لعرض مواد عرض صغيرة أحادية اللون. ويوفّر دعمًا مدمجًا لمبادئ التصميم المتعدد الأبعاد، مثل تطبيق التلوين الديناميكي استنادًا إلى سمات التصميم المتعدد الأبعاد 3 وإمكانية تسهيل الاستخدام التلقائي من خلال أوصاف المحتوى.

استخدِم واجهة برمجة التطبيقات painterResource لتوفير مواد عرض متّجهة بتنسيق XML للعنصر القابل للإنشاء:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

بالنسبة إلى الرسومات المتجهة المعقّدة والمتعددة الألوان، استخدِم العنصر القابل للإنشاء Image:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

بالنسبة إلى السيناريوهات المعقّدة الأخرى، مثل تخصيص صورة أو تحسين الأداء، يمكنك الاطّلاع على العمل مع الصور. لتحريك الرسومات المتجهة، اطّلِع على الصور المتجهة المتحركة في Compose.

تعديل رمز XML الذي تم إنشاؤه بواسطة "استوديو مواد العرض الخاصة بالمتّجهات"

يمكنك تعديل رمز XML الخاص بالرسومات المتجهة القابلة للرسم، ولكن لا يمكنك تعديل ملفات PNG ورمز XML المقابل الذي يتم إنشاؤه في مدّة التصميم. ومع ذلك، لا ننصح بذلك.

عند استخدام أسلوب إنشاء ملفات PNG، يتأكّد "استوديو مواد العرض الخاصة بالمتّجهات" من تطابق المتّجه القابل للرسم وملفات PNG، ومن أنّ ملف البيان يحتوي على الرمز المناسب. إذا أضفت رمزًا غير متوافق مع الإصدار 4.4 من نظام التشغيل Android (المستوى 20 من واجهة برمجة التطبيقات) والإصدارات الأقدم، قد تختلف صورك المتجهة وصور PNG. عليك أيضًا التأكّد من أنّ ملف البيان يتضمّن الرمز البرمجي اللازم لإجراء التغييرات.

لتعديل ملف XML الخاص بالرسومات المتجهة عندما لا تستخدم طريقة AndroidX، اتّبِع الخطوات التالية:

1. في نافذة المشروع، انقر مرّتين على ملف XML المتّجه الذي تم إنشاؤه في المجلد drawable.

   يظهر ملف XML في نافذتَي المحرّر والمعاينة.

   

   الشكل 4 ملف XML متّجه معروض في "أداة تعديل الرموز" ونافذة "المعاينة"

2. عدِّل رمز XML استنادًا إلى ما يتيحه الحد الأدنى لمستوى واجهة برمجة التطبيقات:

   • ‫Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث: تتوافق أداة استوديو مواد العرض الخاصة بالمتّجهات مع جميع عناصر Drawable وVectorDrawable. يمكنك إضافة عناصر XML وتغيير القيم. في Jetpack Compose، يمكنك تحميل الرسومات المتجهة القابلة للرسم إلى ImageVector لمزيد من التخصيص.

   • ‫Android 4.4 (المستوى 20 لواجهة برمجة التطبيقات) والإصدارات الأقدم: يتيح "استوديو مواد العرض الخاصة بالمتّجهات" استخدام جميع عناصر Drawable ومجموعة فرعية من عناصر VectorDrawable. يمكنك الاطّلاع على حلول التوافق مع الإصدارات السابقة لرسومات Vector Drawable للحصول على قائمة. يمكنك تغيير القيم في الرمز البرمجي الذي تم إنشاؤه وإضافة عناصر XML المتوافقة.

3. أنشئ المشروع وتأكَّد من أنّ المتّجه القابل للرسم والصور النقطية المقابلة تبدو متطابقة.

   تذكَّر أنّ ملفات PNG التي تم إنشاؤها قد تظهر بشكل مختلف في نافذة المعاينة عن ظهورها في التطبيق بسبب اختلاف محركات العرض وأي تغييرات تم إجراؤها على المتّجه القابل للرسم قبل الإصدار. إذا أضفت رمزًا إلى ملف XML الخاص بالرسومات المتجهة الذي أنشأه "استوديو مواد العرض الخاصة بالمتّجهات"، لن تظهر أي ميزات غير متوافقة مع الإصدار 4.4 من نظام التشغيل Android (مستوى واجهة برمجة التطبيقات 20) والإصدارات الأقدم في ملفات PNG التي تم إنشاؤها. نتيجةً لذلك، عند إضافة رمز، عليك دائمًا التأكّد من أنّ ملفات PNG التي تم إنشاؤها تتطابق مع الرسومات المتجهة القابلة للرسم. لإجراء ذلك، يمكنك النقر مرّتين على ملف PNG في عرض ملفات المشروع ضمن نافذة المشروع، كما يعرض الهامش الأيسر من "محرّر الرموز" صورة PNG عندما يشير الرمز إلى العنصر القابل للرسم، كما هو موضّح في الشكل 5.

   

   الشكل 5 صورة بتنسيق PNG معروضة في الهامش الأيمن من "محرّر الرموز"

حذف متّجه قابل للرسم من مشروع

لإزالة رسم متّجه من مشروع، اتّبِع الخطوات التالية:

1. في نافذة المشروع، احذف ملف XML المتجه الذي تم إنشاؤه من خلال اختيار الملف والضغط على مفتاح Delete (أو اختيار تعديل > حذف).

   يظهر مربّع الحوار الحذف الآمن.

2. يمكنك اختياريًا تحديد خيارات للعثور على مكان استخدام الملف في المشروع، ثم النقر على حسنًا.

   يحذف "استوديو Android" الملف من المشروع ومن محرك الأقراص. ومع ذلك، إذا اخترت البحث عن مواضع في المشروع يتم فيها استخدام الملف وتم العثور على بعض الاستخدامات، يمكنك عرضها وتحديد ما إذا كنت تريد حذف الملف.

3. انقر على إنشاء > تنظيف المشروع.

   تتم إزالة أي ملفات PNG وXML تم إنشاؤها تلقائيًا وتتطابق مع الرسومات المتجهة المحذوفة من المشروع ومن Drive.

توفير تطبيق يحتوي على رسومات متجهة قابلة للرسم

إذا كنت قد استخدمت AndroidX أو كان الحد الأدنى لمستوى واجهة برمجة التطبيقات هو Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) أو أعلى، ستحتوي حزمة APK على الرسومات المتجهة التي أضفتها باستخدام استوديو مواد العرض الخاصة بالمتّجهات. سيكون حجم حِزم APK هذه أصغر من حجمها في حال تم تحويل الصور المتجهة إلى صور PNG.

عندما يتضمّن الحد الأدنى لمستوى واجهة برمجة التطبيقات الإصدار Android 4.4 (المستوى 20 لواجهة برمجة التطبيقات) أو إصدارًا أقدم، وكان لديك رسومات متجهة ورسومات نقطية مقابلة في مشروعك، يتوفّر لك خياران لتقديم ملفات APK:

• إنشاء حزمة APK واحدة تتضمّن كلاً من الرسومات المتجهة وتمثيلات النقطية المقابلة هذا الحلّ هو الأسهل من حيث التنفيذ.
• إنشاء حِزم APK منفصلة لمستويات واجهة برمجة التطبيقات المختلفة عندما لا تضمِّن صور نقطية متوافقة في حِزمة APK لنظام التشغيل Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، يمكن أن يكون حجم حِزمة APK أصغر بكثير. لمزيد من المعلومات، يُرجى الاطّلاع على إتاحة حِزم APK المتعددة.

التوافق والقيود المفروضة على ملفات PSD

لا يتيح "استوديو مواد العرض الخاصة بالمتّجهات" استخدام جميع ميزات ملفات PSD. تتضمّن القائمة التالية ملخّصًا لخصائص PSD المتوافقة وغير المتوافقة، بالإضافة إلى بعض تفاصيل التحويل.

المستند

متاح:

• وضع ألوان PSD بتنسيق صورة نقطية أو تدرّج الرمادي أو مفهرس أو أحمر أخضر أزرق أو Lab أو CMYK
• عمق ألوان يبلغ 8 أو 16 أو 32 بت

تفاصيل الإحالات الناجحة:

• تصبح أبعاد مستند PSD هي أبعاد الرسومات المتجهة القابلة للرسم وأبعاد إطار العرض.

غير متاح:

• وضع ألوان PSD ثنائي اللون أو متعدّد القنوات

الأشكال

متاح:

• أقنعة القطع، إذا كانت قاعدة القطع شكلاً آخر
• عمليات الأشكال، بما في ذلك الدمج/الإضافة والتقاطع والطرح والاستبعاد

غير متاح:

• قاعدة التعبئة الزوجية والفردية التي تستخدمها أشكال Photoshop في الإصدار 6.0 من نظام التشغيل Android (المستوى 23 من واجهة برمجة التطبيقات) والإصدارات الأقدم، لا تتوافق الرسومات المتجهة إلا مع قاعدة التعبئة غير الصفرية. في الأشكال المتقاطعة ذاتيًا، يمكن أن يؤدي هذا القيد إلى اختلافات في العرض بين ملف PSD والمتّجه القابل للرسم الناتج. لحلّ هذه المشكلة، أضِف android:fillType="evenOdd" إلى الشكل في الرسم المتّجهي القابل للتوسيع. على سبيل المثال:

  <vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:viewportHeight="168"
    android:height="24dp"
    android:viewportWidth="209"
    android:width="24dp">
  
    <path
        android:fillAlpha="1.0"
        android:fillColor="#000000"
        android:fillType="evenOdd"
        android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
  </vector>

الخطوط الخارجية والتعبئة

متاح:

• الخطوط، بما في ذلك اللون ودرجة التعتيم والعرض والوصلة والغطاء والشرطات والمحاذاة
• تعبئة الألوان والخطوط الصلبة
• ألوان التخطيط والتعبئة المحددة كـ RGB أو Lab أو CMYK.

تفاصيل الإحالات الناجحة:

• إذا كان الخط متقطعًا أو تم اقتصاصه باستخدام قاعدة اقتصاص أو كان يستخدم محاذاة مختلفة عن المحاذاة إلى المنتصف، يحوّله "استوديو مواد العرض الخاصة بالمتّجهات" إلى شكل تعبئة في المتّجه القابل للرسم.

غير متاح:

• تعبئة الألوان والخطوط بخلاف الألوان الثابتة، مثل التدرجات

التعتيم

متاح:

• طبقات الأشكال التي تبلغ درجة عتامة 0

تفاصيل الإحالات الناجحة:

• يضرب "استوديو مواد العرض الخاصة بالمتّجهات" درجة تعتيم التعبئة في درجة تعتيم الطبقة لاحتساب قيمة ألفا للتعبئة.
• تضرب الأداة مستوى التعتيم الخاص بقاعدة القص (إذا كانت هناك قاعدة قص) في قيمة ألفا الخاصة بالتعبئة لاحتساب قيمة ألفا النهائية الخاصة بالتعبئة.
• تضرب الأداة درجة تعتيم الخط في درجة تعتيم الطبقة لاحتساب قيمة ألفا للخط.
• تضرب الأداة مستوى عتامة قاعدة القص (إذا كانت هناك قاعدة قص) في مستوى عتامة الحد الخارجي لاحتساب مستوى عتامة الحد الخارجي النهائي.

الطبقات

متاح:

• أي طبقة أشكال مرئية

تفاصيل الإحالات الناجحة:

• يحتفظ "استوديو مواد العرض الخاصة بالمتّجهات" بأسماء الطبقات في ملف الرسومات المتجهة القابلة للرسم.

غير متاح:

• تأثيرات الطبقة
• طبقات التسوية والنص
• أوضاع المزج (يتم تجاهلها)

التوافق والقيود المفروضة على ملفات SVG

لا يتيح "استوديو مواد العرض الخاصة بالمتّجهات" كل ميزات ملفات SVG. يلخّص القسم التالي الميزات المتوافقة وغير المتوافقة عندما تحوّل الأداة ملف SVG إلى VectorDrawable، بالإضافة إلى تفاصيل إضافية حول عملية التحويل.

الميزات المتاحة

يتوافق VectorDrawable مع جميع ميزات Tiny SVG 1.2 باستثناء النص.

الأشكال

VectorDrawable يتوافق مع مسارات SVG.

تحوِّل الأداة الأشكال الأساسية، مثل الدوائر والمربعات والمضلعات، إلى مسارات.

عمليات التحويل

تتيح الأداة استخدام مصفوفات التحويل وتطبيقها مباشرةً على مسارات العناصر الفرعية.

Groups

تتيح الأداة تجميع العناصر لترجمتها وتغيير حجمها وتدويرها. لا تتيح المجموعات استخدام سمة الشفافية.

تطبّق الأداة أيضًا أي نمط أو عتامة للمجموعة على المسارات الفرعية.

عمليات التعبئة والخطوط

يمكن ملء المسارات وتعبئتها باستخدام ألوان ثابتة أو تدرجات (خطية أو دائرية أو زاوية). لا يمكن استخدام سوى ضربات مركزية. أوضاع المزج غير مدعومة. المسارات المتقطّعة غير متاحة.

أقنعة

تتيح الأداة قناع قص واحدًا لكل مجموعة.

الميزات غير المتوافقة مع أداة استيراد ملفات SVG

أي ميزة غير مدرَجة في قسم الميزات المتوافقة السابق تكون غير متوافقة. تشمل الميزات غير المتوافقة ما يلي:

• تأثيرات الفلتر: لا تتوافق هذه التأثيرات، مثل التظليل والتمويه ومصفوفة الألوان.
• النص: ننصح بتحويل النص إلى أشكال باستخدام أدوات أخرى.
• ملء الأنماط

مراجع إضافية

لمزيد من المعلومات حول الرسومات المتجهة، يُرجى الاطّلاع على المراجع الإضافية التالية:

الوثائق

• صور متّجهة متحركة في Compose
• العمل باستخدام الصور

عرض المحتوى

• إضافة رسومات متّجهة متعددة الكثافة (طرق العرض)