الخطوط في Compose

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

مثال عن صورة مقطوعة في الوضع العمودي
الشكل 1. مثال عن صورة مقطوعة في وضع "بورتريه"
مثال صورة مقطوعة في الوضع الأفقي
الشكل 2. مثال عن صورة مقطوعة في الوضع الأفقي

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

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

الحالة التلقائية

يتم تلقائيًا تضمين خطوط الشاشة في معلومات الأجزاء الداخلية للنافذة. لهذا السبب، لن يرسم تطبيقك في مناطق الشاشة الكاملة عند اتباع الدليل الخاص بجعل التطبيق متكاملاً.

على سبيل المثال، عند استخدام Modifier.windowInsetsPadding(WindowInsets.safeContent) أو Modifier.windowInsetsPadding(WindowInsets.safeDrawing)، لن يرسم تطبيقك تلقائيًا في المناطق التي يتم فيها وضع مقطوعة. يحتوي الرمزان WindowInsets.safeContent وWindowInsets.safeDrawing على معلومات مقطوعة للشاشة ولن يتم رسمهما في مكان الصورة المقطوعة.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}

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

التعامل مع معلومات القطع يدويًا

يمكنك التعامل مع القطع بأي من الطرق التالية:

بالنسبة إلى Compose، ننصح بضبط السمة windowLayoutInDisplayCutoutMode على default في المظهر العام، ثم استخدام السمة WindowInsets.displayCutout للتعامل مع العناصر الداخلية في العناصر القابلة للإنشاء:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

تتيح لك هذه الطريقة الالتزام بالمساحة المتروكة displayCutout عند اللزوم، أو تجاهلها عندما لا تكون مطلوبة.

بدلاً من ذلك، يمكنك تطبيق الإعدادات نفسها التي تصفها مستندات لقطات الشاشة من خلال ضبط إما موضوع النشاط android:windowLayoutInDisplayCutoutMode على خيار آخر أو ضبط سمة النافذة باستخدام window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. ويتم بعد ذلك تطبيق وضع "القطع" على النشاط بأكمله، ولا يمكن التحكّم به في كل عنصر قابل للإنشاء.

استخدِم السمة WindowInset.displayCutout للحرص على عرض الصورة المقطوعة على الشاشة في بعض العناصر القابلة للإنشاء بدون غيرها. تسمح لك واجهة برمجة التطبيقات هذه بالوصول إلى المعلومات المقتطعة عند الحاجة.

أفضل الممارسات

عند العمل على مقاطع الشاشة، يجب مراعاة ما يلي:

  • ضع في اعتبارك موضع العناصر المهمة في واجهة المستخدم. لا تدع منطقة الاقتصاص تحجب أي نص أو عناصر تحكم أو معلومات أخرى مهمة.
  • لا تضع أو توسع أي عناصر تفاعلية تتطلب التعرف الدقيق في المنطقة المقطوعة. قد تكون حساسية اللمس أقل في منطقة القطْع.
  • عند اتّباع هذه الإرشادات الشاملة، يتم تضمين معلومات مقطوعة في داخل safeDrawing / safeContent.
  • استخدِم Modifier.windowInsetsPadding(WindowInsets.safeDrawing) لتحديد المساحة المتروكة المناسبة التي يجب تطبيقها على المحتوى عندما يكون ذلك ممكنًا. تجنَّب ترميز ارتفاع شريط الحالة برمجيًا، لأنّ ذلك قد يؤدي إلى تداخل المحتوى أو اقتطاعه.

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

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

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