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

כדאי לנסות את התכונה 'כתיבה מהירה'

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך משתמשים בקטגוריות של גודל חלון ב-Compose

חלוקה לקטגוריות של גודל חלון ב'כתיבה' →

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

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

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

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

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

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

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

אפשר לחשב את הערך הנוכחי WindowSizeClass באמצעות WindowSizeClass#compute() הפונקציה שסופקה על ידי Jetpack ספריית windowManager. הדוגמה הבאה מראה איך לחשב את סיווג גודל החלון ולקבל עדכונים בכל פעם שינויים במחלקות של גודל החלון:

class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        val container: ViewGroup = binding.container

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(object : View(this) {
            override fun onConfigurationChanged(newConfig: Configuration?) {
                super.onConfigurationChanged(newConfig)
                computeWindowSizeClasses()
            }
        })

        computeWindowSizeClasses()
    }

    private fun computeWindowSizeClasses() {
        val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this)
        val width = metrics.bounds.width()
        val height = metrics.bounds.height()
        val density = resources.displayMetrics.density
        val windowSizeClass = WindowSizeClass.compute(width/density, height/density)
        // COMPACT, MEDIUM, or EXPANDED
        val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass
        // COMPACT, MEDIUM, or EXPANDED
        val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        ViewGroup container = binding.container;

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(new View(this) {
            @Override
            protected void onConfigurationChanged(Configuration newConfig) {
                super.onConfigurationChanged(newConfig);
                computeWindowSizeClasses();
            }
        });

        computeWindowSizeClasses();
    }

    private void computeWindowSizeClasses() {
        WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
                .computeCurrentWindowMetrics(this);

        int width = metrics.getBounds().width
        int height = metrics.getBounds().height()
        float density = getResources().getDisplayMetrics().density;
        WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density)
        // COMPACT, MEDIUM, or EXPANDED
        WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass()
        // COMPACT, MEDIUM, or EXPANDED
        WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass()

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

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

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

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

השלבים הבאים

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

• לפריסות מבוססות-Compose: תמיכה בגדלים שונים של תצוגה

• לפריסות מבוססות-תצוגה: עיצוב רספונסיבי/מותאם עם תצוגות

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

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