توفير صور اقتصاصية للعرض

تجربة طريقة ComposeAllowed
Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام القواطع المعروضة في Compose.
عرض القواطع في Compose →

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

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

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

صورة تعرض مثالاً على صورة مقطوعة لشاشة أعلى منتصف الشاشة
الشكل 1. 1 صورة مقطوعة للشاشة:

اختَر كيفية معالجة تطبيقك للمناطق المقطوعة.

إذا كنت لا تريد أن يتداخل المحتوى مع منطقة مقطوعة، يمكنك بشكل عام التأكّد من عدم تداخل المحتوى مع شريط الحالة وشريط التنقّل. إذا كنت تعرض الصورة المقطوعة في المنطقة المقطوعة، استخدِم WindowInsetsCompat.getDisplayCutout() لاسترداد عنصر DisplayCutout الذي يحتوي على الأجزاء الداخلية الآمنة ومربّع الإحاطة لكل صورة مقطوعة. تتيح لك واجهات برمجة التطبيقات هذه التحقق مما إذا كان المحتوى الخاص بك يتداخل مع الصورة المقطوعة بحيث يمكنك تغيير موضعه إذا لزم الأمر.

يمكنك أيضًا تحديد ما إذا كان المحتوى معروضًا خلف منطقة الصورة المقطوعة. تتحكّم سمة تنسيق نافذة layoutInDisplayCutoutMode في طريقة رسم المحتوى ضمن منطقة الصورة المقطوعة. يمكنك ضبط layoutInDisplayCutoutMode على إحدى القيم التالية:

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: يُسمح دائمًا بتوسيع المحتوى ليشمل المناطق المقطوعة. وهذا هو الوضع التلقائي للأجهزة التي تعمل بالإصدار 15 من نظام التشغيل Android أو الإصدارات الأحدث.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: يتم عرض المحتوى في منطقة الصورة المقطوعة بالوضعَين العمودي والأفقي. لا تستخدمه للنوافذ العائمة.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: لا يظهر المحتوى أبدًا في منطقة الصورة المقطوعة.

يمكنك ضبط وضع الصورة المقطوعة آليًا أو من خلال ضبط نمط في نشاطك. يحدد المثال التالي نمطًا لتطبيق السمة LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES على النشاط.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

توضّح الأقسام التالية أوضاع الصور المقطوعة المختلفة بمزيد من التفصيل.

السلوك التلقائي

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

عرض المحتوى في مناطق مقطوعة لحافة قصيرة

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

الصورة التالية هي مثال على LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES لجهاز في الوضع العمودي:

صورة تعرض المحتوى في منطقة الصورة المقطوعة أثناء استخدام الوضع &quot;بورتريه&quot;
الشكل 2. يتم عرض المحتوى على شكل منطقة مقطوعة أثناء استخدام الوضع "بورتريه".

الصورة التالية هي مثال على السمة LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES لجهاز في الوضع الأفقي:

صورة تعرض المحتوى في منطقة الصورة المقطوعة أثناء استخدام الوضع الأفقي
الشكل 3. يتم عرض المحتوى على شكل منطقة مقطوعة أثناء استخدام الوضع الأفقي.

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

يعتبر القاطع في الزاوية على الحافة القصيرة:

صورة تعرض جهازًا عليه رسم مائل بزاوية
الشكل 4. جهاز عليه صورة مقطوعة لزاوية

عدم عرض المحتوى مطلقًا في منطقة الصورة المقطوعة للشاشة

باستخدام LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER، لا يُسمَح أبدًا للنافذة أن تتداخل مع منطقة الصورة المقطوعة.

إليك مثال على علامة LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER في الوضع العمودي:

صورة تعرض LAYOUT_IN_DISPLAY_CUTOUT_mode_NEVER للصورة العمودية
الشكل 5. مثال على LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER لوضع "بورتريه".

في ما يلي مثال على LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER في الوضع الأفقي:

صورة تعرض LAYOUT_IN_DISPLAY_CUTOUT_mode_NEVER للوضع الأفقي
الشكل 6. مثال على LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER في الوضع الأفقي

أفضل الممارسات لإتاحة ظهور الصور المقطوعة للشاشة

عند التعامل مع القواطع للعرض، يجب مراعاة ما يلي:

  • ضع في اعتبارك موضع العناصر المهمة في واجهة المستخدم. لا تدع منطقة الصورة المقطوعة تحجب أي نص أو عناصر تحكم أو معلومات أخرى مهمة.
  • لا تضع أو توسِّع أي عناصر تفاعلية تتطلب التعرّف عليها بدقة في منطقة الصورة المقطوعة. قد تكون حساسية اللمس أقل في منطقة الصورة المقطوعة.

  • استخدِم WindowInsetsCompat، إن أمكن، لاسترداد ارتفاع شريط الحالة وتحديد المساحة المتروكة المناسبة لتطبيقها على المحتوى. تجنَّب الترميز الثابت لارتفاع شريط الحالة، لأنّ ذلك قد يؤدي إلى التداخل أو اقتطاع المحتوى.

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

  • استخدِم View.getLocationInWindow() لتحديد مقدار مساحة النافذة التي يستخدمها تطبيقك. ولا تفترض أن التطبيق يستخدم النافذة بأكملها، ولا يستخدم View.getLocationOnScreen().

  • استخدِم وضع الاقتصاص shortEdges أو never إذا احتاج تطبيقك إلى الانتقال إلى الوضع المجسم والخروج منه. وقد يؤدي سلوك الاقتطاع التلقائي إلى عرض المحتوى في تطبيقك على منطقة الصورة المقطوعة أثناء وجود أشرطة النظام، ولكن ليس في الوضع المجسم. وينتج عن ذلك انتقال المحتوى لأعلى ولأسفل أثناء الانتقالات، كما هو موضح في المثال التالي.

    صورة تعرض محتوى يتحرّك للأعلى وللأسفل أثناء الانتقالات.
    الشكل 8. مثال على محتوى يتحرّك للأعلى وللأسفل أثناء الانتقالات

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

    صورة تعرض نافذة مقابل إحداثيات الشاشة عندما يكون المحتوى مُعدًّا للعرض على شاشة عريضة أفقيًا
    الشكل 9. إحداثيات النافذة مقابل الشاشة عندما يكون المحتوى مُعدًّا للعرض على شاشة عريضة أفقيًا

  • عند التعامل مع MotionEvent، استخدِم MotionEvent.getX() و MotionEvent.getY() لتجنُّب مشاكل الإحداثيات المتشابهة. لا تستخدِم السمة MotionEvent.getRawX() أو MotionEvent.getRawY().

اختبار طريقة عرض المحتوى

اختبِر جميع شاشات تطبيقك وتجاربه. اختبر الأمر على الأجهزة التي تحتوي على أنواع مختلفة من القواطع، إن أمكن. إذا لم يكن لديك جهاز به صورة مقطوعة، يمكنك محاكاة إعدادات الاقتصاص الشائعة على أي جهاز أو محاكي يعمل بالإصدار Android 9 أو الإصدارات الأحدث من خلال تنفيذ ما يلي:

  1. فعِّل خيارات المطوّرين.
  2. في شاشة خيارات المطوّرين، انتقِل للأسفل إلى قسم الرسم واختَر محاكاة شاشة عرض بها صورة مقطوعة.

  3. اختَر نوع الصورة المقطوعة.

    صورة تعرض كيفية محاكاة صورة مقطوعة للشاشة في المحاكي
    الشكل 10. خيارات المطوّرين لاختبار كيفية عرض المحتوى.

مصادر إضافية