תחילת העבודה עם כרטיסי מידע

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

כדי להתחיל לספק משבצות מהאפליקציה, צריך לכלול את יחסי התלות הבאים בקובץ build.gradle של האפליקציה.

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.4.1"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.2.1"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.2.1"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.2.1"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.4.1"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.4.1"
}

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.4.1")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.2.1")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.2.1")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.2.1")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.4.1")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.4.1")
}

מושגים מרכזיים

המשבצות לא נוצרות באותו אופן שבו נוצרות אפליקציות ל-Android, והן מבוססות על מושגים שונים:

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

• משאבים: אובייקטים מסוג ResourceBuilders.Resources מורכבים ממפה של זוגות מפתח/ערך של משאבי Android (תמונות) שנדרשים כדי להציג פריסה, וגרסה.
• ציר זמן: אובייקט TimelineBuilders.Timeline הוא רשימה של מופע אחד או יותר של אובייקט פריסה. אפשר לספק מנגנונים וביטויים שונים כדי לציין מתי ה-Renderer צריך לעבור מאובייקט פריסה אחד לאחר, למשל כדי להפסיק להציג פריסה בשעה מסוימת.
• מצב: מבנה נתונים מסוג StateBuilders.State שמועברים בין המשבצת לאפליקציה, כדי לאפשר לשני הרכיבים לתקשר ביניהם. לדוגמה, אם מקישים על לחצן באריח, המצב מכיל את המזהה של הלחצן. אפשר גם להמיר בין סוגי נתונים באמצעות מפה.
• משבצת: אובייקט TileBuilders.Tile שמייצג משבצת, ומורכב מציר זמן, מזהה גרסה של משאבים, מרווח זמן עדכניות ומצב.
• Protolayout: המונח הזה מופיע בשמות של כיתות שונות שקשורות לאריחים, והוא מתייחס לספריית Protolayout של Wear OS, ספריית גרפיקה שמשמשת בממשקים שונים של Wear OS.

יצירת משבצת

כדי לספק משבצת מהאפליקציה, מטמיעים שירות מסוג TileService ומרשמים אותו במניפסט. על סמך המידע הזה, המערכת מבקשת את השבבים הנדרשים במהלך קריאות ל-onTileRequest() ואת המשאבים במהלך קריאות ל-onTileResourcesRequest().

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        materialScope(this, requestParams.deviceConfiguration) {
                            primaryLayout(
                                mainSlot = {
                                    text("Hello, World!".layoutString, typography = BODY_LARGE)
                                }
                            )
                        }
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(
            Resources.Builder().setVersion(RESOURCES_VERSION).build()
        )
}
Tile.kt

בשלב הבא, מוסיפים שירות בתוך התג <application> בקובץ AndroidManifest.xml.

<service
    android:name=".snippets.m3.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

מסנן ההרשאות והכוונות רושם את השירות הזה כספק משבצות.

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

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

דוגמה מלאה זמינה בקוד לדוגמה ב-GitHub או בcodelab.

יצירת ממשק משתמש לאריחים

רכיבי ממשק המשתמש של Material 3 Expressive נוצרים באמצעות גישה מובנית שמבוססת על תבנית ה-builder ללא סכנות בטיפוסים של Kotlin.

פריסה

כדי ליצור את הפריסה:

1. מפעילים היקף של Material Design: קוראים לפונקציה materialScope() ומספקים את context ו-deviceConfiguration הנדרשים. אפשר לכלול פרמטרים אופציונליים, כמו allowDynamicTheme ו-defaultColorScheme. הערך של allowDynamicTheme הוא true כברירת מחדל, והערך של defaultColorScheme מייצג את ColorScheme שמשמש כשצבעים דינמיים לא זמינים (למשל, כשהמשתמש השבית את התכונה, או כשהיא לא נתמכת במכשיר, או כש-allowDynamicTheme הוא false).

2. יצירת ממשק המשתמש במסגרת ההיקף: כל רכיבי ממשק המשתמש של פריסה נתונה של משבצות חייבים להיות מוגדרים בתוך פונקציית הלמבדה של קריאה יחידה ברמה העליונה של materialScope()‎. פונקציות הרכיבים האלה, כמו primaryLayout() ו-textEdgeButton(), הן פונקציות תוסף ב-MaterialScope וזמינות רק כשקוראים להן בהיקף המקלט הזה.

   materialScope(
       context = context,
       deviceConfiguration = requestParams.deviceConfiguration, // requestParams is passed to onTileRequest
       defaultColorScheme = myFallbackColorScheme
   ) {
       // inside the MaterialScope, you can call functions like primaryLayout()
       primaryLayout(
           titleSlot = { text(text = "Title".layoutString) },
           mainSlot = { text(text = "Main Content".layoutString) },
           bottomSlot = { textEdgeButton(text = "Action".layoutString) }
       )
   }
   

