Kartları kullanmaya başlayın

Uygulamanızdan kutucuk sağlamaya başlamak için aşağıdaki bağımlılıkları uygulamanızın build.gradle dosyasına ekleyin.

Groovy

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"
}

Kotlin

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")
}

Temel kavramlar

Döşemeler, Android uygulamalarıyla aynı şekilde oluşturulmaz ve farklı kavramlardan yararlanır:

  • Düzen şablonları: Ekranda görsel öğelerin genel düzenini tanımlar. Bu işlem, primaryLayout() işleviyle gerçekleştirilir.
  • Düzen öğeleri: Düğme veya kart gibi tek bir grafik öğeyi ya da sütun, buttonGroup veya benzeri bir öğe kullanılarak birlikte gruplandırılmış birkaç öğeyi temsil eder. Bunlar düzen şablonuna yerleştirilir.
  • Kaynaklar: ResourceBuilders.Resources nesneleri, bir düzenin oluşturulması için gereken Android kaynaklarının (resimler) anahtar/değer çiftlerinin haritası ve bir sürümden oluşur.
  • Zaman Çizelgesi: TimelineBuilders.Timeline nesnesi, bir veya daha fazla düzen nesnesi örneğinin listesidir. Oluşturucunun bir düzen nesnesinden diğerine ne zaman geçmesi gerektiğini belirtmek için çeşitli mekanizmalar ve ifadeler sağlayabilirsiniz. Örneğin, belirli bir zamanda düzenin gösterilmesini durdurabilirsiniz.
  • Durum: İki bileşenin birbirleriyle iletişim kurmasını sağlamak için döşeme ile uygulama arasında iletilen StateBuilders.State türünde bir veri yapısıdır. Örneğin, kutucukta bir düğmeye dokunulursa durum, düğmenin kimliğini tutar. Ayrıca, harita kullanarak veri türlerini değiştirebilirsiniz.
  • Döşeme: Döşemeyi temsil eden bir TileBuilders.Tile nesnesi. Zaman çizelgesi, kaynak sürümü kimliği, güncellik aralığı ve durumdan oluşur.
  • Protolayout: Bu terim, çeşitli karo ile ilgili sınıfların adında görünür ve çeşitli Wear OS yüzeylerinde kullanılan bir grafik kitaplığı olan Wear OS Protolayout kitaplığını ifade eder.

Kutu oluşturma

Uygulamanızdan bir kutucuk sağlamak için TileService türünde bir hizmet uygulayın ve bunu manifest dosyanıza kaydedin. Buna göre sistem, onTileRequest() ile yapılan görüşmelerde gerekli döşemeleri, onTileResourcesRequest() ile yapılan görüşmelerde ise kaynakları ister.

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

Ardından, AndroidManifest.xml dosyanızın <application> etiketine bir hizmet ekleyin.

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

İzin ve intent filtresi, bu hizmeti karo sağlayıcı olarak kaydeder.

Kullanıcı, telefonunda veya kol saatinde kutucukları yapılandırırken simge, etiket, açıklama ve önizleme kaynağını görür. Önizleme kaynağının, Android'in tüm standart kaynak niteleyicilerini desteklediğini unutmayın. Bu nedenle, ekran boyutu ve cihaz dili gibi faktörlere göre önizlemeyi değiştirebilirsiniz. Ek öneriler için önizleme kontrol listesine bakın.

Uygulamanızı dağıtın ve Tile'ı Tiles Carousel'e ekleyin (Tile'ı önizlemenin daha geliştirici dostu bir yolu da vardır ancak şimdilik bunu manuel olarak yapın).

Materyal 3 ile oluşturulmuş, &quot;Hello World&quot; metnini gösteren bir Wear OS kutucuğu.
Şekil 1. "Hello World" kutusu.

Tam bir örnek için GitHub'daki kod örneğine veya codelab'e bakın.

Döşemeler için kullanıcı arayüzü oluşturma

Material 3 Expressive UI öğeleri, Kotlin'in tür güvenli oluşturucu deseni ile desteklenen yapılandırılmış bir yaklaşımla oluşturulur.

Düzen

Etkili ve duyarlı kart düzenleri oluşturmanın temelinde yatan tasarım ilkeleriyle ilgili rehberlik için Kartlar için yaygın düzenler başlıklı makaleyi inceleyin.

Düzeninizi oluşturmak için aşağıdakileri yapın:

  1. Materyal Tasarım kapsamı başlatma: Gerekli materialScope() işlevini çağırın, context ve deviceConfiguration değerlerini sağlayın. allowDynamicTheme ve defaultColorScheme gibi isteğe bağlı parametreleri ekleyebilirsiniz. allowDynamicTheme, varsayılan olarak true'dır ve defaultColorScheme, dinamik renkler kullanılamadığında (ör. kullanıcı özelliği devre dışı bıraktığında veya cihaz tarafından desteklenmediğinde ya da allowDynamicTheme false olduğunda) kullanılan ColorScheme'ı temsil eder.

  2. Kapsam içinde kullanıcı arayüzünüzü oluşturun: Belirli bir döşeme düzenine ait tüm kullanıcı arayüzü bileşenleri, tek bir üst düzey materialScope() çağrısının lambda'sında tanımlanmalıdır. primaryLayout() ve textEdgeButton() gibi bu bileşen işlevleri, MaterialScope üzerinde uzantı işlevleridir ve yalnızca bu alıcı kapsamı üzerinde çağrıldığında kullanılabilir.

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

Slot

M3'te, kutu düzeninde üç farklı yuva kullanan, Compose'dan ilham alınmış bir yaklaşım kullanılır. Yukarıdan aşağıya doğru şunlar bulunur:

  1. titleSlot, genellikle birincil başlık veya üstbilgi için kullanılır.
  2. Temel içerik için mainSlot.
  3. bottomSlot: Genellikle işlemler veya ek bilgiler için kullanılır. Kenar düğmesi de burada görünür.
titleSlot, mainSlot ve bottomSlot&#39;u gösteren kutucuk düzeni
Şekil 2. titleSlot, mainSlot ve bottomSlot.

Her alanın içeriği aşağıdaki gibidir:

  • titleSlot (isteğe bağlı): Genellikle text() tarafından oluşturulan birkaç kelime.
  • mainSlot (zorunlu): Satırlar, sütunlar ve düğme grupları gibi yapılar halinde düzenlenmiş bileşenler. Bu bileşenler birbirlerinin içine de yerleştirilebilir. Örneğin, bir sütun satırlar içerebilir.
  • bottomSlot (isteğe bağlı): Genellikle kenara yakın bir düğme veya metin etiketiyle doldurulur.

Karolarda kaydırma yapılamadığından sayfalama, kaydırma veya uzun içerik listelerini işleme için bileşenler yoktur. Yazı tipi boyutu arttığında veya çeviri nedeniyle metin uzadığında içeriğin görünür kalmasını sağlayın.

Kullanıcı arayüzü bileşenleri

protolayout-material3 kitaplığı, Materyal 3 Expressive spesifikasyonlarına ve kullanıcı arayüzü önerilerine göre tasarlanmış çok sayıda bileşen sunar.

Düğmeler

Düğmeler öncelikle işlem odaklıdır. Belirli işlemleri tetiklemek için kullanılır. Her düğmenin içeriği (ör. simge veya kısa metin) işlemi tanımlar.

  • textButton(): (kısa) metin içeriği için tek bir yuvası olan düğme
  • iconButton(): Simgeyi temsil etmek için tek bir yuvaya sahip düğme
  • avatarButton(): Dikey olarak yerleştirilmiş etiketi ve ikincil etiketi temsil eden içeriği, yanındaki resimle (avatar) birlikte göstermek için üç yuva sunan, hap şeklinde avatar düğmesi
  • imageButton(): Ek yuva sunmayan, yalnızca resim içeren tıklanabilir resim düğmesi (örneğin, arka plan olarak backgroundImage)
  • compactButton(): Bir simgeyi ve yanındaki metni temsil eden, yatay olarak yerleştirilmiş içeriği almak için iki yuva sunan kompakt düğme
  • button(): Dikey olarak yerleştirilmiş etiketi ve ikincil etiketi temsil eden içeriği almak için üç yuva sunan ve yanında simge bulunan hap şekilli düğme

Kenar Düğmeleri

Kenar düğmesi, saatin yuvarlak ekranının alt kısmına sabitlenmiş, tam genişlikte özel bir düğmedir. Bu düğme, mevcut karo ekranında gerçekleştirilecek en önemli işlemi temsil eder.

  • iconEdgeButton(): Simge veya benzer şekilde yuvarlak, küçük içerik almak için tek bir yuva sunan kenar düğmesi
  • textEdgeButton(): Metin veya benzer şekilde uzun ve geniş içeriklerin yerleştirilebileceği tek bir alan sunan kenar düğmesi

Kartlar

Kartlar öncelikle bilgi odaklıdır. İlgili yapılandırılmış verilerin koleksiyonlarını gösterirler. Etkileşimli kartlar oluşturabilirsiniz ancak bu kartlar genellikle bilgilerin özetini gösterir. Kullanıcılar daha fazla ayrıntı görmek veya ilgili bir işlemi gerçekleştirmek için bu özetlere dokunabilir.

  • titleCard(): Genellikle metin tabanlı olan bir ila üç yuva sunan başlık kartı
  • appCard(): Genellikle metin tabanlı olan ve en fazla beş yer sunan uygulama kartı
  • textDataCard(): Genellikle metin veya rakam tabanlı olmak üzere dikey olarak yerleştirilmiş en fazla üç yuva sunan veri kartı
  • iconDataCard(): Genellikle metin veya sayı tabanlı, simge içeren ve dikey olarak yığılmış en fazla üç yuva sunan veri kartı
  • graphicDataCard(): Grafik verileri için bir alan (ör. ilerleme göstergesi) ve genellikle metin açıklamaları için kullanılan, dikey olarak yerleştirilmiş en fazla iki alan sunan grafik veri kartı

İlerleme Durumu Göstergeleri

Grup düzeni öğeleri

  • buttonGroup(): Alt öğelerini yatay bir sıraya yerleştiren component-layout
  • primaryLayout(): Önerilen M3 düzen stilini temsil eden, duyarlı ve öğelerin yerleşimini sağlayan, önerilen kenar boşlukları ve dolguyla birlikte kullanılan tam ekran düzeni

Tema uygulama

Material 3 Expressive'de renk sistemi, altı grupta (birincil, ikincil, üçüncül, hata, yüzey ve ana hat) düzenlenen 29 standart renk rolüyle tanımlanır.

Birincil, ikincil, üçüncül, hata, yüzey ve ana hat gibi gruplar halinde düzenlenmiş renk rollerini gösteren Material 3 Expressive Color System.
Şekil 3. Material 3 Expressive Renk Sistemi.

ColorScheme, bu 29 rolün her birini ilgili renkle eşler ve MaterialScope'ın bir parçası olduğundan bileşenler bu şema içinde oluşturulmalıdır. Bu nedenle, bileşenler otomatik olarak şemadaki renkleri alır. Bu yaklaşım, tüm kullanıcı arayüzü öğelerinin Materyal Tasarım standartlarına otomatik olarak uymasını sağlar.

Kullanıcıların, tanımladığınız bir renk düzeni (ör. marka renklerinizi yansıtan bir düzen) ile sistem tarafından sağlanan bir düzen (kullanıcının mevcut kadranından türetilen veya kullanıcı tarafından seçilen bir düzen) arasında seçim yapmasına izin vermek için MaterialScope öğesini aşağıdaki gibi başlatın:

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.
}

Bu seçeneği tercih ederseniz herhangi bir temaya karşı optimum görünürlük için doğru şekilde renklendirilebilmesi amacıyla tek renkli bir kutu simgesi sağlayın.

Kutularınızın sağladığınız renk şemasında görünmesini zorlamak için allowDynamicTheme değerini false olarak ayarlayarak dinamik temalandırma desteğini devre dışı bırakın:

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

Renk

Her bir bileşen, ColorScheme tarafından tanımlanan 29 renk rolünün bir alt kümesini kullanır. Örneğin, düğmelerde en fazla dört renk kullanılır. Bu renkler varsayılan olarak etkin ColorScheme öğesinin "birincil" grubundan alınır:

ButtonColors bileşen jetonu ColorScheme rolü
containerColor birincil
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (opaklık 0,8)

Wear OS tasarımlarınıza renk uygulama konusunda ayrıntılı bilgi için renk tasarım kılavuzuna bakın.

Belirli kullanıcı arayüzü öğeleri için varsayılan renk jetonlarından sapmanız gerekebilir. Örneğin, bir textEdgeButton öğesinin, öne çıkması ve daha iyi kontrast sağlaması için "birincil" yerine "ikincil" veya "üçüncül" gruptaki renkleri kullanmasını isteyebilirsiniz.

Bileşen renklerini çeşitli şekillerde özelleştirebilirsiniz:

  1. Önceden tanımlanmış renkler için yardımcı bir işlev kullanın. Material 3 Expressive için standart düğme stillerini uygulamak üzere filledTonalButtonColors() gibi yardımcı işlevleri kullanın. Bu işlevler, dolu, tonlu veya ana hatlı gibi yaygın stilleri MaterialScope içindeki etkin ColorScheme'den uygun rollere eşleyen önceden yapılandırılmış ButtonColors örnekleri oluşturur. Bu özellik, yaygın düğme türleri için her rengi manuel olarak tanımlamadan tutarlı stiller uygulamanıza olanak tanır.

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

    Kartlar için eşdeğer filledCardColors() işlev ailesini kullanın.

    Yalnızca bir veya iki jetonu değiştirmeniz gerekiyorsa yardımcı işlevler tarafından döndürülen ButtonColors nesnesini copy() yöntemini kullanarak da değiştirebilirsiniz:

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

  2. Değiştirme renk rollerini açıkça belirtin. Kendi ButtonColors nesnenizi oluşturup bileşene iletin. Kartlar için eşdeğer CardColors nesnesini kullanın.

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

  3. Sabit renkler belirtin (dikkatli kullanın). Renkleri genellikle anlamsal rollerine göre (ör. colorScheme.primary) belirtmeniz önerilse de doğrudan renk değerleri de sağlayabilirsiniz. Bu yaklaşım, özellikle tema dinamik olarak değişiyorsa genel temayla tutarsızlıklara yol açabileceğinden dikkatli kullanılmalıdır.

    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
)

Yazı biçimi

Tasarımlarınızda tipografiyi etkili bir şekilde kullanma hakkında daha fazla bilgi için tipografi tasarım kılavuzu bölümüne bakın.

Wear OS platformunda görsel tutarlılık sağlamak ve performansı optimize etmek için kartlardaki tüm metinler sistem tarafından sağlanan bir yazı tipi kullanılarak oluşturulur. Yani kutular, özel yazı tiplerini desteklemez. Wear OS 6 ve sonraki sürümlerde bu, OEM'e özgü bir yazı tipidir. Çoğu durumda, daha etkileyici bir deneyim ve daha ayrıntılı kontrol sunan bir değişken yazı tipi olur.

Metin stili oluşturmak için genellikle tipografik sabitlerle birlikte text() yöntemi kullanılır. Bu bileşen, Material 3 Expressive'de önceden tanımlanmış tipografi rollerinden yararlanmanıza olanak tanır. Bu sayede, okunabilirlik ve hiyerarşi için yerleşik tipografik en iyi uygulamalara uyabilirsiniz. Kitaplık, BODY_MEDIUM gibi 18 anlamsal tipografi sabiti sunar. BODY_MEDIUM Bu sabitler, boyut dışındaki yazı tipi eksenlerini de etkiler.

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

Daha fazla kontrol için ek ayarlar sağlayabilirsiniz. Wear OS 6 ve sonraki sürümlerde, italik, ağırlık, genişlik ve yuvarlaklık eksenleri boyunca değiştirebileceğiniz bir değişken yazı tipi kullanılır. Bu eksenleri settings parametresini kullanarak kontrol edebilirsiniz:

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

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

Son olarak, boyutu veya harf aralığını kontrol etmeniz gerekiyorsa (önerilmez) text() yerine basicText() işlevini kullanın ve fontStyle özelliği için fontStyle() işlevini kullanarak bir değer oluşturun.

Şekil ve kenar boşlukları

Neredeyse her bileşenin köşe yarıçapını shape özelliğiyle değiştirebilirsiniz. Değerler MaterialScope özelliğinden shapes alınır:

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

Bir bileşenin şeklini değiştirdikten sonra, ekranın kenarında çok fazla veya çok az boşluk kaldığını düşünüyorsanız primaryLayout() öğesinin margin parametresini kullanarak kenar boşluklarını ayarlayın:

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

Yaylar

Aşağıdaki Arc kapsayıcı alt öğeleri desteklenir:

  • ArcLine: Arc'ın etrafında kavisli bir çizgi oluşturur.
  • ArcText: Arc'ta kavisli metin oluşturur.
  • ArcAdapter: Yayda temel bir düzen öğesi oluşturur. Bu öğe, yaya teğet olacak şekilde çizilir.

Daha fazla bilgi için her bir öğe türünün referans belgelerine bakın.

Değiştiriciler

Kullanılabilir her düzen öğesine isteğe bağlı olarak değiştiriciler uygulanabilir. Bu değiştiricileri aşağıdaki amaçlarla kullanın:

  • Düzenin görsel görünümünü değiştirme Örneğin, düzen öğenize arka plan, kenarlık veya dolgu ekleyin.
  • Düzen hakkında meta veri ekleyin. Örneğin, ekran okuyucularla kullanılmak üzere düzen öğenize bir semantik değiştirici ekleyin.
  • İşlev ekleyin. Örneğin, döşemenizi etkileşimli hale getirmek için düzen öğenize tıklanabilir bir değiştirici ekleyin. Daha fazla bilgi için Döşemelerle etkileşim kurma başlıklı makaleyi inceleyin.

Örneğin, aşağıdaki kod örneğinde gösterildiği gibi Image öğesinin varsayılan görünümünü ve meta verilerini özelleştirebiliriz:

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

Spannables

Spannable, öğeleri metne benzer şekilde düzenleyen özel bir kapsayıcı türüdür. Bu, daha büyük bir metin bloğundaki yalnızca bir alt dizeye farklı bir stil uygulamak istediğinizde kullanışlıdır. Bu, Text öğesiyle mümkün değildir.

Spannable kapsayıcısı Span alt öğeleriyle doldurulur. Diğer alt öğelere veya iç içe yerleştirilmiş Spannable örneklerine izin verilmez.

İki tür Span çocuk vardır:

  • SpanText: Metni belirli bir stille oluşturur.
  • SpanImage: Metinle birlikte satır içi bir resim oluşturur.

Örneğin, "Hello world" kutusunda "world" kelimesini italik yapabilir ve aşağıdaki kod örneğinde gösterildiği gibi kelimelerin arasına bir resim ekleyebilirsiniz:

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

Kaynaklarla çalışma

Döşemeler, uygulamanızın kaynaklarına erişemez. Bu, bir Android resim kimliğini Image düzen öğesine iletip çözümlenmesini bekleyemeyeceğiniz anlamına gelir. Bunun yerine, onTileResourcesRequest() yöntemini geçersiz kılın ve kaynakları manuel olarak sağlayın.

onTileResourcesRequest() yönteminde resim sağlamanın iki yolu vardır:

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

Kart önizleme görüntüsü kontrol listesi

Sistem, yeni bir kutu eklemek için kutu bandı düzenleyicisinde Android uygulaması manifest dosyasında referans verilen kutu önizleme resmini gösterir. Bu düzenleyici hem Wear OS cihazlarda hem de telefonlardaki saat tamamlayıcı uygulamasında görünür.

Kullanıcıların bu önizleme resminden en iyi şekilde yararlanmasına yardımcı olmak için kutucuğunuzla ilgili aşağıdaki ayrıntıları doğrulayın:

  • En son tasarımı yansıtır. Önizleme, kutucuğunuzun en güncel tasarımını doğru şekilde yansıtmalıdır.
  • Önerilen boyutları kullanır. Mümkün olan en iyi görüntüleme kalitesini ve iyi bir kullanıcı deneyimi sağlamak için önizleme resminin boyutları 400 x 400 piksel olmalıdır.
  • Statik bir renk teması kullanıyorsa. Dinamik renk teması yerine kutucuğun statik renk temasını kullanın.
  • Uygulama simgesi içerir. Uygulamanızın simgesinin önizleme resminin üst kısmında göründüğünü onaylayın.
  • Yüklenen/oturum açılan durumu gösterir. Önizlemede, boş veya yer tutucu içeriklerden kaçınılarak tamamen işlevsel bir "yüklendi" veya "oturum açıldı" durumu gösterilmelidir.
  • Özelleştirme için kaynak çözümleme kurallarından yararlanın (isteğe bağlı). Cihazın görüntü boyutu, dili veya yerel ayarlarıyla eşleşen önizlemeler sağlamak için Android'in kaynak çözünürlüğü kurallarını kullanabilirsiniz. Bu özellik, özellikle kutucuğunuzun görünümü cihazlar arasında farklılık gösteriyorsa yararlıdır.