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

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

لمحة عن Vector Asset Studio

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

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

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

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

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

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

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

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

اعتبارات بشأن ملفات SVG وPSD

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

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

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

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

يلخص الجدول التالي الطريقتين اللتين يمكنك استخدامهما للتوافق مع الأنظمة القديمة:

الأسلوب العناصر القابلة للرسم في حزمة APK عناصر XML VectorDrawable الإصدار إنشاء العلامات رمز التطبيق
إنشاء ملفات PNG صورة متّجه ونقطة نقطية المجموعة الفرعية المتوافقة

SVG: مكون Android الإضافي لبرنامج Gradle 1.5.0 أو إصدار أحدث

PSD: Android Studio 2.2 أو إصدار أحدث

 درجة الحرارة التلقائية استخدام مجموعة متنوعة من أساليب الترميز
الإصدار 23.2 أو الإصدارات الأحدث من مكتبة الدعم المتجه الدعم الكامل مكوّن Android الإضافي لنظام Gradle 2.0 أو الإصدارات الأحدث بيانات مكتبة الدعم مطلوبة مجموعة فرعية من أساليب الترميز المتوافقة

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

إنشاء PNG

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

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

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

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

مكتبة الدعم

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

قبل استخدام Vector Asset Studio، يجب إضافة عبارة إلى ملف build.gradle:

رائع

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'com.android.support:appcompat-v7:23.2.0'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("com.android.support:appcompat-v7:23.2.0")
}

يجب أيضًا استخدام أساليب ترميز متوافقة مع "مكتبة الدعم"، مثل استخدام السمة app:srcCompat بدلاً من السمة android:src في الرسومات المتّجهة. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على الإصدار 23.2 من Android Support Library.

استوديو مواد العرض قيد التشغيل

لبدء Vector Asset Studio، اتّبِع الخطوات التالية:

  1. في "استوديو Android"، افتح مشروعًا لتطبيق Android.
  2. في نافذة المشروع، اختَر عرض Android.
  3. انقر بزر الماوس الأيمن على المجلد res واختَر جديد > مادة عرض Vector.

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

    تظهر أداة Vector Asset Studio.

    الشكل 1. استوديو مواد العرض المتّجهات

  4. إذا ظهر مربّع الحوار بحاجة إلى مكوّن جديد من مكوّنات Android الإضافية لبرنامج Gradle، صحِّح إصدار إصدار Gradle على النحو التالي:
    1. حدد ملف > بنية المشروع.
    2. في مربّع الحوار بنية المشروع، اختَر مشروع.
    3. في حقل إصدار مكوّن Android الإضافي، غيِّر إصدار مكوّن Android الإضافي لنظام Gradle إلى 1.5.0 أو إصدارًا أحدث، وانقر على حسنًا.

      4. يُزامن Gradle المشروع.

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

      5. تظهر أداة Vector Asset Studio.

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

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

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

إضافة رمز مادة