מכונות מזל

ב-M3, פריסת המשבצות מבוססת על גישה בהשראת Compose, שמשתמשת בשלוש משבצות נפרדות. מהחלק העליון למטה:

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

התוכן של כל חריץ הוא:

• titleSlot (אופציונלי): בדרך כלל כמה מילים שנוצרות על ידי text().
• mainSlot (חובה): רכיבים שמאורגנים במבנים כמו שורות, עמודות וקבוצות של לחצנים. אפשר גם להטמיע את הרכיבים האלה באופן רספונסיבי זה בתוך זה. לדוגמה, עמודה יכולה להכיל שורות.
• bottomSlot (אופציונלי): בדרך כלל ממולא בלחצן שמשתלב עם הקצה או בתווית טקסט.

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

רכיבי ממשק משתמש

בספרייה protolayout-material3 יש מספר גדול של רכיבים שתוכננו בהתאם למפרטים של Material 3 Expressive ולהמלצות לממשק המשתמש.

לחצנים

• textButton()‎: לחצן עם חריץ יחיד לתוכן טקסט (קצר)
• iconButton()‎: לחצן עם חריץ יחיד שמייצג סמל
• avatarButton()‎: כפתור דמות בצורת גלולה עם עד שלוש משבצות לתוכן שמייצג תווית ראשית ותווית משנית שנערמות אנכית, ותמונה (דמות) לצדן
• imageButton()‎: לחצן תמונה שניתן ללחוץ עליו, שלא מציע משבצות נוספות, רק תמונה (לדוגמה, backgroundImage כרקע)
• compactButton()‎: לחצן קומפקטי עם עד שני חריצים לתוכן שנערם אופקית, שמייצג סמל וטקסט לידו
• button()‎: לחצן בצורת גלולה עם עד שלושה משבצות לתוכן שמייצג תווית ותווית משנית בערימה אנכית, ואיקון לצדן

לחצני Edge

• iconEdgeButton()‎: לחצן קצה עם חריץ אחד לתמונה של סמל או תוכן קטן ועגול דומה
• textEdgeButton()‎: לחצן קצה שמציע חריץ יחיד לתמונה או לטקסט, או לתוכן ארוך ורחב באותו אופן

כרטיסים

• titleCard()‎: כרטיס כותרת עם מקום לאחד עד שלושה מודעות, בדרך כלל מבוסס טקסט
• appCard()‎: כרטיס אפליקציה עם עד חמישה משבצות, בדרך כלל מבוסס טקסט
• textDataCard()‎: כרטיס נתונים עם עד שלושה משבצות מוערמות אנכית, בדרך כלל טקסט או מספרים
• iconDataCard()‎: כרטיס נתונים עם עד שלושה משבצות מוערמות אנכית, בדרך כלל עם טקסט או מספרים, עם סמל
• graphicDataCard()‎: כרטיס נתונים גרפי שמציע חריץ לנתונים גרפיים, כמו אינדיקטור התקדמות, ועד שני חריצים מוערמים אנכית, בדרך כלל לתיאור טקסט

אינדיקטורים של התקדמות

• circularProgressIndicator()‎: מציין את ההתקדמות לקראת יעד באמצעות אלמנט רדיאלי
• segmentedCircularProgressIndicator()‎: מציין את ההתקדמות לעבר יעד באמצעות אלמנט רדיאלי עם שלבים נפרדים

קיבוץ רכיבי פריסה

• buttonGroup()‎: פריסה של רכיב שמציבה את הצאצאים שלו ברצף אופקי
• primaryLayout()‎: פריסת מסך מלא שמייצגת סגנון פריסת M3 מוצעת רספונסיבית שמטפלת במיקום הרכיבים, יחד עם השוליים והרווחים המומלצים שיוחלו

קביעת עיצוב

ב-Material 3 Expressive, מערכת הצבעים מוגדרת על ידי 29 תפקידים סטנדרטיים של צבעים, שמאורגנים בשש קבוצות: ראשי, משני, שלישי, שגיאה, משטח וקווי מתאר.

