عرض المحتوى بشكل شامل في تطبيقك

تجربة طريقة ComposeAllowed

Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية العمل من الحافة إلى الحافة في Compose.

بدءًا من الحافة إلى الحافة في Compose →

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

لتنفيذ تصميم شامل، يجب أن يتم تنفيذ ما يلي في تطبيقك:

• ارسم خلف شريط التنقل لتحقيق تجربة مستخدم أكثر إقناعًا وعصرية.
• ارسم خلف شريط الحالة إذا كان ذلك مناسبًا للمحتوى والتنسيق، كما هو الحال مع الصور ذات العرض الكامل. ولإجراء ذلك، يمكنك استخدام واجهات برمجة التطبيقات، مثل AppBarLayout التي تحدّد شريط التطبيق المثبَّت في أعلى الشاشة.

الشكل 1. أشرطة النظام بتنسيق من الحافة إلى الحافة

لتنفيذ تصميم شامل في تطبيقك، عليك اتّباع الخطوات التالية:

1. تفعيل العرض الشامل
2. معالجة أي تداخلات مرئية.

الشكل 2. مثال على تطبيق يتضمّن صورًا خلف شريط الحالة.

تفعيل العرض الشامل

يمكنك تفعيل الشاشة الشاملة في تطبيقك من خلال طلب الرقم enableEdgeToEdge في onCreate من Activity. يجب الاتصال قبل setContentView.

Kotlin

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

Java

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    EdgeToEdge.enable(this);
    super.onCreate(savedInstanceState);
    ...
  }

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

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

التعامل مع التداخل باستخدام إدراجات داخلية

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

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

في ما يلي أنواع المساحات الداخلية التي تنطبق على عرض تطبيقك بشكل شامل:

• العناصر الداخلية في أشرطة النظام: هو الأفضل للعروض القابلة للتطبيق والتي يجب ألا تحجبها أشرطة النظام بصريًا.

• وحدات إيماءة النظام: مخصصة لمناطق التنقّل بالإيماءات التي يستخدمها النظام الذي له الأولوية على تطبيقك.

إدراجات أشرطة النظام

تعد المساحات الداخلية لشريط النظام هي النوع الأكثر استخدامًا من المساحات الداخلية. وهي تمثِّل المنطقة التي تظهر فيها واجهة مستخدِم النظام في المحور "ع" فوق تطبيقك. ومن الأفضل استخدام هذه الطريقة لتحريك طرق العرض أو وضعها في تطبيقك والتي يمكن النقر عليها والتي يجب ألّا تحجبها أشرطة النظام بصريًا.

على سبيل المثال، زر الإجراء العائم (FAB) في الشكل 3 محجوب جزئيًا بواسطة شريط التنقل:

الشكل 3. يتداخل شريط التنقل مع زر الإجراء الرئيسي (FAB) في تنسيق شامل.

لتجنُّب هذا النوع من التداخل المرئي في وضع الإيماءة أو وضع الزر، يمكنك زيادة هوامش العرض باستخدام getInsets(int) مع WindowInsetsCompat.Type.systemBars().

يوضّح مثال الرمز التالي كيفية تنفيذ إدراجات شريط النظام:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

إذا طبقت هذا الحل على المثال الموضح في الشكل 3، فإنه لا ينتج عنه تداخل مرئي في وضع الزر، كما هو موضح في الشكل 4:

الشكل 4. حل مشكلة التداخل المرئي في وضع الأزرار

وينطبق الشيء نفسه على وضع التنقل بالإيماءات، كما هو موضح في الشكل 5:

الشكل 5. تم حلّ مشكلة التداخل المرئي في وضع "التنقّل بالإيماءات".

إدخالات إيماءات النظام

تمثل مساحات إيماءات النظام الداخلية مناطق النافذة التي تكون فيها إيماءات النظام الأولوية على تطبيقك. تظهر هذه المناطق باللون البرتقالي في الشكل 6:

الشكل 6. إدخالات إيماءات النظام

كما هو الحال مع الأجزاء الداخلية في شريط النظام، يمكنك تجنب تداخل أجزاء الإيماءات للنظام باستخدام getInsets(int) مع WindowInsetsCompat.Type.systemGestures().

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

في الإصدار 10 من نظام التشغيل Android أو الإصدارات الأحدث، تحتوي مجموعات إيماءات النظام الداخلية على مساحة داخلية للإيماءة الرئيسية، وإطار داخلي للإيماءة اليمنى واليسرى لإيماءات الرجوع:

الشكل 7. قياسات مساحة إيماءة النظام

يوضّح مثال الرمز التالي طريقة إدراج مجموعات إيماءات النظام:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

وضع مجسم

يتم تقديم تجربة بعض المحتوى بشكل أفضل في وضع ملء الشاشة، ما يمنح المستخدم تجربة أكثر تعمقًا. يمكنك إخفاء أشرطة النظام في الوضع المجسم باستخدام مكتبات WindowInsetsController وWindowInsetsControllerCompat:

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

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

مصادر إضافية

راجِع المراجع التالية للحصول على مزيد من المعلومات حول WindowInsets والتنقّل بالإيماءات وطريقة عمل الإضافات:

• WindowInsets - أدوات استماع للتنسيقات
• التنقّل بالإيماءات: المساحات الداخلية
• كيف تعمل المساحات الداخلية على Android؟