بعد فتح Vector Asset Studio، يمكنك إضافة رمز مواد على النحو التالي:

  1. في Vector Asset Studio، اختَر Material Icon.
  2. في حقل "الرمز"، انقر على الزر.

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

    الشكل 2. فلترة رموز المواد في Vector Asset Studio

    4. اختَر رمز مادة وانقر على حسنًا. يظهر الرمز في معاينة المتجه القابلة للرسم.

  4. يمكنك بشكل اختياري تغيير اسم المورد وحجمه ودرجة تعتيمه وإعدادات النسخ المطابق من اليمين إلى اليسار (RTL):
    • الاسم - اكتب اسمًا جديدًا إذا كنت لا تريد استخدام الاسم التلقائي. تنشئ Vector Asset Studio تلقائيًا اسمًا فريدًا (يضيف رقمًا إلى نهاية الاسم) إذا كان اسم المورد هذا متوفرًا من قبل في المشروع. ويمكن أن يحتوي الاسم على أحرف صغيرة وشرطات سفلية وأرقام فقط.
    • تجاوز - حدد هذا الخيار إذا كنت تريد ضبط حجم الصورة. عند كتابة مقاس جديد، يظهر التغيير في منطقة المعاينة.

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

    • التعتيم - استخدم شريط التمرير لضبط تعتيم الصورة. يظهر التغيير في منطقة المعاينة.
    • تفعيل النسخ المطابق التلقائي لتنسيق RTL: يمكنك تحديد هذا الخيار إذا كنت تريد عرض الصورة المطابقة عندما يكون التنسيق من اليمين إلى اليسار بدلاً من اليمين إلى اليسار. على سبيل المثال، تتم قراءة بعض اللغات من اليمين إلى اليسار. أما إذا كان لديك رمز السهم، فيمكنك عرض صورة مطابقة له في هذه الحالة. وإذا كنت تعمل على مشروع قديم، قد تحتاج أيضًا إلى إضافة android:supportsRtl="true" إلى بيان التطبيق. تتوفّر ميزة النسخ المطابق التلقائي في نظام التشغيل Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، كما تتوفّر في Support Library.
  5. انقر على التالي.
  6. يمكنك بشكل اختياري تغيير الوحدة النمطية ودليل الموارد:
    • دليل Res: اختَر مجموعة مصادر الموارد التي تريد إضافة الخط المتجه القابل للرسم إليها: src/main/res أو src/debug/res أو src/release/res أو مجموعة مصادر من تحديد المستخدم. تنطبق مجموعة المصادر الرئيسية على جميع صيغ الإصدار، بما في ذلك تصحيح الأخطاء والإصدار. تلغي مجموعات مصادر تصحيح الأخطاء والإصدار مجموعة المصادر الرئيسية ويتم تطبيقها على إصدار واحد من الإصدار. يتم استخدام مصدر تصحيح الأخطاء لغرض تصحيح الأخطاء فقط. لتحديد مجموعة مصادر جديدة، اختَر ملف > بنية المشروع > التطبيق > أنواع الإصدارات. على سبيل المثال، يمكنك تحديد مجموعة مصادر تجريبية وإنشاء نسخة من رمز يتضمّن النص "تجريبي" في أسفل يسار الصفحة. ولمزيد من المعلومات، راجِع ضبط صيغ الإصدار.

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

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

    8. تضيف Vector Asset Studio ملف XML يحدد المتجه القابل للرسم إلى المشروع في مجلد app/src/main/res/drawable/. من عرض Android لنافذة المشروع، يمكنك عرض ملف XML للمتجهات الذي تم إنشاؤه في المجلد drawable.

  8. قم ببناء المشروع.

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

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

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

بعد فتح Vector Asset Studio، يمكنك استيراد ملف SVG أو PSD على النحو التالي:

  1. في Vector Asset Studio، اختَر Local file.

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

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

    3. تظهر الصورة في معاينة المتجه القابلة للرسم.

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

    الشكل 3. تعرض Vector Asset Studio بعض الأخطاء.

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

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

  3. يمكنك بشكل اختياري تغيير اسم المورد وحجمه ودرجة التعتيم له، وإعداد النسخ المطابق من اليمين إلى اليسار (RTL):
    • الاسم - اكتب اسمًا جديدًا إذا كنت لا تريد استخدام الاسم التلقائي. تنشئ Vector Asset Studio تلقائيًا اسمًا فريدًا (يضيف رقمًا إلى نهاية الاسم) إذا كان اسم المورد هذا متوفرًا من قبل في المشروع. ويمكن أن يحتوي الاسم على أحرف صغيرة وشرطات سفلية وأرقام فقط.
    • تجاوز - حدد هذا الخيار إذا كنت تريد ضبط حجم الصورة. وبعد اختيارها، يتغير الحجم إلى حجم الصورة نفسها. وعند تغيير الحجم، يظهر التغيير في منطقة المعاينة. القيمة التلقائية هي 24 × 24 بكسل مستقل الكثافة، وهي محدّدة في مواصفات التصميم المتعدد الأبعاد.
    • التعتيم - استخدم شريط التمرير لضبط تعتيم الصورة. يظهر التغيير في منطقة المعاينة.
    • تفعيل النسخ المطابق التلقائي لتنسيق RTL: يمكنك تحديد هذا الخيار إذا كنت تريد عرض الصورة المطابقة عندما يكون التنسيق من اليمين إلى اليسار بدلاً من اليمين إلى اليسار. على سبيل المثال، تتم قراءة بعض اللغات من اليمين إلى اليسار. أما إذا كان لديك رمز السهم، فيمكنك عرض صورة مطابقة له في هذه الحالة. إذا كنت تعمل على مشروع قديم، قد تحتاج إلى إضافة android:supportsRtl="true" إلى بيان التطبيق. تتوفّر ميزة النسخ المطابق التلقائي في الإصدار Android 5.0 (المستوى 21 لواجهة برمجة التطبيقات) والإصدارات الأحدث، وكذلك في Support Library.
  4. انقر على التالي.
  5. يمكنك تغيير دليل الموارد بشكل اختياري:
    • دليل Res: اختَر مجموعة مصادر الموارد التي تريد إضافة الخط المتجه القابل للرسم إليها: src/main/res أو src/debug/res أو src/release/res أو مجموعة مصادر من تحديد المستخدم. تنطبق مجموعة المصادر الرئيسية على جميع صيغ الإصدار، بما في ذلك تصحيح الأخطاء والإصدار. تلغي مجموعات مصادر تصحيح الأخطاء والإصدار مجموعة المصادر الرئيسية ويتم تطبيقها على إصدار واحد من الإصدار. يتم استخدام مصدر تصحيح الأخطاء لغرض تصحيح الأخطاء فقط. لتحديد مجموعة مصادر جديدة، اختَر ملف > بنية المشروع > التطبيق > أنواع الإصدارات. على سبيل المثال، يمكنك تحديد مجموعة مصادر تجريبية وإنشاء نسخة من رمز يتضمّن النص "تجريبي" في أسفل يسار الصفحة. ولمزيد من المعلومات، راجِع ضبط صيغ الإصدار.

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

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

    7. تضيف Vector Asset Studio ملف XML يحدد المتجه القابل للرسم إلى المشروع في مجلد app/src/main/res/drawable/. من عرض Android لنافذة المشروع، يمكنك عرض ملف XML للمتجهات الذي تم إنشاؤه في المجلد drawable.

  7. قم ببناء المشروع.

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

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

