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

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

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

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

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

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    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) }
    }
    ...
}