إنشاء رموز التطبيقات (طرق العرض)

تنفيذ Jetpack Compose

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

إنشاء رمز شريط الإجراءات أو علامة تبويب

استخدِم استوديو مواد عرض الصور لإنشاء رموز شريط الإجراءات وعلامات التبويب للتنسيقات المستندة إلى العرض.

رموز شريط الإجراءات هي عناصر رسومية موضوعة في شريط الإجراءات وتمثّل بنود العمل الفردية. لمزيد من المعلومات، يُرجى الاطّلاع على إضافة الإجراءات ومعالجتها وشريط التطبيق - التصميم المتعدد الأبعاد {:.external} وتصميم شريط الإجراءات.

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

يضع "استوديو مواد عرض الصور" الرموز في المواقع الصحيحة ضمن أدلة res/drawable-<density>/.

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

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

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

  1. في الحقل نوع الرمز، اختَر رموز شريط الإجراءات وعلامات التبويب.

  2. اختَر نوع مادة العرض، ثم حدِّد مادة العرض في الحقل أدناه:

    • في الحقل قصاصة فنية، انقر على الزر.

      في مربع الحوار اختيار الرمز، اختَر رمزًا من رموز Material Design، ثم انقر على حسنًا.

    • في حقل المسار، حدِّد مسار الصورة واسم الملف. انقر على ... لاستخدام مربع حوار.

    • في حقل النص، اكتب سلسلة نصية واختَر خطًا.

    يظهر الرمز في منطقة مادة العرض المصدر على الجانب الأيسر، وفي منطقة المعاينة في أسفل المعالج.

  3. يمكنك تغيير الاسم وخيارات العرض بشكل اختياري باتّباع الخطوات التالية:

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

    • القص: لضبط الهامش بين رسم الرمز والحد في مادة العرض المصدر، انقر على نعم. تؤدي هذه العملية إلى إزالة المساحة الشفافة مع الحفاظ على نسبة العرض إلى الارتفاع. لترك أصل المصدر بدون تغيير، اختَر لا.

    • المسافة المتروكة: إذا أردت ضبط المسافة المتروكة لمادة العرض المصدر على جميع الجوانب الأربعة، حرِّك شريط التمرير. اختَر قيمة تتراوح بين ‎-10% و‎50%. إذا اخترت قص أيضًا، سيتم تنفيذ عملية القص أولاً.

    • المظهر: اختَر HOLO_LIGHT أو HOLO_DARK. أو لتحديد لون في مربّع الحوار اختيار اللون، انقر على مخصّص ثم انقر على حقل اللون المخصّص.

    ينشئ &quot;استوديو مواد عرض الصور&quot; الرمز داخل مربّع شفاف، ما يوفّر بعض المساحة المتروكة على الحواف. توفّر مساحة الحشو مساحة كافية لتطبيق تأثير الظل المنسدل العادي على الرمز.

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

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

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

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

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

    يضيف "استوديو مواد عرض الصور" الصور إلى مجلدات drawable الخاصة بالكثافات المختلفة.

الإشارة إلى مصدر صورة في الرمز

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

  • في معظم الحالات، يمكنك الإشارة إلى موارد الصور على النحو @drawable في رمز XML أو Drawable في رمز Java.

    على سبيل المثال، يعرض رمز XML للتصميم التالي العنصر القابل للرسم في ImageView:

    <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، التي تنطبق على عناصر واجهة المستخدم، مثل الأنشطة واللقطات والتصميمات وطرق العرض وما إلى ذلك.

  • إذا كان تطبيقك يستخدم "مكتبة الدعم"، يمكنك الرجوع إلى مصدر صورة في رمز XML باستخدام عبارة app:srcCompat. على سبيل المثال:

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

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

بعد توفّر مورد صورة في الدليل res/ الخاص بمشروعك، يمكنك الرجوع إليه من رمز Java أو تصميم XML باستخدام معرّف المورد. يضبط رمز Java التالي ImageView لاستخدام المورد drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

لمزيد من المعلومات، يُرجى الاطّلاع على الوصول إلى مراجع تطبيقك.