إعداد ميزة "العرض حتى حافة الشاشة"

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

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

مهارات Android

العرض على GitHub

إضافة ميزة "العرض حتى حافة الشاشة"

استخدِم مهارة Android Edge-to-Edge لإضافة ميزة العرض على كامل الشاشة التكيُّفية إلى تطبيق Jetpack Compose.

لتثبيت المهارة من Android CLI، شغِّل:

android skills add edge-to-edge

1. تفعيل ميزة "العرض حتى حافة الشاشة"

لتفعيل ميزة "العرض حتى حافة الشاشة" في إصدارات Android السابقة، يمكنك استدعاء enableEdgeToEdge() في طريقة Activity.onCreate():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    // ...
}
EdgeToEdgeSnippets.kt

يجعل enableEdgeToEdge() أشرطة النظام شفافة تلقائيًا، باستثناء وضع التنقّل باستخدام 3 أزرار، حيث يطبّق حاجبًا شفافًا على شريط التنقّل لتحسين التباين. يتكيّف لون رموز النظام والطبقة الشفافة مع المظهر الفاتح أو المظهر الداكن للنظام.

2. ضبط windowSoftInputMode

اضبط android:windowSoftInputMode="adjustResize" في إدخال AndroidManifest.xml لنشاطك. يسمح هذا الإعداد لتطبيقك بتلقّي إدخالات IME، ما يتيح لك تعديل التنسيق باستخدام المساحة المتروكة عند ظهور لوحة المفاتيح على الشاشة أو اختفائها.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3- التعامل مع التداخلات باستخدام الأجزاء الداخلية

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

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

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

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

مواضيع متقدّمة

يُرجى مراعاة ما يلي في حالات الاستخدام الأكثر تقدّمًا للعرض على كامل الشاشة.

الوضع المجسم

تستفيد بعض أنواع المحتوى، مثل الفيديوهات أو الخرائط، من تجربة غامرة بالكامل يتم فيها إخفاء أشرطة النظام. يمكنك إخفاء أشرطة النظام باستخدام WindowInsetsControllerCompat:

val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars())
EdgeToEdgeSnippets.kt

ملاحظة: تحتوي جميع التطبيقات التي تعمل في وضع العرض في نافذة على شريط عنوان، حتى في وضع ملء الشاشة. بالنسبة إلى الألعاب والتطبيقات الأخرى الغامرة، يعني ذلك أنّه عليك استخدام WindowInsets.systemBars (الذي يتضمّن شريط العناوين) أو WindowInsets.captionBar لضمان عدم تغطية واجهة المستخدم بأشرطة النظام.

ألوان ورموز شريط النظام

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

لتغيير رموز شريط الحالة إلى فاتحة أو داكنة، استخدِم WindowInsetsControllerCompat:

// Set status bar icons to dark.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false
EdgeToEdgeSnippets.kt

حماية شريط النظام

على الرغم من أنّ enableEdgeToEdge() يوفّر أشرطة نظام شفافة أو شبه شفافة تلقائيًا، قد تحتاج إلى تخصيص ذلك. يمكنك الاطّلاع على إرشادات تصميم أشرطة نظام Android وإرشادات التصميم من الحافة إلى الحافة لتحديد حالات استخدام الأشرطة الشفافة مقابل الأشرطة شبه الشفافة.

لجعل شريط التنقّل باستخدام ثلاثة أزرار شفافًا بالكامل بدلاً من أن يكون شبه شفاف، يمكنك إيقاف فرض التباين:

window.isNavigationBarContrastEnforced = false
EdgeToEdgeSnippets.kt

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة لمحة عن حماية شريط النظام.