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

כרטיסי המידע של האפליקציה אמורים לפעול היטב במכשירי 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 לחצנים במסך גדול יותר. מסך.

כדי ליישם חוויה שונה מהסוג הזה, צריך להשתמש בגודל המסך breakpoints. כדי להציג פריסה שונה כשגודל המסך חורג מ-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.