کلاس های اندازه پنجره

کلاس‌های اندازه پنجره مجموعه‌ای از نقاط شکست دیدگاه هستند که به شما در طراحی، توسعه و آزمایش طرح‌بندی‌های پاسخگو/تطبیقی ​​کمک می‌کنند. نقاط شکست سادگی طرح‌بندی را با انعطاف‌پذیری بهینه‌سازی برنامه شما برای موارد منحصر به فرد متعادل می‌کند.

کلاس‌های اندازه پنجره، ناحیه نمایش در دسترس برنامه شما را به‌عنوان فشرده ، متوسط ​​یا گسترده دسته‌بندی می‌کنند. عرض و ارتفاع موجود به طور جداگانه طبقه‌بندی می‌شوند، بنابراین در هر نقطه از زمان، برنامه شما دارای دو کلاس اندازه پنجره است-یکی برای عرض، یکی برای ارتفاع. عرض در دسترس معمولاً به دلیل فراگیر بودن پیمایش عمودی مهمتر از ارتفاع موجود است، بنابراین کلاس اندازه پنجره عرض احتمالاً بیشتر به رابط کاربری برنامه شما مرتبط است.

شکل 1. نمایش کلاس های اندازه پنجره مبتنی بر عرض.
شکل 2. نمایش کلاس های اندازه پنجره مبتنی بر ارتفاع.

همانطور که در شکل‌ها مشاهده می‌شود، نقاط شکست به شما اجازه می‌دهند تا در مورد چیدمان‌ها از نظر دستگاه‌ها و پیکربندی‌ها فکر کنید. هر نقطه شکست کلاس اندازه یک مورد اکثریت را برای سناریوهای دستگاه معمولی نشان می دهد، که می تواند یک چارچوب مرجع مفید باشد، همانطور که شما در مورد طراحی طرح بندی های مبتنی بر نقطه شکست خود فکر می کنید.

کلاس اندازه نقطه شکست نمایندگی دستگاه
عرض جمع و جور عرض < 600dp 99.96 درصد از تلفن ها در حالت پرتره
عرض متوسط 600dp ≤ عرض < 840dp 93.73 درصد از تبلت ها به صورت پرتره،

بیشتر نمایشگرهای داخلی تا شده بزرگ به صورت پرتره

عرض گسترش یافته است عرض ≥ 840dp 97.22٪ از تبلت ها در چشم انداز،

بیشتر نمایشگرهای داخلی باز شده بزرگ در چشم انداز

ارتفاع جمع و جور ارتفاع < 480dp 99.78٪ از تلفن ها در چشم انداز
ارتفاع متوسط 480dp ≤ ارتفاع < 900dp 96.56٪ از تبلت ها در چشم انداز،

97.59 درصد از تلفن ها در حالت پرتره

ارتفاع منبسط شده ارتفاع ≥ 900dp 94.25 درصد تبلت ها به صورت پرتره

اگرچه تجسم کلاس‌های اندازه به عنوان دستگاه‌های فیزیکی می‌تواند مفید باشد، کلاس‌های اندازه پنجره به صراحت با اندازه صفحه دستگاه تعیین نمی‌شوند. کلاس های اندازه پنجره برای منطق نوع isTablet در نظر گرفته نشده اند. در عوض، کلاس‌های اندازه پنجره با اندازه پنجره در دسترس برنامه شما بدون توجه به نوع دستگاهی که برنامه روی آن اجرا می‌شود تعیین می‌شود، که دو مفهوم مهم دارد:

  • دستگاه های فیزیکی کلاس اندازه پنجره خاصی را تضمین نمی کنند. فضای صفحه در دسترس برنامه شما به دلایل زیادی می تواند با اندازه صفحه نمایش دستگاه متفاوت باشد. در دستگاه های تلفن همراه، حالت تقسیم صفحه می تواند صفحه را بین دو برنامه تقسیم کند. در ChromeOS، برنامه‌های Android را می‌توان در پنجره‌هایی از نوع دسک‌تاپ ارائه کرد که به‌طور دلخواه قابل تغییر اندازه هستند. تاشوها می‌توانند دو صفحه نمایش با اندازه‌های مختلف داشته باشند که با تا کردن یا باز کردن دستگاه به‌صورت جداگانه قابل دسترسی هستند.

  • کلاس اندازه پنجره می تواند در طول عمر برنامه شما تغییر کند. در حالی که برنامه شما در حال اجرا است، تغییر جهت دستگاه، انجام چند کار، و تا کردن/باز کردن می‌تواند میزان فضای موجود روی صفحه را تغییر دهد. در نتیجه، کلاس اندازه پنجره پویا است و رابط کاربری برنامه شما باید مطابق با آن سازگار شود.

