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

تجربة طريقة الإنشاء

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

الدمج التام في 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.

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

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

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

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

فواصل أشرطة النظام

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

على سبيل المثال، يخفي شريط التنقل جزئيًا زر الإجراء العائم (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.

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

الشكل 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؟