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

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

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

יצירת פריסות רספונסיביות באמצעות ProtoLayout

בספרייה ProtoLayout Material יש פריסות מוגדרות מראש שיעזרו לכם ליצור את המשבצות. הפריסות האלה כבר תוכננו כך שיתאימו לגודל המסך.

כדאי לעיין בפריסות העיצוב ב-Figma, שבהן מוצגות הפריסות הקנוניות הזמינות ואופן היצירה של העיצוב באמצעותן:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

מומלץ להשתמש ב-PrimaryLayout או ב-EdgeContentLayout בתור פריסות ברמה העליונה ברוב תרחישי השימוש. מגדירים את ההתנהגות הרספונסיבית באמצעות setResponsiveContentInsetEnabled, לדוגמה:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

מספקים חוויות שונות באמצעות נקודות עצירה (breakpoint)

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

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

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

הנחיות לעיצוב ממחישות הזדמנויות נוספות.

בדיקת המשבצות בגודלי מסך שונים באמצעות תצוגות מקדימות

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

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

תצוגות קטנות וגדולות שמציגות את ההשפעה של נקודת העצירה

דוגמה מלאה זמינה בדוגמה של משבצות מדיה ב-GitHub.