דף זה תורגם על ידי Cloud Translation API.

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

גרסה של Tiles for Wear OS

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

Groovy

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

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

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

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

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

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

Kotlin

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

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

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

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

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

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

קונספטים מרכזיים

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

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

משאבים: אובייקטים של ResourceBuilders.Resources מורכבים ממיפוי של זוגות של מפתח/ערך של משאבי Android (תמונות) שנדרשים לעיבוד פריסה, ומגרסה.
ציר זמן: אובייקט TimelineBuilders.Timeline הוא רשימה של מופע אחד או יותר של אובייקט פריסה. אתם יכולים לספק מנגנונים שונים וביטויים כדי לציין מתי מעבד התצוגה צריך לעבור מאובייקט פריסה אחד לאחר, למשל כדי להפסיק להציג פריסה בזמן מסוים.
מצב: מבנה נתונים מסוג StateBuilders.State שמועבר בין הרכיב לבין האפליקציה, כדי לאפשר לשני הרכיבים לתקשר ביניהם. לדוגמה, אם משתמש מקיש על לחצן בפריט, המזהה של הלחצן יופיע במצב. אפשר גם להמיר סוגי נתונים באמצעות מיפוי.
Tile: אובייקט TileBuilders.Tile שמייצג משבצת, שמורכב מציר זמן, מזהה גרסת משאבים, מרווח עדכניות ומצב.
‫Protolayout: המונח הזה מופיע בשם של מחלקות שונות שקשורות לרכיבי Tile, והוא מתייחס לספריית 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, כך שאפשר לשנות את התצוגה המקדימה בהתאם לגורמים כמו גודל המסך ושפת המכשיר. המלצות נוספות מופיעות ברשימת המשימות המקדימה.

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

המשבצת 'Hello World'. — **איור 1.** "Hello World" Tile.

דוגמה מלאה אפשר לראות בדוגמת הקוד ב-GitHub או בסדנת הקוד.

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

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

פריסה

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

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

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

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

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

פריסת אריחים שמוצגים בהם titleSlot, ‏ mainSlot ו-bottomSlot — **איור 2.** titleSlot,‏ mainSlot ו-bottomSlot.

התוכן של כל משבצת הוא כדלקמן:

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

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

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

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

לחצנים

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

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

לחצני קצה

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

‫iconEdgeButton(): כפתור קצה שמציע משבצת אחת להצגת סמל או תוכן קטן ועגול דומה
‫textEdgeButton(): לחצן קצה שמציע משבצת אחת להצגת טקסט או תוכן דומה באורך וברוחב

כרטיסים

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

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

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

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

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

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

קביעת עיצוב

ב-Material 3 Expressive, מערכת הצבעים מוגדרת על ידי 29 תפקידי צבע סטנדרטיים, שמסודרים ב-6 קבוצות: primary,‏ secondary,‏ tertiary,‏ error,‏ surface ו-outline.

**איור 3.** מערכת הצבעים Material 3 Expressive.

ב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 הפעיל:

טוקן רכיב `ButtonColors`	תפקיד `ColorScheme`
containerColor	ראשית
iconColor	onPrimary
labelColor	onPrimary
secondaryLabelColor	onPrimary (opacity 0.8)

הנחיות מפורטות לגבי שימוש בצבעים בעיצובים ל-Wear OS זמינות במדריך לעיצוב צבעים.

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

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

שימוש בפונקציית עזר לצבעים מוגדרים מראש. אפשר להשתמש בפונקציות עזר כמו 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
)
```

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

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

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

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

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

כדי לקבל שליטה רבה יותר, אפשר לספק הגדרות נוספות. ב-Wear OS 6 ובגרסאות מתקדמות יותר, סביר להניח שנעשה שימוש בגופן משתנה, שאפשר לשנות אותו לאורך הצירים italic,‏ weight,‏ width ו-roundness. אפשר לשלוט בצירים האלה באמצעות הפרמטר 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, כמו בדוגמת הקוד הבאה:

Kotlin

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()

Java

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();
}

Spannables

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

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

יש שני סוגים של Spanילדים:

‫SpanText: הצגת טקסט בסגנון מסוים.
‫SpanImage: הצגת תמונה בשורה עם טקסט.

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

Kotlin

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()

Java

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().

Kotlin

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()
)

Java

@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 ובאפליקציה הנלווית לשעון בטלפונים.

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

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