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

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

@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.