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

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

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

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

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

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

اختيار كيفية معالجة تطبيقك لأجزاء الصور المصغّرة

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

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

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: يتم عرض المحتوى في منطقة مقطوعة عند عرضه في الوضع العمودي، ويظهر المحتوى في إطار مُعدّ للعرض على شاشة عريضة أفقيًا عند عرضه في الوضع الأفقي.
  • 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 لجهاز باللون العمودي:

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

مراجع إضافية