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

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

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

مهارات Android

عرض على GitHub

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

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

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

android skills add edge-to-edge

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

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

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

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

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

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