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

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

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

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

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

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

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

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

מתן חוויות שונות באמצעות נקודות עצירה

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

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

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

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

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

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

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

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

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

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