کلاس‌های اندازه پنجره به نقاط شکست فشرده، متوسط ​​و گسترده در راهنمای طرح‌بندی مواد طراحی می‌شوند. از کلاس‌های اندازه پنجره برای تصمیم‌گیری در مورد طرح‌بندی برنامه در سطح بالا استفاده کنید، مانند تصمیم‌گیری در مورد استفاده از یک طرح‌بندی متعارف خاص برای استفاده از فضای اضافی صفحه.

使用WindowSizeClass currentWindowAdaptiveInfo() 的顶层函数 androidx.compose.material3.adaptive 库。该函数返回一个 WindowAdaptiveInfo 的实例,其中包含 windowSizeClass。通过 以下示例展示了如何计算窗口大小类别并接收 会在窗口大小类别发生变化时更新:

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,
        /* ... */
    )
}

کلاس های اندازه پنجره را آزمایش کنید

همانطور که در طرح‌بندی تغییراتی ایجاد می‌کنید، رفتار طرح‌بندی را در تمام اندازه‌های پنجره، به‌ویژه در پهنای نقطه شکست فشرده، متوسط ​​و گسترش یافته آزمایش کنید.

اگر طرح‌بندی موجود برای صفحه‌نمایش‌های جمع‌وجور دارید، ابتدا طرح‌بندی خود را برای کلاس اندازه پهن‌شده بهینه کنید، زیرا این کلاس اندازه بیشترین فضا را برای محتوای اضافی و تغییرات UI فراهم می‌کند. سپس تصمیم بگیرید که چه چیدمانی برای کلاس اندازه عرض متوسط ​​منطقی است. اضافه کردن یک طرح بندی تخصصی را در نظر بگیرید.

مراحل بعدی

برای کسب اطلاعات بیشتر در مورد نحوه استفاده از کلاس‌های اندازه پنجره برای ایجاد طرح‌بندی‌های واکنش‌گرا/تطبیقی، به موارد زیر مراجعه کنید:

برای کسب اطلاعات بیشتر در مورد آنچه که یک برنامه را در همه دستگاه‌ها و اندازه‌های صفحه نمایش عالی می‌کند، ببینید:

،

کلاس‌های اندازه پنجره مجموعه‌ای از نقاط شکست دیدگاه هستند که به شما در طراحی، توسعه و آزمایش طرح‌بندی‌های پاسخگو/تطبیقی ​​کمک می‌کنند. نقاط شکست سادگی طرح‌بندی را با انعطاف‌پذیری بهینه‌سازی برنامه شما برای موارد منحصر به فرد متعادل می‌کند.

کلاس‌های اندازه پنجره، ناحیه نمایش در دسترس برنامه شما را به‌عنوان فشرده ، متوسط ​​یا گسترده دسته‌بندی می‌کنند. عرض و ارتفاع موجود به طور جداگانه طبقه‌بندی می‌شوند، بنابراین در هر نقطه از زمان، برنامه شما دارای دو کلاس اندازه پنجره است-یکی برای عرض، یکی برای ارتفاع. عرض در دسترس معمولاً به دلیل فراگیر بودن پیمایش عمودی مهمتر از ارتفاع موجود است، بنابراین کلاس اندازه پنجره عرض احتمالاً بیشتر به رابط کاربری برنامه شما مرتبط است.

شکل 1. نمایش کلاس های اندازه پنجره مبتنی بر عرض.
شکل 2. نمایش کلاس های اندازه پنجره مبتنی بر ارتفاع.

همانطور که در شکل‌ها مشاهده می‌شود، نقاط شکست به شما اجازه می‌دهند تا در مورد چیدمان‌ها از نظر دستگاه‌ها و پیکربندی‌ها فکر کنید. هر نقطه شکست کلاس اندازه یک مورد اکثریت را برای سناریوهای دستگاه معمولی نشان می دهد، که می تواند یک چارچوب مرجع مفید باشد، همانطور که شما در مورد طراحی طرح بندی های مبتنی بر نقطه شکست خود فکر می کنید.

کلاس اندازه نقطه شکست نمایندگی دستگاه
عرض جمع و جور عرض < 600dp 99.96 درصد از تلفن ها در حالت پرتره
عرض متوسط 600dp ≤ عرض < 840dp 93.73 درصد از تبلت ها به صورت پرتره،

بیشتر نمایشگرهای داخلی تا شده بزرگ به صورت پرتره

عرض گسترش یافته است عرض ≥ 840dp 97.22٪ از تبلت ها در چشم انداز،

بیشتر نمایشگرهای داخلی باز شده بزرگ در چشم انداز

ارتفاع جمع و جور ارتفاع < 480dp 99.78٪ از تلفن ها در چشم انداز
ارتفاع متوسط 480dp ≤ ارتفاع < 900dp 96.56٪ از تبلت ها در چشم انداز،

97.59 درصد از تلفن ها در حالت پرتره

ارتفاع منبسط شده ارتفاع ≥ 900dp 94.25 درصد تبلت ها به صورت پرتره

اگرچه تجسم کلاس‌های اندازه به عنوان دستگاه‌های فیزیکی می‌تواند مفید باشد، کلاس‌های اندازه پنجره به صراحت با اندازه صفحه دستگاه تعیین نمی‌شوند. کلاس های اندازه پنجره برای منطق نوع isTablet در نظر گرفته نشده اند. در عوض، کلاس‌های اندازه پنجره با اندازه پنجره در دسترس برنامه شما بدون توجه به نوع دستگاهی که برنامه روی آن اجرا می‌شود تعیین می‌شود، که دو مفهوم مهم دارد:

  • دستگاه های فیزیکی کلاس اندازه پنجره خاصی را تضمین نمی کنند. فضای صفحه در دسترس برنامه شما به دلایل زیادی می تواند با اندازه صفحه نمایش دستگاه متفاوت باشد. در دستگاه های تلفن همراه، حالت تقسیم صفحه می تواند صفحه را بین دو برنامه تقسیم کند. در ChromeOS، برنامه‌های Android را می‌توان در پنجره‌هایی از نوع دسک‌تاپ ارائه کرد که به‌طور دلخواه قابل تغییر اندازه هستند. تاشوها می‌توانند دو صفحه نمایش با اندازه‌های مختلف داشته باشند که با تا کردن یا باز کردن دستگاه به‌صورت جداگانه قابل دسترسی هستند.

  • کلاس اندازه پنجره می تواند در طول عمر برنامه شما تغییر کند. در حالی که برنامه شما در حال اجرا است، تغییر جهت دستگاه، انجام چند کار، و تا کردن/باز کردن می‌تواند میزان فضای موجود روی صفحه را تغییر دهد. در نتیجه، کلاس اندازه پنجره پویا است و رابط کاربری برنامه شما باید مطابق با آن سازگار شود.

کلاس‌های اندازه پنجره به نقاط شکست فشرده، متوسط ​​و گسترده در راهنمای طرح‌بندی مواد طراحی می‌شوند. از کلاس‌های اندازه پنجره برای تصمیم‌گیری در مورد طرح‌بندی برنامه در سطح بالا استفاده کنید، مانند تصمیم‌گیری در مورد استفاده از یک طرح‌بندی متعارف خاص برای استفاده از فضای اضافی صفحه.

使用WindowSizeClass currentWindowAdaptiveInfo() 的顶层函数 androidx.compose.material3.adaptive 库。该函数返回一个 WindowAdaptiveInfo 的实例,其中包含 windowSizeClass。通过 以下示例展示了如何计算窗口大小类别并接收 会在窗口大小类别发生变化时更新:

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,
        /* ... */
    )
}

کلاس های اندازه پنجره را آزمایش کنید

همانطور که در طرح‌بندی تغییراتی ایجاد می‌کنید، رفتار طرح‌بندی را در تمام اندازه‌های پنجره، به‌ویژه در پهنای نقطه شکست فشرده، متوسط ​​و گسترش یافته آزمایش کنید.

اگر طرح‌بندی موجود برای صفحه‌نمایش‌های جمع‌وجور دارید، ابتدا طرح‌بندی خود را برای کلاس اندازه پهن‌شده بهینه کنید، زیرا این کلاس اندازه بیشترین فضا را برای محتوای اضافی و تغییرات UI فراهم می‌کند. سپس تصمیم بگیرید که چه چیدمانی برای کلاس اندازه عرض متوسط ​​منطقی است. اضافه کردن یک طرح بندی تخصصی را در نظر بگیرید.

مراحل بعدی

برای کسب اطلاعات بیشتر در مورد نحوه استفاده از کلاس‌های اندازه پنجره برای ایجاد طرح‌بندی‌های واکنش‌گرا/تطبیقی، به موارد زیر مراجعه کنید:

برای کسب اطلاعات بیشتر در مورد آنچه که یک برنامه را در همه دستگاه‌ها و اندازه‌های صفحه نمایش عالی می‌کند، ببینید: