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

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

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

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

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

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

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

2. ضبط windowSoftInputMode

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

<!-- 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()) For example, use either `Scaffold`,

ألوان أشرطة النظام ورموزها

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

لتغيير رموز شريط الحالة إلى فاتحة أو داكنة، استخدِم 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

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

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

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

window.isNavigationBarContrastEnforced = false

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

مربّعات حوار

لعرض مربّعات حوار ملء الشاشة من حافة الشاشة إلى الحافة الأخرى، استخدِم طريقة WindowCompat.enableEdgeToEdge في طريقة onStart() لمربّع الحوار:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}