Window Size Class — ما هو، فئات الحجم والتطوير

ما هو Window Size Class؟

Window Size Class هي واجهة برمجة تطبيقات لمنصة Android مضمنة في مكتبة Jetpack WindowManager تقوم بتصنيف مساحة نافذة التطبيق المتاحة إلى ثلاث فئات. على عكس النهج التقليدي مع مؤهلات الموارد (small/large/xlarge)، يوفر Window Size Class مجموعة منفصلة من القيم يمكن للمطور الاعتماد عليها عند تصميم الواجهة.

ظهرت واجهة البرمجة في Android 7.0 Nougat كجزء من دعم وضع النوافذ المتعددة، لكن التبني النشط بدأ مع Jetpack WindowManager 1.1 (2022). توصي Google باستخدام Window Size Class كأداة رئيسية لبناء التخطيطات التكيفية بدلاً من التحقق من عرض الشاشة عبر Display.getSize().

يعتمد التصنيف على عرض النافذة بوحدة dp، وليس على الحجم المادي أو كثافة البكسل. هذا يعني أن جهازين بدقتين مختلفتين لكن نفس العرض بوحدة dp سيحصلان على نفس الفئة — ستكون الواجهة متطابقة بشكل يمكن التنبؤ به.

ثلاث فئات لحجم النافذة في Android

Compact — فئة للنوافذ حتى عرض 600 dp. الهاتف في الوضع العمودي، معظم الأجهزة القابلة للطي (Galaxy Z Flip) في الحالة المطوية. يتم بناء الواجهة في عمود واحد، التنقل عبر Bottom Navigation.

Medium — فئة للنوافذ بعرض 600–840 dp. الجهاز اللوحي في الوضع العمودي، الهاتف في الوضع الأفقي، الجهاز القابل للطي في حالة نصف مفتوحة. تستخدم الواجهة عمودين — على سبيل المثال، قائمة على اليسار وتفاصيل على اليمين. يستبدل Navigation Rail Bottom Navigation.

Expanded — فئة للنوافذ من عرض 840 dp. الجهاز اللوحي في الوضع الأفقي، نافذة سطح المكتب، الجهاز القابل للطي في حالة مفتوحة بالكامل. يمكن للواجهة استخدام ثلاثة ألواح أو أكثر، Permanent Navigation Drawer، ألواح الأدوات.

في Material Design 3، يتم تعريف مكونات تكيفية لكل فئة: Navigation Rail لـ Medium، Navigation Drawer لـ Expanded، Bottom Navigation لـ Compact. لا يحتاج المطور إلى اختيار breakpoints — فهي محددة بالفعل بواسطة API.

كيف يعمل Window Size Class

يتم حساب Window Size Class بناءً على العرض الحالي لنافذة التطبيق بوحدة dp مع مراعاة عناصر النظام — شريط الحالة، شريط التنقل، تقسيم الشاشة في وضع Split Screen. يتم تشغيل API عند تغيير تكوين النافذة: دوران الجهاز، الدخول في وضع النوافذ المتعددة، فتح الجهاز القابل للطي.

للحصول على الفئة، يتم استخدام فئة WindowSizeClass من مكتبة androidx.window. يشترك المطور في Flow (Kotlin) أو LiveData (Java) الذي يقوم بتحديث الفئة تلقائياً مع كل تغيير في حجم النافذة — دون معالجة يدوية لـ onConfigurationChanged.

يتم التصنيف في ثلاث خطوات. الأولى — قياس عرض النافذة الحالي بالبكسل. الثانية — التحويل إلى dp عبر DisplayMetrics.density. الثالثة — مقارنة القيمة التي تم الحصول عليها مع الحدود: أقل من 600 dp — Compact، 600–840 — Medium، من 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact width
    WindowWidthSizeClass.MEDIUM  -> // medium width
    WindowWidthSizeClass.EXPANDED -> // expanded width
}

بالإضافة إلى العرض (windowWidthSizeClass)، توفر API فئة لارتفاع النافذة (windowHeightSizeClass) — مفيدة للوضع الأفقي ونوافذ سطح المكتب.

Window Size Class في Jetpack Compose

في Jetpack Compose، يُستخدم Window Size Class من خلال الدالة currentWindowAdaptiveInfo()، التي تعيد WindowAdaptiveInfo مع فئات العرض والارتفاع. تأخذ هذه الدالة في الاعتبار ليس فقط حجم النافذة ولكن أيضاً نوع الإدخال (لوحة المفاتيح، الفأرة، اللمس) — عبر WindowPosture و WindowLayoutInfo.

السيناريو النموذجي هو التبديل بين التخطيطات حسب الفئة. على سبيل المثال، في Compact يظهر BottomSheet مع اختيار، في Medium — لوحة جانبية، في Expanded — Navigation Drawer دائم.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

في Material Design 3، تتكيف مكونات NavigationSuiteScaffold تلقائياً مع Window Size Class — لا يحتاج المطور إلى كتابة منطق شرطي.

Window Size Class و Material Design 3

Material Design 3 (Material You) متكامل بالكامل مع Window Size Class. يحدد نظام التخطيط التكيفي في Material 3 مكون التنقل الذي يجب استخدامه لكل فئة: BottomNavigation لـ Compact، NavigationRail لـ Medium، NavigationDrawer لـ Expanded.

يعمل هذا التكامل على مستوى Adaptive API، الذي يجمع Window Size Class مع إشارات أخرى — FoldState (الجهاز القابل للطي) و WindowPosture (موضع الشاشة). Adaptive API متاح من خلال مكتبة material3-adaptive.

يوفر Material 3 أربعة مكونات تكيفية عالية المستوى: ListDetailPaneScaffold و SupportingPaneScaffold و NavigationSuiteScaffold و AdaptiveSheet. كل منها يغير سلوكه حسب Window Size Class دون تكوين إضافي.

مزايا التخطيطات التكيفية

يوفر استخدام Window Size Class ثلاث مزايا رئيسية في تطوير الأجهزة المحمولة. الأولى — قابلية التنبؤ: بدلاً من مئات التركيبات لأحجام الشاشات، يعمل المطور مع ثلاث فئات. هذا يقلل جذرياً من عدد سيناريوهات الاختبار و الأخطاء المتعلقة بالتخطيط.

الثانية — التكيف التلقائي مع وضع النوافذ المتعددة. عندما يدخل المستخدم في Split Screen، يتغير عرض النافذة — يتم إعادة حساب Window Size Class فوراً، وتتكيف الواجهة. بدون هذه API، يعرض التطبيق في الشاشة المقسمة نسخة مبتسرة من واجهة الهاتف.

الثالثة — الاتساق مع Material Design 3. قامت Google بدمج Window Size Class في نظام المكونات التكيفية، لذلك فإن الواجهات المبنية على Material 3 تتبع تلقائياً توصيات تصميم Google للشاشات الكبيرة دون عمل إضافي.