שימוש בסיווגים של גדלים של חלונות

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

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

איור 1. ייצוגים של מחלקות גודל חלון שמבוססות על רוחב.
איור 2. ייצוגים של סיווגים של גודל חלון על סמך גובה.

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

סיווג לפי גודל נקודת עצירה (breakpoint) ייצוג המכשיר
רוחב קומפקטי רוחב < 600dp ‫99.96% מהטלפונים במצב לאורך
רוחב בינוני ‫600dp ≤ width < 840dp ‫93.73% מהטאבלטים בפריסה לאורך,

רוב המסכים הפנימיים הגדולים במצב פתוח לאורך
רוחב מורחב ‫840dp ≤ width < 1200dp ‫97.22% מהטאבלטים בפריסה לרוחב,

רוב המסכים הפנימיים הגדולים במצב פתוח ובפורמט אופקי הם ברוחב מורחב של לפחות
רוחב גדול ‫1200dp ≤ width < 1600dp מסכים של טאבלטים גדולים
רוחב גדול במיוחד רוחב ≥ 1,600dp תצוגות למחשב
גובה קומפקטי גובה < 480dp ‫99.78% מהטלפונים במצב לרוחב
גובה בינוני ‫480dp ≤ גובה < 900dp ‫96.56% מהטאבלטים במצב לרוחב,

‫97.59% מהטלפונים במצב לאורך
גובה מורחב גובה ≥ 900dp ‫94.25% מהטאבלטים במצב לאורך

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

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

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

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

מחשבים את הערך הנוכחי של הפרמטר WindowSizeClass באמצעות currentWindowAdaptiveInfo() הפונקציה ברמה העליונה של androidx.compose.material3.adaptive. הפונקציה מחזירה מופע של WindowAdaptiveInfo, שמכיל windowSizeClass. הדוגמה הבאה מראה איך לחשב את סיווג גודל החלון ולקבל מתעדכן בכל פעם שסיווג גודל החלון משתנה:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

ניהול פריסות באמצעות סיווגי גודל של חלונות

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

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

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Decide whether to show the top app bar based on window size class.
    val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)

    // MyScreen logic is based on the showTopAppBar boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

בדיקה של מחלקות גודל חלון

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

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

השלבים הבאים

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

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

הקודם
תמיכה בגדלים שונים של מסכים
הבא
תמיכה במצב ריבוי חלונות