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

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

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

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

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

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

التالي
لمحة عن WindowInsetsRulers