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

تجربة طريقة ComposeAllowed

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

حافة في Compose →

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

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

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

عند تنفيذ تصميم شامل في تطبيقك، عليك الاحتفاظ بما يلي في الذهن:

1. تفعيل ميزة "العرض حتى حافة الشاشة"
2. التعامل مع أي تداخلات مرئية.
3. يمكنك عرض أدوات التحديد خلف أشرطة النظام.

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

إذا كان تطبيقك يستهدف الإصدار 35 من حزمة تطوير البرامج (SDK) أو الإصدارات الأحدث، سيتم تلقائيًا تفعيل الميزة أجهزة Android 15 أو الإصدارات الأحدث

لتفعيل ميزة العرض الشامل في إصدارات Android السابقة، عليك إجراء ما يلي:

1. أضف تبعية إلى مكتبة androidx.activity في ملف build.gradle لتطبيقك أو الوحدة الخاصة بك:

   Kotlin

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }

   رائع

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }

2. استيراد enableEdgeToEdge إضافة وظيفة الإضافة إلى تطبيقك:

تفعيل ميزة "عرض شامل" يدويًا من خلال استدعاء enableEdgeToEdge في onCreate من Activity. يجب الاتصال قبل setContentView.

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

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

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

تشير دالة enableEdgeToEdge() تلقائيًا إلى أنّ التطبيق يجب أن يكون: من الحافة إلى الحافة وتضبط ألوان أشرطة النظام.

لتفعيل ميزة العرض الشامل في تطبيقك بدون استخدام الدالة enableEdgeToEdge()، راجِع اضبط إعدادات الشاشة من حافة إلى حافة يدويًا.

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

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

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

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

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

• لوحات صور مقطوعة: مخصّصة للمناطق التي يتوفّر فيها صور مقطوعة للشاشة وذلك نظرًا لشكل الجهاز.

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

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

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

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

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

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

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
}

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:

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

عرض إدراجات مقطوعة

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

على سبيل المثال، تعرض العديد من شاشات التطبيقات قائمة بالعناصر. عدم حجب عناصر القائمة مع الصورة المقطوعة للشاشة أو أشرطة النظام.

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

تحديد قيمة WindowInsetsCompat باستخدام الطريقة المنطقية أو وأشرطة النظام وأنواع الصورة المقطوعة للشاشة.

اضبِط clipToPadding على RecyclerView بحيث يتم تمرير المساحة المتروكة مع العلامة عناصر القائمة. ويسمح هذا للعناصر بالظهور خلف أشرطة النظام عندما يستخدم المستخدم التمريرات، كما هو موضح في المثال التالي.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

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

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

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

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

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

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

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
}

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;
});

المكونات المادية

العديد من مكونات Android Material Components المستندة إلى المشاهدات (com.google.android.material){:.external} يتعاملون تلقائيًا مع الأقسام الداخلية، بما في ذلك BottomAppBar, BottomNavigationView, NavigationRailView وNavigationView

مع ذلك، AppBarLayout لا يتعامل مع إدراجات الصفحات تلقائيًا. إضافة android:fitsSystemWindows="true" للتعامل مع أهم المساحات الداخلية أو استخدام setOnApplyWindowInsetsListener.

اقرأ كيفية التعامل مع الأجزاء الداخلية باستخدام المكوّنات المادية في Compose

وضع مجسم

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

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

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

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

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؟