بعد استهداف الإصدار 35 من حزمة تطوير البرامج (SDK) أو إصدار أحدث على جهاز يعمل بالإصدار 15 من نظام التشغيل Android أو إصدار أحدث، عرض تطبيقك من الحافة إلى الأخرى. تمتد النافذة بالعرض والارتفاع بالكامل من الشاشة من خلال الرسم خلف أشرطة النظام. تتضمن أشرطة النظام الحالة وشريط التسمية التوضيحية وشريط التنقل.
تتضمّن العديد من التطبيقات شريط التطبيقات العلوي. يجب أن يمتد شريط التطبيق العلوي إلى الحافة العلوية الشاشة والعرض خلف شريط الحالة. يمكن أن يظهر شريط التطبيق العلوي اختياريًا تقليص ارتفاع شريط الحالة عند تمرير المحتوى.
تحتوي العديد من التطبيقات أيضًا على شريط التطبيق السفلي أو شريط التنقّل السفلي. يجب أن تكون هذه الأشرطة يمتد أيضًا إلى الحافة السفلية من الشاشة ويتم عرضه خلف شريط التنقل الشريط. وبخلاف ذلك، من المفترض أن تعرض التطبيقات محتوى يتم تمريره خلف شريط التنقل.
عند تنفيذ تخطيط شامل في تطبيقك، عليك الاحتفاظ بما يلي في ذهن:
- تفعيل شاشة العرض الشامل
- التعامل مع أي تداخلات مرئية.
- يمكنك عرض أدوات التحديد خلف أشرطة النظام.
![مثال على صور خلف شريط الحالة](https://developer.android.com/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=6&hl=ar)
تفعيل العرض الشامل
إذا كان تطبيقك يستهدف الإصدار 35 من حزمة تطوير البرامج (SDK) أو الإصدارات الأحدث، سيتم تلقائيًا تفعيل الميزة أجهزة Android 15 أو الإصدارات الأحدث
لتفعيل ميزة العرض الشامل في إصدارات Android السابقة، عليك إجراء ما يلي:
أضف تبعية إلى مكتبة
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' }استيراد
enableEdgeToEdge
إضافة وظيفة الإضافة إلى تطبيقك:
تفعيل ميزة "عرض كامل" يدويًا من خلال استدعاء 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()
تلقائيًا إلى أنّ التطبيق يجب أن يكون:
من الحافة إلى الحافة وتضبط ألوان أشرطة النظام.
لتفعيل ميزة العرض الشامل في تطبيقك بدون استخدام
الدالة enableEdgeToEdge()
، راجِع
اضبط إعدادات الشاشة من حافة إلى حافة يدويًا.
التعامل مع التداخل باستخدام إدراجات داخلية
قد تظهر بعض مشاهدات تطبيقك خلف أشرطة النظام، كما هو موضّح في الشكل. 3-
يمكنك معالجة التداخلات من خلال التفاعل مع الأجزاء، التي تحدد أجزاء الشاشة مع واجهة مستخدم النظام مثل شريط التنقل أو الحالة الشريط. يمكن أن يعني التقاطع ظهور المحتوى فوق المحتوى، ولكن يمكن أن ينتج عنه أيضًا تطبيقك عن إيماءات النظام.
في ما يلي أنواع المساحات الداخلية التي تنطبق على عرض تطبيقك بشكل شامل:
إدراج أشرطة النظام: هو الأفضل للعروض القابلة للنقر والتي يجب ألا أن تحجبها أشرطة النظام بصريًا.
لوحات صور مقطوعة: مخصّصة للمناطق التي يتوفّر فيها صور مقطوعة للشاشة وذلك نظرًا لشكل الجهاز.
وحدات إيماءة النظام: لمناطق التنقّل بالإيماءات التي يستخدمها النظام التي لها الأولوية على تطبيقك.
إدراجات أشرطة النظام
تعد المساحات الداخلية لشريط النظام هي النوع الأكثر استخدامًا من المساحات الداخلية. وهي تمثل المساحة التي تظهر فيها واجهة مستخدم النظام على المحور "ع" أعلى التطبيق الأفضل استخدامها لتحريك طرق العرض في تطبيقك أو النقر عليها والتي يجب ألا تحجبها أشرطة النظام بصريًا.
على سبيل المثال، الإجراء العائم الزر (FAB) في الشكل 3 عبارة عن محجوب عن طريق شريط التنقل:
![مثال على التنفيذ من الحافة إلى الحافة، ولكن شريط التنقل يغطي زر الإجراء الرئيسي (FAB)](https://developer.android.com/static/images/guide/navigation/e2e-after-implementation.png?authuser=6&hl=ar)
لتجنب هذا النوع من التداخل المرئي في وضع الإيماءة أو وضع الزر، يمكنك
إلى زيادة هوامش العرض باستخدام
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:
![شريط تنقل شبه شفاف لا يغطي زر الإجراء الرئيسي (FAB)](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-top.png?authuser=6&hl=ar)
وينطبق الشيء نفسه على وضع التنقل بالإيماءات، كما هو موضح في الشكل 5:
![من الحافة إلى الحافة باستخدام التنقّل بالإيماءات](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=6&hl=ar)
عرض إدراجات مقطوعة
تحتوي بعض الأجهزة على قصاصات شاشة. عادةً ما يكون القواطع في أعلى الشاشة ويتم تضمينها في شريط الحالة. عندما تكون شاشة الجهاز في الوضع الأفقي فإن الصورة المقطوعة قد تكون على الحافة الرأسية. استنادًا إلى محتوى تطبيقك على الشاشة، فيجب تطبيق المساحة المتروكة لتجنب ظهور خطوط وسترسم التطبيقات بشكل افتراضي الصورة المقطوعة للشاشة.
على سبيل المثال، تعرض العديد من شاشات التطبيقات قائمة بالعناصر. عدم حجب عناصر القائمة مع الصورة المقطوعة للشاشة أو أشرطة النظام.
Kotlin
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 }
Java
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { WindowInsetsCompat 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:
![مثال على أجزاء الإيماءات للنظام](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=6&hl=ar)
كما هو الحال مع مساحات شريط النظام، يمكنك تجنب تداخل مجموعات الإيماءات مع النظام
استخدام
getInsets(int)
مع
WindowInsetsCompat.Type.systemGestures()
يمكنك استخدام هذه الأجزاء الداخلية لتحريك طرق العرض القابلة للتمرير السريع أو إبعادها عن الحواف. الاستخدام الشائع
الحالات تتضمن الأوراق السفلية،
التمرير السريع في الألعاب، ولوحات العرض الدوارة التي تم تنفيذها باستخدام
ViewPager2
في الإصدار 10 من نظام Android أو الإصدارات الأحدث، تحتوي مجموعات إيماءات النظام الداخلية على مساحة داخلية إيماءة الصفحة الرئيسية، ونافذة داخلية لليسار واليمين لإيماءات الرجوع:
![مثال على قياسات إدراج الإيماءات في النظام](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=6&hl=ar)
يوضّح مثال الرمز التالي طريقة إدراج مجموعات إيماءات النظام:
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; });
المكونات المادية
العديد من مكونات Android Material Components المستندة إلى المشاهدات
(com.google.android.material){:.external} يتعاملون تلقائيًا مع الأقسام الداخلية، بما في ذلك
BottomAppBar
،
BottomNavigationView
,
NavigationRailView
وNavigationView
مع ذلك، AppBarLayout
لا يتعامل مع إدراجات الصفحات تلقائيًا. إضافة
android:fitsSystemWindows="true"
للتعامل مع أهم المساحات الداخلية أو استخدام setOnApplyWindowInsetsListener
.
اطّلِع على كيفية التعامل مع الأجزاء الداخلية باستخدام المكوّنات المادية في Compose
وضع مجسم
ويتم تقديم تجربة أفضل لبعض المحتوى في وضع ملء الشاشة، ما يمنح المستخدم تجربة
تجربة غامرة. يمكنك إخفاء أشرطة النظام للوضع المجسم باستخدام
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؟