فئات حجم النافذة

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

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

الشكل 1. تمثيلات لفئات حجم النوافذ المستندة إلى العرض.
الشكل 2. تمثيلات لفئات حجم النوافذ المستندة إلى الارتفاع.

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

فئة الحجم نقطة إيقاف تمثيل الجهاز
عرض مضغوط العرض < 600dp 99.96% من الهواتف بالوضع العمودي
عرض متوسط 600 بكسل مستقل الكثافة ≤ العرض < 840 بكسل مستقل الكثافة بنسبة 93.73% من الأجهزة اللوحية بالوضع العمودي

معظم الشاشات الداخلية الكبيرة غير المطوية في وضع عمودي

عرض موسّع العرض ≥ 840 بكسل مستقل الكثافة 97.22% من الأجهزة اللوحية في الوضع الأفقي،

معظم الشاشات الداخلية الكبيرة غير المطوية في المناظر الطبيعية

ارتفاع مكثف الارتفاع < 480 بكسل مستقل الكثافة 99.78% من الهواتف في أفقي
ارتفاع متوسط 480 بكسل مستقل الكثافة ≤ الارتفاع < 900 بكسل مستقل الكثافة 96.56% من الأجهزة اللوحية في الوضع الأفقي،

97.59% من الهواتف بالوضع العمودي

ارتفاع موسَّع الارتفاع ≥ 900 بكسل مستقل الكثافة 94.25% من الأجهزة اللوحية بالوضع العمودي

على الرغم من أن عرض فئات الحجم كأجهزة مادية قد يكون مفيدًا، إلا أن فئات حجم النافذة لا تحدد صراحةً حجم شاشة الجهاز. فئات حجم النوافذ غير مُعدّة للمنطق من النوع isTablet. بدلاً من ذلك، يتم تحديد فئات حجم النافذة حسب حجم النافذة المتاح لتطبيقك بغض النظر عن نوع الجهاز الذي يعمل عليه التطبيق، وهو ما ينطوي على أثرَين مهمَّين:

  • لا تضمن الأجهزة المادية فئة حجم نافذة محدّدة. قد تختلف مساحة الشاشة المتاحة لتطبيقك عن حجم شاشة الجهاز لعدة أسباب. على الأجهزة الجوّالة، يمكن لوضع تقسيم الشاشة تقسيم الشاشة بين تطبيقين. في نظام التشغيل ChromeOS، يمكن عرض تطبيقات Android في نوافذ حرة يمكن تغيير حجمها بشكل عشوائي. يمكن أن تشتمل الهواتف القابلة للطيّ على شاشتَين مختلفتَين الحجمَين يمكن الوصول إليهما بشكلٍ فردي عن طريق طي الجهاز أو فتحه.

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

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

يمكنك احتساب قيمة WindowSizeClass الحالية باستخدام دالة المستوى الأعلى في currentWindowAdaptiveInfo في مكتبة androidx.compose.material3.adaptive. يوضّح المثال التالي كيفية حساب فئة حجم النافذة وتلقي تحديثات كلما تغيّرت فئة حجم النافذة:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

إدارة التنسيقات باستخدام فئات حجم النوافذ

تتيح لك فئات حجم النوافذ تغيير تنسيق تطبيقك مع تغيُّر مساحة العرض المتاحة لتطبيقك، مثلاً عند طي الجهاز أو طيّه، أو تغيير اتجاه الجهاز، أو تغيير حجم نافذة التطبيق في وضع النوافذ المتعددة.

يمكنك أقلمة منطق التعامل مع التغييرات في حجم العرض عن طريق تمرير حجم النافذة إلى تصنيف الحالة إلى عناصر قابلة للإنشاء المدمجة، تمامًا مثل أي حالة تطبيق أخرى:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}

فئات حجم نوافذ الاختبار

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

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

الخطوات التالية

لمعرفة المزيد حول كيفية استخدام فئات حجم النافذة لإنشاء تخطيطات سريعة الاستجابة/التكيُّفية، راجع ما يلي:

لمعرفة المزيد حول ما يجعل أحد التطبيقات رائعًا على جميع الأجهزة وأحجام الشاشات، راجع: