סיווגי גודל של חלונות

סיווגי גודל של חלונות הם קבוצה של נקודות עצירה מקובעות לאזור התצוגה, שעוזרות לך לעצב, לפתח ולבדוק פריסות רספונסיביות/מותאמות. היתרה של נקודות העצירה (breakpoint) פריסה פשוטה עם גמישות שמאפשרת אופטימיזציה של האפליקציה לטיפול במקרים ייחודיים.

סיווגי גודל החלונות מסווגים את אזור התצוגה שזמין לאפליקציה בתור קומפקטי, בינוני או מורחב. המערכת מסווגת את הרוחב והגובה הזמינים בנפרד, כך שבכל רגע נתון, לאפליקציה יש שני גודל של חלונות סיווגים – אחד לרוחב, אחד לגובה. הרוחב הזמין בדרך כלל גדול יותר חשוב מהגובה הזמין בגלל הגלילה האנכית בכל מקום, סביר להניח שסיווג הגודל של חלון הרוחב יהיה רלוונטי יותר לממשק המשתמש של האפליקציה שלכם.

איור 1. ייצוגים של סיווגי גודל של חלונות מבוססי רוחב.
איור 2. ייצוגים של סיווגי גודל של חלונות מבוססי גובה.

נקודות העצירה (breakpoint) מאפשרות לכם להמשיך לחשוב, כפי שמוצג באיורים על הפריסות בהקשר של מכשירים והגדרות אישיות. כל נקודת עצירה (breakpoint) של קטגוריית גודל שמייצג את רוב המקרים בתרחישים נפוצים במכשיר, וזה יכול להיות כשחושבים על העיצוב של נקודת העצירה (breakpoint) שונות.

קטגוריית גודל נקודת עצירה (breakpoint) ייצוג המכשיר
רוחב קומפקטי רוחב < 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 יכולות יוצגו בחלונות בפריסה גמישה, שניתן לשנות את הגודל שלהם באופן שרירותי. במכשירים מתקפלים אפשר לגשת בנפרד לשני מסכים בגדלים שונים על ידי קיפול או פתיחה של המכשיר.

  • סיווג גודל החלון יכול להשתנות במהלך כל משך החיים של האפליקציה. בזמן שהאפליקציה פועלת, כיוון המכשיר משתנה, ואפשר גם להשתמש בריבוי משימות קיפול/פתיחה יכול לשנות את כמות השטח הזמין במסך. בתור כתוצאה מכך, סיווג גודל החלון הוא דינמי, וממשק המשתמש של האפליקציה שלך אמור להתאים את עצמו בהתאם.

סיווגי גודל החלונות ממופים לנקודות עצירה קומפקטיות, בינוניות ומורחבות פריסה של עיצוב Material Design הנחיה. השתמשו בסיווגים של גודל החלון כדי לקבל החלטות כלליות לגבי פריסת האפליקציות, כמו החלטה אם להשתמש בפריסה קנונית ספציפית כדי לנצל שטח נוסף במסך.

מחשבים את הערך הנוכחי של הפרמטר 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,
        /* ... */
    )
}

בדיקת סיווגי הגודל של החלונות

כשמבצעים שינויים בפריסה, חשוב לבדוק את התנהגות הפריסה בכל הגדלים של החלונות, במיוחד ברוחב של נקודות עצירה קומפקטיות, בינוניות ומורחבות.

אם יש לכם פריסה קיימת למסכים קומפקטיים, קודם צריך לבצע אופטימיזציה של הפריסה לסיווג הרוחב המורחב, כי סיווג הגודל הזה מספק את השטח הגדול ביותר כדי לקבל מידע נוסף על שינויים בתוכן ובממשק המשתמש. לאחר מכן מחליטים איזו פריסה מתאימה יותר סיווג הגודל של רוחב בינוני; כדאי להוסיף פריסה ספציפית.

השלבים הבאים

כדי לקבל מידע נוסף על השימוש בסיווגים של גודל החלון כדי ליצור מודעות רספונסיביות או מותאמות תוכלו לראות את הדברים הבאים:

כדי לקבל מידע נוסף על היתרונות של אפליקציה בכל סוגי המכשירים והמסכים, למידע נוסף: