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

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

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

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

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

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

תיבות דו-שיח

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

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

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

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

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

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