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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

פריסה

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

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

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

2. בניית ממשק המשתמש בהיקף: כל רכיבי ממשק המשתמש של פריסת 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(
                   labelContent = { text("Action".layoutString) },
                   onClick = clickable()
               )
           }
       )
   }
   GetStarted.kt

מכונות מזל

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

1. ‫titleSlot, בדרך כלל לכותרת ראשית או לכותרת.
2. ‫mainSlot, לתוכן הליבה.
3. הלחצן 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.

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

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

val myColorScheme =
    ColorScheme(
        primary = Color.rgb(0, 0, 255).argb, // Blue
        onPrimary = Color.rgb(255, 255, 255).argb, // White
        // 27 more
    )

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

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

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

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    allowDynamicTheme = false,
    defaultColorScheme = myColorScheme
) {
    // myColorScheme is *always* used.
}
GetStarted.kt

צבע

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

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

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

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

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

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

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

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

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

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
   )
   GetStarted.kt

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

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

טיפוגרפיה

מידע נוסף על שימוש יעיל בטיפוגרפיה בעיצובים זמין במדריך לעיצוב טיפוגרפי.

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

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

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

כדי לקבל שליטה רבה יותר, אפשר לספק הגדרות נוספות. ב-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)
    ),
)
GetStarted.kt

לבסוף, אם אתם צריכים לשלוט בגודל או בריווח בין האותיות (לא מומלץ), משתמשים ב-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) },
)
GetStarted.kt

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

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

קשתות

יש תמיכה ברכיבי הצאצא הבאים של הקונטיינר 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.toInt())).build())
                .setPadding(ModifiersBuilders.Padding.Builder().setStart(dp(12f)).build())
                .setSemantics(Semantics.Builder().setContentDescription("Image description").build())
                .build()
        )
        .build()
Tile.kt

Spannables

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

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

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

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

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

private fun mySpannable(): LayoutElement =
    LayoutElementBuilders.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()
Tile.kt

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

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

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

• מספקים פריט גרפי שניתן להזזה באמצעות setAndroidResourceByResId().
• מספקים תמונה דינמית כ-ByteArray באמצעות setInlineResource().

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

רשימת משימות לתצוגה מקדימה של תמונת כרטיס מידע

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

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

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