ColorScheme ממפה כל אחד מ-29 התפקידים האלה לצבע תואם, ומכיוון שהוא חלק מ-MaterialScope ויש ליצור רכיבים בתוכו, הצבעים שלהם נלקחים באופן אוטומטי מהתוכנית. הגישה הזו מאפשרת לכל רכיבי ממשק המשתמש לעמוד באופן אוטומטי בתקני Material Design.

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

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

materialScope(
  defaultColorScheme = myColorScheme
) {
  // If the user selects "no theme" in settings, myColorScheme is used.
  // Otherwise, the system-provided theme is used.
}

כדי לאלץ את המשבצות להופיע בערכת הצבעים שסיפקתם, משביתים את התמיכה בנושא עיצוב דינמי על ידי הגדרת allowDynamicTheme לערך false:

materialScope(
  allowDynamicTheme = false,
  defaultColorScheme = myColorScheme
) {
  // myColorScheme is *always* used.
}

צבע

כל רכיב ספציפי משתמש בקבוצת משנה של 29 תפקידי הצבע שמוגדרים על ידי ColorScheme. לדוגמה, בלחצנים נעשה שימוש בעד ארבעה צבעים, שבברירת המחדל נלקחים מהקבוצה 'ראשית' של ColorScheme הפעיל:

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

יש כמה דרכים להתאים אישית את צבעי הרכיבים:

1. שימוש בפונקציית עזר לצבעים מוגדרים מראש משתמשים בפונקציות עזר כמו filledTonalButtonColors() כדי להחיל את סגנונות הלחצנים הרגילים של Material 3 Expressive. הפונקציות האלה יוצרות מכונות ButtonColors שהוגדרו מראש, שממפות סגנונות נפוצים כמו 'מלאים', 'טונלי' או 'קווים מודגשים' לתפקידים המתאימים מה-ColorScheme הפעיל ב-MaterialScope. כך תוכלו להחיל סגנונות עקביים בלי להגדיר ידנית כל צבע לסוגים נפוצים של לחצנים.

   textEdgeButton(
       colors = filledButtonColors() // default
       /* OR colors = filledTonalButtonColors() */
       /* OR colors = filledVariantButtonColors() */
       // ... other parameters
   )
   

   בכרטיסים, משתמשים במשפחת הפונקציות המקבילה filledCardColors().

   אם אתם צריכים לשנות רק אסימון אחד או שניים, תוכלו גם לשנות את האובייקט ButtonColors שמוחזר על ידי פונקציות העזר באמצעות השיטה copy():

   textEdgeButton(
       colors =
           filledButtonColors()
               .copy(
                   containerColor = colorScheme.tertiary,
                   labelColor = colorScheme.onTertiary
               )
       // ... other parameters
   )
   

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

   textEdgeButton(
       colors =
           ButtonColors(
               // the materialScope makes colorScheme available
               containerColor = colorScheme.secondary,
               iconColor = colorScheme.secondaryDim,
               labelColor = colorScheme.onSecondary,
               secondaryLabelColor = colorScheme.onSecondary
           )
       // ... other parameters
   )
   

3. ציון צבעים קבועים (יש להשתמש בזהירות). באופן כללי מומלץ לציין צבעים לפי התפקיד הסמנטי שלהם (למשל, colorScheme.primary), אפשר גם לספק ערכים ישירים של צבעים. מומלץ להשתמש בגישה הזו במשורה, כי היא עלולה להוביל לאי-עקביות עם העיצוב הכללי, במיוחד אם העיצוב משתנה באופן דינמי.

   textEdgeButton(
       colors = filledButtonColors().copy(
           containerColor = android.graphics.Color.RED.argb, // Using named colors
           labelColor = 0xFFFFFF00.argb // Using a hex code for yellow
       )
       // ... other parameters
   )
   

טיפוגרפיה

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

כדי ליצור סגנון טקסט, בדרך כלל משתמשים בשיטה text() בשילוב עם קבועים טיפוגרפיים. הרכיב הזה מאפשר לכם להשתמש בתפקידי טיפוגרפיה מוגדרים מראש ב-Material 3 Expressive, וכך לעזור לכרטיס לעמוד בשיטות המומלצות הקיימות לטיפוגרפיה, כדי לשפר את הקריאוּת וההיררכיה שלו. הספרייה כוללת קבוצה של 18 קבועים סמנטיים של טיפוגרפיה, כמו BODY_MEDIUM. הקבועים האלה משפיעים גם על צירים של גופנים שאינם גודל.

