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

المفاهيم والتنفيذ في Jetpack Compose

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

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

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

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

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

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

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

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

أنيق

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

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

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

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

الشكل 1 متّجه قابل للرسم معروض على زر في تصميم

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

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

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

  2. في عرض Android ضمن نافذة المشروع، انقر مرّتين على ملف XML للتصميم، مثل content_main.xml.

  3. انقر على علامة التبويب تصميم لعرض أداة تعديل التنسيق.

  4. اسحب التطبيق المصغّر ImageButton من نافذة اللوحة إلى أداة تعديل التنسيق.

  5. في مربّع الحوار الموارد، اختَر Drawable في اللوحة اليمنى، ثم اختَر الرسم المتّجهي الذي استوردته. انقر على حسنًا.

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

  6. لتغيير لون الصورة إلى لون التمييز المحدّد في المظهر، ابحث عن السمة درجة اللون في نافذة السمات وانقر على … .

  7. في مربع الحوار الموارد، اختَر اللون في اللوحة اليمنى، ثم اختَر colorAccent. انقر على حسنًا.

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

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

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

    يستردّ الرمز التالي الصورة كـ Drawable:

    Kotlin

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

    Java

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

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

  • إذا كان تطبيقك يستخدم AndroidX على الإطلاق (حتى إذا لم يكن لديك عبارة vectorDrawables.useSupportLibrary = true في ملف build.gradle)، يمكنك أيضًا الرجوع إلى متّجه قابل للرسم باستخدام عبارة app:srcCompat. على سبيل المثال:

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

  • في بعض الأحيان، قد تحتاج إلى تحويل نوع مورد قابل للرسم إلى فئته الدقيقة، مثلاً عندما تحتاج إلى استخدام ميزات معيّنة من الفئة VectorDrawable. لإجراء ذلك، يمكنك استخدام رمز مثل ما يلي:

    Kotlin

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

    Java

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

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

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