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

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

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

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

בקטע הקוד הבא נעשה שימוש ברכיב TransformingLazyColumn כדי ליצור תוכן שנראה נהדר במגוון גדלים של מסכי Wear OS:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

בדוגמה הזו מוצגים גם ScreenScaffold ו-AppScaffold. הקואורדינטות האלה מתואמות בין האפליקציה לבין מסכים ספציפיים (נתיבי ניווט) כדי להבטיח את התנהגות הגלילה הנכונה ואת המיקום TimeText.

לגבי הריווח העליון והתחתון, חשוב לשים לב גם לנקודות הבאות:

• המפרט של ItemType הראשון והאחרון, כדי לקבוע את הריווח הנכון.
• השימוש ב-ListHeader לפריט הראשון ברשימה, כי לכותרות Text אסור להוסיף ריווח פנימי.

המפרטים המלאים זמינים בערכות העיצוב של Figma. פרטים נוספים ודוגמאות זמינים במאמרים הבאים:

• ספריית Horologist – מספקת כלים שימושיים לפיתוח אפליקציות מותאמות ומובחנות ל-Wear OS.
• הדוגמה ComposeStarter – דוגמה שמציגה את העקרונות שמפורטים במדריך הזה.
• הדוגמה JetCaster – דוגמה מורכבת יותר ליצירת אפליקציה שתפעל עם גדלים שונים של מסכים, באמצעות ספריית Horologist.

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

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

ההשפעה של גדלי מכשירים שונים ושל שינוי גודל הגופן.

תיבות דו-שיח

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

יכול להיות שבמסכים בהתאמה אישית צריך להשתמש בפריסות שלא מאפשרות גלילה

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

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

הגדרת נקודות עצירה כדי לספק חוויות שימוש שונות

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

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...
List.kt

הנחיות העיצוב מציגות עוד הזדמנויות כאלה.

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

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

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

חשוב לוודא שאתם מטמיעים תצוגות מקדימות באמצעות WearPreviewDevices ו-WearPreviewFontScales בכל המסכים באפליקציה.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

בדיקת צילומי מסך

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

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

בדוגמאות שלנו אנחנו משתמשים ב-Roborazzi לבדיקת צילומי מסך:

1. מגדירים את קובצי הפרויקט והאפליקציה build.gradle לשימוש ב-Roborazzi.
2. יוצרים בדיקת צילומי מסך לכל מסך באפליקציה. לדוגמה, הקוד הבא מציג בדיקת צילומי מסך למסך שמכיל רשימה:

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}
ListTest.kt

כמה נקודות חשובות שכדאי לזכור:

• ‫WearDevice.entries מכיל הגדרות לרוב מכשירי Wear OS הפופולריים, כדי שהבדיקות יפעלו בטווח מייצג של גדלי מסך.

יצירת תמונות מוזהבות

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

./gradlew recordRoborazziDebug

אימות התמונות

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

./gradlew verifyRoborazziDebug

דוגמה מלאה לבדיקת צילומי מסך זמינה בדוגמה ComposeStarter.