تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
فئات أحجام النوافذ هي مجموعة من نقاط توقّف إطارات العرض التي تساعدك في تصميم وتطوير واختبار التصاميم السريعة الاستجابة/المتكيّفة. توازن نقاط التوقّف بين بساطة التصميم ومرونة تحسين تطبيقك لحالات الاستخدام الفريدة.
تصنّف فئات حجم النافذة مساحة العرض المتاحة لتطبيقك على النحو التالي: مضغوطة أو متوسطة أو موسّعة أو كبيرة أو كبيرة جدًا. يتم تصنيف العرض والارتفاع المتاحَين بشكل منفصل، لذا يكون لتطبيقك في أي وقت فئتان لحجم النافذة، إحداهما للعرض والأخرى للارتفاع. عادةً ما يكون العرض المتاح أكثر أهمية من الارتفاع المتاح بسبب انتشار التمرير العمودي، لذا من المرجّح أن تكون فئة حجم النافذة للعرض أكثر صلة بواجهة المستخدم لتطبيقك.
الشكل 1. تمثيلات لفئات أحجام النوافذ المستندة إلى العرض
الشكل 2. تمثيلات لفئات أحجام النوافذ المستندة إلى الارتفاع
وكما هو موضّح في الأشكال، تتيح لك نقاط التوقّف مواصلة التفكير في التصاميم من حيث الأجهزة والإعدادات. تمثّل كل نقطة توقّف لفئة الحجم حالة الأغلبية لسيناريوهات الأجهزة النموذجية، ويمكن أن تكون إطارًا مرجعيًا مفيدًا أثناء التفكير في تصميماتك المستندة إلى نقاط التوقّف.
فئة الحجم
نقطة الإيقاف
تمثيل الجهاز
العرض المضغوط
width < 600dp
99.96% من الهواتف في الوضع العمودي
عرض متوسط
600 وحدة بكسل مستقلة عن الكثافة ≤ العرض < 840 وحدة بكسل مستقلة عن الكثافة
93.73% من الأجهزة اللوحية في الوضع العمودي
معظم الشاشات الداخلية الكبيرة غير المطوية في الوضع الرأسي
عرض موسّع
840 وحدة بكسل مستقلة عن الكثافة ≤ العرض < 1200 وحدة بكسل مستقلة عن الكثافة
97.22% من الأجهزة اللوحية في الوضع الأفقي
معظم شاشات العرض الداخلية الكبيرة غير المطوية في الوضع الأفقي تكون بعرض موسّع على الأقل
عرض كبير
1200 وحدة بكسل مستقلة عن الكثافة ≤ العرض < 1600 وحدة بكسل مستقلة عن الكثافة
شاشات الأجهزة اللوحية الكبيرة
عرض كبير جدًا
width ≥ 1600dp
شاشات الكمبيوتر
الارتفاع المكثّف
الارتفاع < 480dp
99.78% من الهواتف في الوضع الأفقي
ارتفاع متوسط
480dp ≤ الارتفاع < 900dp
96.56% من الأجهزة اللوحية في الوضع الأفقي
97.59% من الهواتف في الوضع العمودي
ارتفاع موسَّع
height ≥ 900dp
94.25% من الأجهزة اللوحية في الوضع العمودي
على الرغم من أنّ تصوُّر فئات الحجم على أنّها أجهزة فعلية يمكن أن يكون مفيدًا، إلا أنّ فئات حجم النافذة لا يتم تحديدها بشكل صريح من خلال حجم شاشة الجهاز. لا يُفترض استخدام فئات حجم النافذة مع منطق من النوع isTablet. بدلاً من ذلك، يتم تحديد فئات حجم النافذة حسب حجم النافذة المتاح لتطبيقك بغض النظر عن نوع الجهاز الذي يتم تشغيل التطبيق عليه، وهذا له نتيجتان مهمتان:
لا تضمن الأجهزة الفعلية فئة حجم نافذة معيّنة. يمكن أن تختلف مساحة الشاشة المتاحة لتطبيقك عن حجم شاشة الجهاز لأسباب عديدة. على الأجهزة الجوّالة، يمكن لوضع تقسيم الشاشة تقسيم الشاشة بين تطبيقَين. على أجهزة ChromeOS، يمكن عرض تطبيقات Android في نوافذ من نوع سطح المكتب يمكن تغيير حجمها بشكل عشوائي.
يمكن أن تحتوي الأجهزة القابلة للطي على شاشتين مختلفتَي الحجم يمكن الوصول إليهما بشكل منفصل
عن طريق طي الجهاز أو فتحه.
يمكن أن يتغير فئة حجم النافذة طوال فترة تشغيل تطبيقك.
أثناء تشغيل تطبيقك، يمكن أن يؤدي تغيير اتجاه الجهاز وتنفيذ مهام متعددة وطي الجهاز أو فتحه إلى تغيير مقدار مساحة الشاشة المتاحة. نتيجةً لذلك، يكون فئة حجم النافذة ديناميكية، ويجب أن تتكيّف واجهة المستخدم لتطبيقك وفقًا لذلك.
يتم ربط فئات حجم النافذة بنقاط التوقف المضغوطة والمتوسطة والموسّعة في إرشادات تصميم Material Design.
استخدِم فئات حجم النافذة لاتخاذ قرارات عالية المستوى بشأن تصميم التطبيق، مثل تحديد ما إذا كان سيتم استخدام تصميم أساسي معيّن للاستفادة من مساحة الشاشة الإضافية.
تتيح لك فئات حجم النافذة تغيير تنسيق تطبيقك كمساحة للعرض.
المتاحة للتطبيق، على سبيل المثال، عند طيّ الجهاز أو فتحه،
تغييرات في اتجاه الجهاز، أو يتم تغيير حجم نافذة التطبيق في نوافذ متعددة
الحالي.
أقلمة المنطق للتعامل مع تغييرات حجم العرض من خلال تمرير حجم النافذة
كحالة إلى عناصر متداخلة قابلة للإنشاء تمامًا مثل أي حالة تطبيق أخرى:
@ComposablefunMyApp(windowSizeClass:WindowSizeClass=currentWindowAdaptiveInfo().windowSizeClass){// Decide whether to show the top app bar based on window size class.valshowTopAppBar=windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)// MyScreen logic is based on the showTopAppBar boolean flag.MyScreen(showTopAppBar=showTopAppBar,/* ... */)}
أثناء إجراء تغييرات على التصميم، اختبِر سلوك التصميم على جميع أحجام النوافذ،
خاصةً عند عروض نقاط التوقف المضغوطة والمتوسطة والموسّعة.
إذا كان لديك تنسيق حالي للشاشات المدمجة، عليك أولاً تحسين التنسيق لفئة الحجم ذات العرض الموسّع، لأنّ فئة الحجم هذه توفّر أكبر مساحة للمحتوى الإضافي وتغييرات واجهة المستخدم. بعد ذلك، حدِّد التصميم المناسب لفئة الحجم المتوسطة العرض، وفكِّر في إضافة تصميم متخصص.
الخطوات التالية
لمزيد من المعلومات حول كيفية استخدام فئات حجم النافذة لإنشاء تصميمات متجاوبة/قابلة للتكيّف، يُرجى الاطّلاع على ما يلي:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-22 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-22 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Use window size classes\n\nWindow size classes are a set of opinionated viewport breakpoints that help you\ndesign, develop, and test responsive/adaptive layouts. The breakpoints balance\nlayout simplicity with the flexibility of optimizing your app for unique cases.\n\nWindow size classes categorize the display area available to your app as\n*compact* , *medium* , *expanded* , *large* , or *extra large*. Available width and\nheight are classified separately, so at any point in time, your app has two\nwindow size\nclasses---one for width, one for height. Available width is usually more\nimportant than available height due to the ubiquity of vertical scrolling, so\nthe width window size class is likely more relevant to your app's UI.\n**Figure 1.** Representations of width-based window size classes. **Figure 2.** Representations of height-based window size classes.\n\nAs visualized in the figures, the breakpoints allow you to continue thinking\nabout layouts in terms of devices and configurations. Each size class breakpoint\nrepresents a majority case for typical device scenarios, which can be a helpful\nframe of reference as you think about the design of your breakpoint-based\nlayouts.\n\n| Size class | Breakpoint | Device representation |\n|-------------------|--------------------------|-------------------------------------------------------------------------------------------------------------|\n| Compact width | width \\\u003c 600dp | 99.96% of phones in portrait |\n| Medium width | 600dp ≤ width \\\u003c 840dp | 93.73% of tablets in portrait, most large unfolded inner displays in portrait |\n| Expanded width | 840dp ≤ width \\\u003c 1200dp | 97.22% of tablets in landscape, most large unfolded inner displays in landscape are at least expanded width |\n| Large width | 1200dp ≤ width \\\u003c 1600dp | Large tablet displays |\n| Extra-large width | width ≥ 1600dp | Desktop displays |\n| Compact height | height \\\u003c 480dp | 99.78% of phones in landscape |\n| Medium height | 480dp ≤ height \\\u003c 900dp | 96.56% of tablets in landscape, 97.59% of phones in portrait |\n| Expanded height | height ≥ 900dp | 94.25% of tablets in portrait |\n\n| **Note:** Most apps can build an adaptive UI by considering only the width window size class. However, also consider the height window size class for scenarios such as phones or open flippables in landscape orientation; the window width is typically medium, but window height is compact, in which case two pane layouts are not practical.\n\nAlthough visualizing size classes as physical devices can be useful, window size\nclasses are explicitly not determined by the size of the device screen. Window\nsize classes are not intended for *isTablet*‑type logic. Rather, window\nsize classes are determined by the window size available to your application\nregardless of the type of device the app is running on, which has two important\nimplications:\n\n- **Physical devices do not guarantee a specific window size class.** The\n screen space available to your app can differ from the screen size of the\n device for many reasons. On mobile devices, split‑screen mode can\n partition the screen between two applications. On ChromeOS, Android apps can\n be presented in desktop‑type windows that are arbitrarily resizable.\n Foldables can have two different‑sized screens individually accessed\n by folding or unfolding the device.\n\n- **The window size class can change throughout the lifetime of your app.**\n While your app is running, device orientation changes, multitasking, and\n folding/unfolding can change the amount of screen space available. As a\n result, the window size class is dynamic, and your app's UI should adapt\n accordingly.\n\nWindow size classes map to the compact, medium, and expanded breakpoints in the\n[Material Design layout\nguidance](https://m3.material.io/foundations/layout/applying-layout/window-size-classes).\nUse window size classes to make high‑level application layout decisions,\nsuch as deciding whether to use a specific canonical layout to take advantage of\nadditional screen space.\n\nCompute the current [`WindowSizeClass`](/reference/androidx/window/core/layout/WindowSizeClass) using the\n[`currentWindowAdaptiveInfo()`](/reference/kotlin/androidx/compose/material3/adaptive/package-summary#currentWindowAdaptiveInfo()) top‑level function of the\n[`androidx.compose.material3.adaptive`](/reference/kotlin/androidx/compose/material3/adaptive/package-summary) library. The function returns an\ninstance of [`WindowAdaptiveInfo`](/reference/kotlin/androidx/compose/material3/adaptive/WindowAdaptiveInfo), which contains [`windowSizeClass`](/reference/kotlin/androidx/compose/material3/adaptive/WindowAdaptiveInfo#windowSizeClass()). The\nfollowing example shows how to calculate the window size class and receive\nupdates whenever the window size class changes:\n\n\n```kotlin\nval windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass \nhttps://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/AdaptiveLayoutSnippets.kt#L85-L85\n```\n\n\u003cbr /\u003e\n\nManage layouts with window size classes\n---------------------------------------\n\nWindow size classes enable you to change your app layout as the display space\navailable to your app changes, for example, when a device folds or unfolds, the\ndevice orientation changes, or the app window is resized in multi‑window\nmode.\n\nLocalize the logic for handling display size changes by passing window size\nclasses down as state to nested composables just like any other app state:\n\n\n```kotlin\n@Composable\nfun MyApp(\n windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass\n) {\n // Decide whether to show the top app bar based on window size class.\n val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)\n\n // MyScreen logic is based on the showTopAppBar boolean flag.\n MyScreen(\n showTopAppBar = showTopAppBar,\n /* ... */\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/AdaptiveLayoutSnippets.kt#L49-L61\n```\n\n\u003cbr /\u003e\n\nTest window size classes\n------------------------\n\nAs you make layout changes, test the layout behavior across all window sizes,\nespecially at the compact, medium, and expanded breakpoint widths.\n\nIf you have an existing layout for compact screens, first optimize your layout\nfor the expanded width size class, since this size class provides the most space\nfor additional content and UI changes. Then decide what layout makes sense for\nthe medium width size class; consider adding a specialized layout.\n\nNext steps\n----------\n\nTo learn more about how to use window size classes to create responsive/adaptive\nlayouts, see the following:\n\n- For Compose-based layouts: [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes)\n\n- For view-based layouts: [Responsive/adaptive design with views](/develop/ui/views/layout/responsive-adaptive-design-with-views)\n\nTo learn more about what makes an app great on all devices and screen sizes,\nsee:\n\n- [Migrate your UI to responsive layouts](/guide/topics/large-screens/migrate-to-responsive-layouts)\n- [Large screen app quality](/docs/quality-guidelines/large-screen-app-quality)"]]