إضافة متجه قابل للرسم إلى تنسيق

في ملف التنسيق، يمكنك ضبط أي تطبيق مصغّر مرتبط بالرموز، مثل ImageButton وImageView وما إلى ذلك، للإشارة إلى متجه قابل للرسم. على سبيل المثال، يُظهر التخطيط التالي متجهًا قابلاً للرسم معروضًا على زر:

الشكل 4. متجه قابل للرسم معروض على زر في تخطيط.

لعرض متجه قابل للرسم على أداة، كما هو موضح في الشكل:

  1. افتح مشروعًا واستورد متجهًا قابلاً للرسم.

    2. يستخدم هذا المثال مشروع هاتف/جهاز لوحي تم إنشاؤه باستخدام معالج مشروع جديد.

  2. في عرض Android لنافذة المشروع، انقر مرّتين على ملف XML للتنسيق، مثل content_main.xml.
  3. انقر على علامة التبويب تصميم لعرض أداة تعديل التنسيق.
  4. اسحب التطبيق المصغّر ImageButton من نافذة لوحة الألوان إلى "أداة تعديل التنسيق".
  5. في مربّع الحوار الموارد، اختَر قابل للرسم في اللوحة اليمنى، ثم اختَر الخط المتجه القابل للرسم الذي تم استيراده. انقر على حسنًا.

    6. يظهر المتجه القابل للرسم على ImageButton في التنسيق.

  6. لتغيير لون الصورة إلى لون التمييز المحدّد في المظهر، في نافذة الخصائص، حدِّد موقع السمة درجة اللون وانقر على ... .
  7. في مربّع حوار الموارد، اختَر اللون في اللوحة اليمنى، ثم اختَر اللون التشكيل. انقر على حسنًا.

    8. يتغير لون الصورة إلى لون التمييز في التنسيق.

إذا كان المشروع يستخدم Support Library، يجب أن يكون الرمز ImageButton على النحو التالي:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

إذا لم يكن المشروع يستخدم Support Library، سيكون رمز المتّجه القابل للرسم هو android:src="@drawable/ic_build_black_24dp" بدلاً من ذلك.

