يقدّم التصميم المتعدد الأبعاد المسقط الرأسي لعناصر واجهة المستخدم. تساعد ميزة "الارتفاع" المستخدمين في فهم الأهمية النسبية لكل عنصر وتركيز انتباههم على المهمة الحالية.
يحدّد ارتفاع العرض، الممثّل بالسمة Z، المظهر المرئي للظل. تُلقي المشاهد ذات قيم Z الأعلى ظلالاً أكبر وأكثر نعومة، كما أنّها تحجب المشاهد ذات قيم Z الأقل. ومع ذلك، لا تؤثر قيمة Z الخاصة بعرض ما في حجم العرض.
يتم رسم الظلال بواسطة العنصر الرئيسي للعرض المرتفع. وتخضع هذه العناصر لاقتصاص العرض العادي، ويتم اقتصاصها تلقائيًا من خلال العنصر الأصل.
تفيد قيمة الارتفاع أيضًا في إنشاء صور متحركة ترتفع فيها الأدوات مؤقتًا فوق مستوى العرض عند تنفيذ إجراءات.
لمزيد من المعلومات، يُرجى الاطّلاع على الارتفاع في التصميم المتعدد الأبعاد.
تحديد الارتفاع لعروضك
تتضمّن قيمة Z لأحد العروض مكوّنَين:
- الارتفاع: المكوّن الثابت
- الترجمة: المكوّن الديناميكي المستخدَم في الصور المتحركة
Z = elevation + translationZ
يتم قياس قيم Z بوحدات بكسل مستقلة الكثافة (dp).
لضبط المسقط الرأسي التلقائي (الثابت) لعنصر، استخدِم السمة 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>
يعرض المنظر ظلًا بزوايا مستديرة، لأنّ العنصر القابل للرسم في الخلفية يحدّد مخطط المنظر. يؤدي توفير مخطط تفصيلي مخصّص إلى إلغاء الشكل التلقائي لظل العرض.
لتحديد مخطط تفصيلي مخصّص لطريقة عرض في الرمز، اتّبِع الخطوات التالية:
- وسِّع نطاق فئة
ViewOutlineProvider. - تجاوز الطريقة
getOutline(). - عيِّن مقدّم المخطط التفصيلي الجديد للعرض باستخدام الطريقة
View.setOutlineProvider().
يمكنك إنشاء مخططات تفصيلية بيضاوية ومستطيلة ذات زوايا مستديرة باستخدام الطرق في فئة Outline. يحصل موفّر المخطط التفصيلي التلقائي للعروض على المخطط التفصيلي من خلفية العرض. لمنع طريقة عرض من إلقاء ظل، اضبط موفّر المخطط التفصيلي على null.
عدد المشاهدات التي حققتها المقاطع
تتيح لك طرق العرض التي يتم قصها تغيير شكل طريقة العرض. يمكنك قص أجزاء من طرق العرض لتحقيق التناسق مع عناصر التصميم الأخرى أو لتغيير شكل طريقة العرض استجابةً لإدخال المستخدم. يمكنك قصّ جزء من العرض إلى منطقة المخطط التفصيلي باستخدام الطريقة View.setClipToOutline(). لا تتوافق مع ميزة القص سوى المخططات التفصيلية التي تكون على شكل مستطيلات ودوائر ومستطيلات مستديرة، وذلك وفقًا لما يحدّده الأسلوب Outline.canClip().
لاقتصاص عرض إلى شكل عنصر قابل للرسم، اضبط العنصر القابل للرسم كخلفية للعرض، كما هو موضّح في المثال السابق، واستدعِ الدالة View.setClipToOutline().
تُعدّ عملية قصّ طرق العرض عملية مكلفة، لذا لا تحرّك الشكل الذي تستخدمه لقصّ طريقة العرض. لتحقيق هذا التأثير، استخدِم الرسوم المتحركة الخاصة بالكشف.