إنشاء الظلال وطرق عرض المقاطع

تجربة طريقة الإنشاء
Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام السمات في Compose.
Modifier.shadow() →

يقدم Material Design المسقط الرأسي لعناصر واجهة المستخدم. يساعد الارتفاع المستخدمين على فهم الأهمية النسبية لكل عنصر وتركيز انتباههم على المهمة الحالية.

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

صورة توضح كيف ينتج ارتفاع العرض ظلاً.
الشكل 1. الارتفاع على المحور Z والظل الناتج.

يتم رسم الظلال بواسطة العنصر الرئيسي للعرض المرتفع. تخضع لاقتصاص العرض القياسي ويتم اقتصاصها بواسطة الأصل افتراضيًا.

المسقط الرأسي مفيد أيضًا لإنشاء رسوم متحركة ترتفع فيها الأدوات مؤقتًا فوق مستوى العرض عند تنفيذ الإجراءات.

لمزيد من المعلومات، راجع الارتفاع في التصميم المتعدد الأبعاد.

تعيين الارتفاع لطرق العرض

تتكون قيمة Z للملف الشخصي من مكوّنين:

  • الارتفاع: المكون الثابت
  • الترجمة: المكون الديناميكي المستخدم في الرسوم المتحركة

Z = elevation + translationZ

ويتم قياس القيم Z بوحدات بكسل مستقلة الكثافة (dp).

صورة تعرض ظلالاً مختلفة لارتفاعات مختلفة بوحدات بكسل مستقلة الكثافة (dp)
الشكل 2. ظلال مختلفة لارتفاعات مختلفة بوحدات بكسل مستقلة الكثافة

لضبط الارتفاع التلقائي (الراحة) للعرض، استخدِم السمة android:elevation في تنسيق XML. لضبط ارتفاع العرض في رمز النشاط، استخدم طريقة View.setElevation().

لضبط ترجمة عرض، استخدم الطريقة View.setTranslationZ().

تتيح لك الطريقتان ViewPropertyAnimator.z() و ViewPropertyAnimator.translationZ() إضافة تأثيرات متحركة لارتفاع طرق العرض. للمزيد من المعلومات، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ ViewPropertyAnimator ودليل مطوّر الرسوم المتحركة للمواقع.

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

تخصيص ظلال ومخططات العرض

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

ضع في الاعتبار طريقة العرض التالية، والتي تم تحديدها باستخدام خلفية قابلة للرسم:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

يمكن رسم الخلفية على شكل مستطيل بزوايا مستديرة:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

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

لتحديد مخطط مخصص لأحد طرق العرض في التعليمة البرمجية، قم بما يلي:

  1. عليك تمديد الفئة ViewOutlineProvider.
  2. ويمكنك إلغاء طريقة getOutline().
  3. يمكنك تخصيص موفِّر المخطط الجديد لعرضك باستخدام طريقة View.setOutlineProvider().

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

عدد المشاهدات التي حققتها المقاطع

تتيح لك طرق عرض الاقتصاص تغيير شكل العرض. يمكنك اقتطاع طرق العرض من أجل التناسق مع عناصر التصميم الأخرى أو لتغيير شكل العرض استجابةً لإدخال المستخدم. يمكنك اقتصاص عرض على مساحة المخطط باستخدام View.setClipToOutline(). تتيح المخططات التفصيلية المستطيلات والدوائر والمستطيلات المستديرة فقط استخدام القطع، كما هو محدد في الطريقة Outline.canClip().

لاقتصاص عرض لشكل قابل للرسم، اضبط العنصر القابل للرسم كخلفية للعرض، كما هو موضح في المثال السابق، واستدعِ الطريقة View.setClipToOutline().

تعتبر طرق عرض الاقتصاص عملية مكلفة، لذا لا تتحرك في الشكل الذي تستخدمه لاقتصاص عرض. لتحقيق هذا التأثير، استخدِم ميزة عرض الصور المتحركة.