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

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

لمحة عن Vector Asset Studio

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

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

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

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

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

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

تتيح لك أداة 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. من خلال مكتبة الدعم، يمكنك استخدام الصف AnimatedVectorDrawableCompat لتحريك الفئة VectorDrawable لنظام التشغيل Android 3.0 (مستوى واجهة برمجة التطبيقات 11) والإصدارات الأحدث. لمزيد من المعلومات، راجِع تحريك المتجهات القابلة للرسم.

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

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

قد يكلف التحميل الأولي لمتجه قابل للرسم أكثر من دورات وحدة المعالجة المركزية مقارنةً بصورة الرسومات النقطية المقابلة. وبعد ذلك، يتشابه استخدام الذاكرة والأداء بين الاثنين. ننصحك بتقييد صورة المتجه بحد أقصى 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 المحددة بواسطة اللغة الخاصة بالمجال (DSL) السياسة المنشأه الخاصة في ملف 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 أو إصدارًا أحدث إلى جانب مكوّن 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.

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

لبدء Vector Asset Studio

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

    يظهر رمز Vector Asset Studio.

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

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

    5. في الملف الشخصي لنظام التشغيل Android في نافذة المشروع، انقر بزر الماوس الأيمن على المجلد res واختَر جديد > مادة عرض متّجه.
    6. يظهر رمز Vector Asset Studio.

  6. تابع إلى استيراد رسم متجه.

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

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

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

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

  1. في Vector Asset Studio، اختَر Material Icon.
  2. في حقل "الرمز"، انقر على الزر.
  3. سيظهر مربّع الحوار اختيار رمز. يمكنك فلترة الرموز المرئية عن طريق اختيار فئة للرموز من القائمة على اليمين أو الكتابة في حقل البحث كما هو موضّح في الشكل 2.

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

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

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

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

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

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

  10. بناء المشروع.
  11. إذا كان الحد الأدنى من مستوى واجهة برمجة التطبيقات هو الإصدار Android 4.4 (المستوى 20 لواجهة برمجة التطبيقات) والإصدارات الأقدم، ولم تفعِّل أسلوب "مكتبة الدعم"، سينشئ 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. يجب أن يكون الملف على محرك أقراص محلي. إذا كان هذا الجهاز متصلاً بالشبكة مثلاً، يجب أولاً تنزيله على محرك أقراص محلي.

  3. حدِّد ملف صورة بالنقر على ... .
  4. ستظهر الصورة في معاينة Vector قابلة للرسم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إذا كان المشروع يستخدم 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" />

إذا لم يكن المشروع يستخدم "مكتبة الدعم"، سيكون رمز المتجه القابل للرسم هو 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)

    جافا

    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
    }
    

    جافا

    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.

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

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

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

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

  1. في نافذة Project (المشروع)، انقر مرّتين على ملف XML للمتّجهات الذي تم إنشاؤه في المجلد drawable.
  2. يظهر ملف XML في نافذتَي المحرّر والمعاينة.

    الشكل 5. ملف XML متجه معروض في محرر التعليمات البرمجية ونافذة المعاينة.

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

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

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

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

  1. في نافذة Project (مشروع)، احذف ملف XML للمتّجه الذي تم إنشاؤه من خلال اختيار الملف والضغط على مفتاح Delete (حذف) (أو اختَر Edit (تعديل) > Delete (حذف)).
  2. سيظهر مربّع حوار الحذف الآمن.

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

  5. اختَر إنشاء > مشروع تنظيف.
  6. تتم إزالة أي ملفات تم إنشاؤها تلقائيًا بتنسيق 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

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

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