الخطوط في Compose

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

الشكل 1. مثال على الاقتصاص في وضع "بورتريه"

الشكل 2. مثال على الاقتصاص في الوضع الأفقي

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

توضّح هذه الصفحة كيفية التوافق مع الأجهزة التي تتضمّن قاطعًا في 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
        }
    }
}
CutoutSnippets.kt

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

معالجة معلومات الصورة المقطوعة يدويًا

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

• استخدام WindowInsets.displayCutout

• الإعداد في بيان المظهر باستخدام android:windowLayoutInDisplayCutoutMode

• ضبط الخيار آليًا على Window باستخدام window.attributes.layoutInDisplayCutoutMode

• الوصول إلى الكائن المقطوعة Path باستخدام LocalView.current.rootWindowInsets.displayCutout

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

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

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

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

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

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

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

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

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

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

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

   

   الشكل 3. استخدِم خيارات المطوّرين لاختبار طريقة عرض المحتوى.