الخطوط في Compose

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

يتيح نظام التشغيل Android استخدام أجزاء الشاشة المُخصّصة للكاميرا على الأجهزة التي تعمل بالإصدار 9 من Android (المستوى 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
        }
    }
}
CutoutSnippets.kt

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

التعامل مع معلومات الفتحة يدويًا

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

• استخدام WindowInsets.displayCutout

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

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

• الوصول إلى عنصر الفتحة Path باستخدام LocalView.current.rootWindowInsets.displayCutout

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

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

ويتيح لك هذا الأسلوب الالتزام بالمساحة المتروكة 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. اختَر نوع الصورة المقتطعة.