با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
کلاس‌های اندازه پنجره مجموعه‌ای از نقاط شکست دیدگاه هستند که به شما در طراحی، توسعه و آزمایش طرح‌بندی‌های پاسخگو/تطبیقی کمک می‌کنند. نقاط شکست سادگی طرح‌بندی را با انعطاف‌پذیری بهینه‌سازی برنامه شما برای موارد منحصر به فرد متعادل می‌کند.
کلاس‌های اندازه پنجره، ناحیه نمایش در دسترس برنامه شما را به‌عنوان فشرده ، متوسط ، گسترده ، بزرگ یا بسیار بزرگ دسته‌بندی می‌کنند. عرض و ارتفاع موجود به طور جداگانه طبقه‌بندی می‌شوند، بنابراین در هر نقطه از زمان، برنامه شما دارای دو کلاس اندازه پنجره است-یکی برای عرض، یکی برای ارتفاع. عرض در دسترس معمولاً به دلیل فراگیر بودن پیمایش عمودی مهمتر از ارتفاع موجود است، بنابراین کلاس اندازه پنجره عرض احتمالاً بیشتر به رابط کاربری برنامه شما مرتبط است.
شکل 1. نمایش کلاس های اندازه پنجره مبتنی بر عرض. شکل 2. نمایش کلاس های اندازه پنجره مبتنی بر ارتفاع.
همانطور که در شکل‌ها مشاهده می‌شود، نقاط شکست به شما اجازه می‌دهند تا در مورد چیدمان‌ها از نظر دستگاه‌ها و پیکربندی‌ها فکر کنید. هر نقطه شکست کلاس اندازه یک مورد اکثریت را برای سناریوهای دستگاه معمولی نشان می دهد، که می تواند یک چارچوب مرجع مفید باشد، همانطور که شما در مورد طراحی طرح بندی های مبتنی بر نقطه شکست خود فکر می کنید.
کلاس اندازه
نقطه شکست
نمایندگی دستگاه
عرض جمع و جور
عرض < 600dp
99.96 درصد از تلفن ها در حالت پرتره
عرض متوسط
600dp ≤ عرض < 840dp
93.73 درصد از تبلت ها به صورت پرتره،
بیشتر نمایشگرهای داخلی تا شده بزرگ به صورت پرتره
عرض گسترش یافته است
840dp ≤ عرض < 1200dp
97.22٪ از تبلت ها در چشم انداز،
اکثر نمایشگرهای داخلی تا شده بزرگ در منظره حداقل عرض دارند
عرض زیاد
1200dp ≤ عرض < 1600dp
صفحه نمایش تبلت های بزرگ
عرض بسیار زیاد
عرض ≥ 1600dp
نمایشگرهای رومیزی
ارتفاع جمع و جور
ارتفاع < 480dp
99.78٪ از تلفن ها در چشم انداز
ارتفاع متوسط
480dp ≤ ارتفاع < 900dp
96.56٪ از تبلت ها در چشم انداز،
97.59 درصد از تلفن ها در حالت پرتره
ارتفاع منبسط شده
ارتفاع ≥ 900dp
94.25 درصد تبلت ها به صورت پرتره
اگرچه تجسم کلاس‌های اندازه به عنوان دستگاه‌های فیزیکی می‌تواند مفید باشد، کلاس‌های اندازه پنجره به صراحت با اندازه صفحه دستگاه تعیین نمی‌شوند. کلاس های اندازه پنجره برای منطق نوع isTablet در نظر گرفته نشده اند. در عوض، کلاس‌های اندازه پنجره با اندازه پنجره در دسترس برنامه شما بدون توجه به نوع دستگاهی که برنامه روی آن اجرا می‌شود تعیین می‌شود، که دو مفهوم مهم دارد:
دستگاه های فیزیکی کلاس اندازه پنجره خاصی را تضمین نمی کنند. فضای صفحه در دسترس برنامه شما به دلایل زیادی می تواند با اندازه صفحه نمایش دستگاه متفاوت باشد. در دستگاه های تلفن همراه، حالت تقسیم صفحه می تواند صفحه را بین دو برنامه تقسیم کند. در ChromeOS، برنامه‌های Android را می‌توان در پنجره‌هایی از نوع دسک‌تاپ ارائه کرد که به‌طور دلخواه قابل تغییر اندازه هستند. تاشوها می‌توانند دو صفحه نمایش با اندازه‌های مختلف داشته باشند که با تا کردن یا باز کردن دستگاه به‌صورت جداگانه قابل دسترسی هستند.
کلاس اندازه پنجره می تواند در طول عمر برنامه شما تغییر کند. در حالی که برنامه شما در حال اجرا است، تغییر جهت دستگاه، انجام چند کار، و تا کردن/باز کردن می‌تواند میزان فضای موجود روی صفحه را تغییر دهد. در نتیجه، کلاس اندازه پنجره پویا است و رابط کاربری برنامه شما باید مطابق با آن سازگار شود.
کلاس‌های اندازه پنجره به نقاط شکست فشرده، متوسط و گسترده در راهنمای طرح‌بندی مواد طراحی می‌شوند. از کلاس‌های اندازه پنجره برای تصمیم‌گیری در مورد طرح‌بندی برنامه در سطح بالا استفاده کنید، مانند تصمیم‌گیری در مورد استفاده از یک طرح‌بندی متعارف خاص برای استفاده از فضای اضافی صفحه.
طرح بندی ها را با کلاس های اندازه پنجره مدیریت کنید
کلاس‌های اندازه پنجره به شما امکان می‌دهند با تغییر فضای نمایش در دسترس برنامه، طرح‌بندی برنامه‌تان را تغییر دهید، به عنوان مثال، وقتی دستگاه تا می‌شود یا باز می‌شود، جهت دستگاه تغییر می‌کند یا اندازه پنجره برنامه در حالت چند پنجره‌ای تغییر می‌کند.
منطق مدیریت تغییرات اندازه نمایشگر را با انتقال کلاس‌های اندازه پنجره به‌عنوان حالت به ترکیب‌های تودرتو، درست مانند هر حالت برنامه دیگر، محلی کنید:
@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,/* ... */)}
همانطور که در طرح‌بندی تغییراتی ایجاد می‌کنید، رفتار طرح‌بندی را در تمام اندازه‌های پنجره، به‌ویژه در پهنای نقطه شکست فشرده، متوسط و گسترش یافته آزمایش کنید.
اگر طرح‌بندی موجود برای صفحه‌نمایش‌های جمع‌وجور دارید، ابتدا طرح‌بندی خود را برای کلاس اندازه پهن‌شده بهینه کنید، زیرا این کلاس اندازه بیشترین فضا را برای محتوای اضافی و تغییرات UI فراهم می‌کند. سپس تصمیم بگیرید که چه چیدمانی برای کلاس اندازه عرض متوسط منطقی است. اضافه کردن یک طرح بندی تخصصی را در نظر بگیرید.
مراحل بعدی
برای کسب اطلاعات بیشتر در مورد نحوه استفاده از کلاس‌های اندازه پنجره برای ایجاد طرح‌بندی‌های واکنش‌گرا/تطبیقی، به موارد زیر مراجعه کنید:
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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,["Window 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/5673ffc60b614daf028ee936227128eb8c4f9781/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\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/5673ffc60b614daf028ee936227128eb8c4f9781/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\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\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)"]]