الإشارة إلى متجه قابل للرسم في التعليمة البرمجية

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

  • في معظم الحالات، يمكنك الإشارة إلى المتجهات القابلة للرسم على النحو التالي: @drawable في رمز XML أو Drawable في رمز Java.

    • على سبيل المثال، يُطبق رمز XML للتنسيق التالي الصورة على طريقة عرض:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    يعمل رمز Java التالي على استرداد الصورة على أنّها Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    تتوفّر الطريقة getResources() في الفئة Context، والتي تنطبق على كائنات واجهة المستخدم، مثل الأنشطة والأجزاء والتنسيقات وطرق العرض وما إلى ذلك.

  • إذا كان تطبيقك يستخدم "مكتبة الدعم" على الإطلاق (حتى إذا لم تتوفر عبارة vectorDrawables.useSupportLibrary = true في ملف build.gradle)، يمكنك أيضًا الإشارة إلى متجه قابل للرسم باستخدام عبارة app:srcCompat. مثلاً:
    • <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />
  • قد تحتاج أحيانًا إلى تحويل المورد القابل للرسم إلى فئته المحدّدة، على سبيل المثال، عندما تحتاج إلى استخدام ميزات معيّنة لفئة VectorDrawable. للقيام بذلك، يمكنك استخدام رمز Java كما يلي:

    • Kotlin

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val vectorDrawable = drawable as VectorDrawable
} else {
    val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

يمكنك الوصول إلى موارد المتجه القابلة للرسم من سلسلة التعليمات الرئيسية فقط.

بالنسبة إلى أسلوب Support Library، عليك استخدام أساليب ترميز متوافقة مع Support Library. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على الإصدار 23.2 من Android Support Library.

تعديل رمز XML الذي تم إنشاؤه من خلال Vector Asset Studio

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

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

لتعديل ملف XML للمتجه عند عدم استخدام أسلوب مكتبة الدعم:

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

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

    الشكل 5. هو ملف XML متجه معروض في برنامج Code Editor ونافذة "Preview" (معاينة).

  2. عدِّل رمز XML استنادًا إلى ما يتوافق مع الحد الأدنى لمستوى واجهة برمجة التطبيقات:
    • الإصدار Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث: تتوافق أداة Vector Asset Studio مع جميع العناصر Drawable و VectorDrawable. يمكنك إضافة عناصر XML وتغيير القيم.
    • الإصدار 4.4 من نظام التشغيل Android (المستوى 20 من واجهة برمجة التطبيقات) والإصدارات الأقدم: يتوافق Vector Asset Studio مع جميع عناصر Drawable ومجموعة فرعية من عناصر VectorDrawable. للاطّلاع على قائمة، يمكنك مراجعة حلول التوافق مع الأنظمة القديمة القابلة للرسم مع المتّجهات. يمكنك تغيير القيم في الرمز الذي تم إنشاؤه وإضافة عناصر XML المتوافقة.
  3. أنشِئ المشروع وتأكَّد من أنّ المتّجهات القابلة للرسم والصور النقطية المقابلة تبدو متشابهة.

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

    الشكل 6. صورة PNG معروضة في الهامش الأيسر من أداة تعديل الرموز

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

لإزالة متجه قابل للرسم من مشروع:

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

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

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

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

  3. اختَر إنشاء > مشروع تنظيف.

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

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

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

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

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

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

لا تتوافق Vector Asset Studio مع جميع ميزات ملفات PSD. تلخّص القائمة التالية خصائص PSD المتوافقة وغير المتوافقة، بالإضافة إلى بعض تفاصيل الإحالات الناجحة.

المستند

متاح:

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

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

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

غير متاح:

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

الأشكال

متاح:

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

غير متاح:

  • قاعدة تعبئة زوجية زوجية تستخدمها أشكال Photoshop. في نظام التشغيل Android 6.0 (المستوى 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>

شطب وملء

متاح:

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

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

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

غير متاح:

  • تعبئة الألوان والضربات الأخرى بخلاف الحالة الصلبة، مثل التدرجات

تعتيم

متاح:

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

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

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

الطبقات

متاح:

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

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

  • تحتفظ Vector Asset Studio باسم الطبقات في الملف المتجه القابل للرسم.

غير متاح:

  • تأثيرات الطبقات:
  • طبقات النص والتعديل.
  • أوضاع الدمج (تم تجاهلها)

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

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

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

يتيح VectorDrawable استخدام جميع الميزات في الإصدار Tiny SVG 1.2 باستثناء النص.

الأشكال

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

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

التحويلات

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

المجموعات

تدعم الأداة عناصر المجموعات للترجمة والتحجيم والتدوير. لا تتيح المجموعات خاصية التعتيم.

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

الملء والاستخدام

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

أقنعة

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

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

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

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