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

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

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

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

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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. יוצרים בדיקת צילומי מסך לכל מסך באפליקציה. לדוגמה, בדוגמה ComposeStarter, בדיקה של GreetingScreen מיושמת כמו שרואים ב-GreetingScreenTest:

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

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

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

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

יצירת תמונות מושלמות

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

./gradlew recordRoborazziDebug

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

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

./gradlew verifyRoborazziDebug

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