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

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

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

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

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

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

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

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

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

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

דוגמה מלאה אפשר לראות בדוגמה של משבצות של טיימרים ב-GitHub.