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

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

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

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

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

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

بشكلٍ تلقائي، يجعل الخيار 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()) 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 وإرشادات التصميم من الحافة إلى الحافة لتحديد الوقت المناسب لاستخدام أشرطة شفافة أو شبه شفافة.

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

window.isNavigationBarContrastEnforced = false

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

مربّعات حوار

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

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