الإعداد اليدوي للشاشة الممتدة من الحافة إلى الحافة

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

عرض تطبيقك في وضع ملء الشاشة

استخدِم WindowCompat.setDecorFitsSystemWindows(window, false) لعرض تطبيقك خلف أشرطة النظام، كما هو موضّح في مثال الرمز البرمجي التالي:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  WindowCompat.setDecorFitsSystemWindows(window, false)
}

Java

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

تغيير لون أشرطة النظام

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

  • وضع التنقّل باستخدام الإيماءات: يطبّق النظام ميزة "تكييف الألوان الديناميكي" التي تتغيّر فيها ألوان محتوى أشرطة النظام استنادًا إلى المحتوى المعروض خلفها. في المثال التالي، يتغيّر الاسم المعرِّف في شريط التنقّل إلى لون داكن عندما يكون فوق محتوى فاتح، ويتغيّر إلى لون فاتح عندما يكون فوق محتوى داكن.
الشكل 1. تتغير الألوان في وضع التنقل بالإيماءات.
  • وضع الزر: يطبِّق النظام إطارًا شفافًا خلف أشرطة النظام (للمستوى 29 من واجهة برمجة التطبيقات أو المستويات الأحدث) أو شريط نظام شفاف (للمستوى 28 من واجهة برمجة التطبيقات أو المستويات الأقدم).
صورة تعرض أشرطة النظام الشفافة
الشكل 2. حاجب شفاف خلف أشرطة النظام
  • لون محتوى شريط الحالة: يتحكّم هذا الخيار في لون محتوى شريط الحالة، مثل الوقت والرموز.
لون محتوى صورة تظهر في شريط الحالة
الشكل 3. لون محتوى شريط الحالة

يمكنك تعديل ملف themes.xml لضبط لون شريط التنقّل، وبشكل اختياري، لضبط شريط الحالة على أنّه شفاف وضبط لون محتوى شريط الحالة على أنّه داكن.

<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
  <item name="android:statusBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set for a light status bar with dark content. -->
  <item name="android:windowLightStatusBar">
    true
  </item>
</style>

يمكنك استخدام واجهة برمجة التطبيقات WindowInsetsController بشكل مباشر، ولكننا ننصح بشدة باستخدام مكتبة الدعم WindowInsetsControllerCompat حيثما أمكن. يمكنك استخدام واجهة برمجة التطبيقات WindowInsetsControllerCompat بدلاً من theme.xml للتحكّم في لون محتوى شريط الحالة. لإجراء ذلك، استخدِم الدالة setAppearanceLightNavigationBars() ، مع إدخال true لتغيير لون المقدّمة في شريط التنقّل إلى لون فاتح أو false للرجوع إلى اللون التلقائي.

Kotlin

val windowInsetsController =
      ViewCompat.getWindowInsetsController(window.decorView)

windowInsetsController?.isAppearanceLightNavigationBars = true

Java

WindowInsetsControllerCompat windowInsetsController =
      ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController == null) {
    return;
}

windowInsetsController.setAppearanceLightNavigationBars(true);