text(
    text = "Hello, World!".layoutString,
    typography = BODY_MEDIUM,
)

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

text(
    text = "Hello, World".layoutString,
    italic = true,

    // Use elements defined in androidx.wear.protolayout.LayoutElementBuilders.FontSetting
    settings =
        listOf(weight(500), width(100F), roundness(100)),
)

לבסוף, אם אתם צריכים לשלוט בגודל או ברווח בין האותיות (לא מומלץ), השתמשו ב-basicText()‎ במקום ב-text()‎, וליצור ערך למאפיין fontStyle באמצעות fontStyle()‎.

צורה ושוליים

אפשר לשנות את רדיוס הפינות של כמעט כל רכיב באמצעות הנכסshape שלו. הערכים מגיעים מהמאפיין MaterialScope shapes:

textButton(
   height = expand(),
   width = expand(),
   shape = shapes.medium, // OR another value like shapes.full
   colors = filledVariantButtonColors(),
   labelContent = { text("Hello, World!".layoutString) },
)

אחרי שמשתנים את הצורה של רכיב, אם לדעתכם יש יותר מדי או מעט מדי מקום מסביב לקצה המסך, תוכלו לשנות את השוליים באמצעות הפרמטר margin של primaryLayout():

primaryLayout(
    mainSlot = {
        textButton(
            shape = shapes.small,
            /* ... */
        )
    },
    // margin constants defined in androidx.wear.protolayout.material3.PrimaryLayoutMargins
    margins = MAX_PRIMARY_LAYOUT_MARGIN,
)

קשתות

יש תמיכה בצאצאים הבאים של קונטיינר Arc:

• ArcLine: יוצר קו מעוקל סביב ה-Arc.
• ArcText: עיבוד טקסט מעוקל ב-Arc.
• ArcAdapter: המערכת תיצור עיבוד של אלמנט פריסה בסיסי בתוך קשת, שתוחם את הקשת.

מידע נוסף זמין במאמרי העזרה של כל אחד מסוגי הרכיבים.

גורמי שינוי

אפשר להחיל משתני אופן פעולה על כל אלמנט פריסה זמין. אפשר להשתמש במקשי השינוי האלה למטרות הבאות:

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

לדוגמה, אפשר להתאים אישית את המראה והמטא-נתונים שמוגדרים כברירת מחדל של Image, כפי שמתואר בקטע הקוד הבא:

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(Modifiers.Builder()
            .setBackground(Background.Builder().setColor(argb(0xFFFF0000)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

מודעות מתרחבות

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

קונטיינר Spannable מלא בצאצאים מסוג Span. אסור להשתמש בילדים אחרים או במופעי Spannable בתצוגת עץ.

יש שני סוגים של צאצאים של Span:

• SpanText: עיבוד טקסט בסגנון ספציפי.
• SpanImage: עיבוד תמונה בתוך שורת טקסט.

לדוגמה, אפשר להדגיש את המילה 'world' בכותרת 'Hello world' ולהוסיף תמונה בין המילים, כמו בקטע הקוד הבא:

private fun mySpannable(): LayoutElement =
    Spannable.Builder()
        .addSpan(SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(SpanText.Builder()
            .setText("world")
            .setFontStyle(FontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build()

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

עבודה עם משאבים

לכרטיסי המידע אין גישה למשאבים של האפליקציה. המשמעות היא שאי אפשר להעביר מזהה תמונה של Android לרכיב פריסה מסוג Image ולצפות שהוא יפתור את הבעיה. במקום זאת, צריך לשנות את השיטה onTileResourcesRequest() ולספק את המשאבים באופן ידני.

יש שתי דרכים לספק תמונות בתוך השיטה onTileResourcesRequest():

• מציינים משאב drawable באמצעות setAndroidResourceByResId().
• מספקים תמונה דינמית כ-ByteArray באמצעות setInlineResource().

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
Resources.Builder()
    .setVersion("1")
    .addIdToImageMapping("image_from_resource", ImageResource.Builder()
        .setAndroidResourceByResId(AndroidImageResourceByResId.Builder()
            .setResourceId(R.drawable.image_id)
            .build()
        ).build()
    )
    .addIdToImageMapping("image_inline", ImageResource.Builder()
        .setInlineResource(InlineImageResource.Builder()
            .setData(imageAsByteArray)
            .setWidthPx(48)
            .setHeightPx(48)
            .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
            .build()
        ).build()
    ).build()
)

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

רשימת משימות לתמונות של תצוגה מקדימה של משבצות

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

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

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