Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kartları kullanmaya başlayın

Wear OS sürümü için kutucuklar

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

Eski

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

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 öğesini ya da sütun, buttonGroup veya benzeri bir öğe kullanılarak birlikte gruplandırılmış birkaç öğeyi temsil eder. Bunlar bir 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 (ör. belirli bir zamanda düzenin gösterilmesini durdurmak gibi).
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: TileBuilders.Tile nesnesi. Zaman çizelgesi, kaynak sürümü kimliği, güncellik aralığı ve durum içerir.
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 kutucukları, 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()
        )
}Tile.kt

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>AndroidManifest.xml

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

Kullanıcı, telefonunda veya kol saatinde kartları 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 kutuyu kutu karuselininize ekleyin (Kutuları önizlemenin geliştiriciler için daha kolay bir yolu da var ancak şimdilik bunu manuel olarak yapmanız gerekiyor).

"Hello World" (Merhaba Dünya) kutusu. — **1. Şekil.** "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 kalıbı tarafından 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:

Materyal Tasarım kapsamı başlatın: Gerekli materialScope() işlevini çağırarak context ve deviceConfiguration değerlerini sağlayın. allowDynamicTheme ve defaultColorScheme gibi isteğe bağlı parametreleri ekleyebilirsiniz. allowDynamicTheme, varsayılan olarak true'dir 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.

Kapsam içinde kullanıcı arayüzünüzü oluşturun: Belirli bir Tile 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(text = "Action".layoutString) }
    )
}

Slot

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

titleSlot, genellikle birincil başlık veya başlık için kullanılır.
Temel içerik için mainSlot.
Genellikle işlemler veya ek bilgiler için kullanılan bottomSlot. Kenar düğmesi de burada görünür.

titleSlot, mainSlot ve bottomSlot öğelerini 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 yaslanan 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ına dikkat edin.

Kullanıcı arayüzü bileşenleri

protolayout-material3 kitaplığı, Material 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 yuvası olan düğme
avatarButton(): Dikey olarak yerleştirilmiş etiketi ve ikincil etiketi temsil eden içeriği ve yanındaki resmi (avatar) almak için üç yuvaya kadar sunan, hap şeklinde avatar düğmesi
imageButton(): Ek yuva sunmayan, yalnızca resim içeren (ör. arka plan olarak backgroundImage) tıklanabilir resim düğmesi
compactButton(): Bir simgeyi ve yanındaki metni temsil eden, yatay olarak yerleştirilmiş içerik almak için en fazla iki yuva sunan kompakt düğme
button(): Dikey olarak yerleştirilmiş etiketi ve ikincil etiketi temsil eden içeriği almak için üç yuvaya kadar sunan ve yanında bir simge bulunan hap şeklindeki 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çerik almak için tek bir alan sunan kenar düğmesi

Kartlar

Kartlar öncelikle bilgi odaklıdır. İlgili ve 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 sonra bu özete dokunarak daha fazla ayrıntı görebilir veya ilgili bir işlemi gerçekleştirebilir.

titleCard(): Genellikle metin tabanlı bir ila üç yuva sunan başlık kartı
appCard(): Genellikle metin tabanlı olan ve en fazla beş yuva 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ı, dikey olarak yığılmış üç yuvaya kadar sunan ve simge içeren veri kartı
graphicDataCard(): Grafik verileri için yuva (ör. ilerleme göstergesi) ve dikey olarak yığılmış en fazla iki yuva (genellikle metin açıklamaları için) sunan grafik veri kartı

İlerleme durumu göstergeleri

circularProgressIndicator(): Radyal bir öğe kullanarak bir hedefe yönelik ilerlemeyi gösterir.
segmentedCircularProgressIndicator(): Farklı aşamalara sahip radyal bir öğe kullanarak hedefe doğru ilerlemeyi gösterir.

Düzen Öğelerini Gruplandırma

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 oluşturma

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.

**3.şekil** 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, renkler otomatik olarak şemadan alınır. Bu yaklaşım, tüm kullanıcı arayüzü öğelerinin otomatik olarak Material Design standartlarına 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 = ...
        onPrimary = ...
        // 27 more
    )

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

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(
  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 "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:

Önceden tanımlanmış renkler için yardımcı 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, önceden yapılandırılmış ButtonColors örnekleri oluşturur. Bu örnekler, dolu, tonlu veya ana hatlı gibi yaygın stilleri MaterialScope içindeki etkin ColorScheme'den uygun rollere eşler. Bu sayede, yaygın düğme türleri için her rengi manuel olarak tanımlamadan tutarlı stiller uygulayabilirsiniz.
```
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
)
```

Değiştirme renk rollerini açıkça belirtin. Kendi ButtonColors nesnenizi oluşturun ve bunu 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
)

Sabit renkler belirtin (dikkatli kullanın). Renkleri genellikle anlamsal rollerine göre (ör. colorScheme.primary) 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 bir şekilde kullanılmalıdır.
```
textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.argb // Using a hex code for yellow
    )
    // ... other parameters
)
```

Yazı biçimi

Tasarımlarınızda yazı biçimini etkili bir şekilde kullanma hakkında daha fazla bilgi için yazı biçimi 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 kutucuklardaki 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 kullanılır.

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ış yazı tipi rollerini kullanmanıza olanak tanır. Bu sayede, okunabilirlik ve hiyerarşi için yerleşik tipografik en iyi uygulamalara uymanıza yardımcı olur. Kitaplık, 18 anlamsal tipografi sabiti sunar. Örneğin, 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ği shapes'den 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:

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, öğ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: Resmi metinle birlikte satır içinde 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:

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

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:

setAndroidResourceByResId() kullanarak çizilebilir bir kaynak sağlayın.
setInlineResource() kullanarak ByteArray olarak dinamik bir resim sağlayın.

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

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

Sistem, yeni bir kutucuk eklemek için kutucuk karusel düzenleyicisinde Android uygulaması manifest dosyasında referans verilen kutucuk ö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, kutunuzun 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ü kalitesini ve iyi bir kullanıcı deneyimi sunmak için önizleme resminin boyutları 400 x 400 piksel olmalıdır.
Statik bir renk teması kullanır. 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 ekran 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.

Kartları kullanmaya başlayın Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Eski

Kotlin

Temel kavramlar

Kutu oluşturma

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

Düzen

Slot

Kullanıcı arayüzü bileşenleri

Düğmeler

Kenar Düğmeleri

Kartlar

İlerleme durumu göstergeleri

Düzen Öğelerini Gruplandırma

Tema oluşturma

Renk

Yazı biçimi

Şekil ve kenar boşlukları

Yaylar

Değiştiriciler

Kotlin

Java

Spannables

Kotlin

Java

Kaynaklarla çalışma

Kotlin

Java

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

Kartları kullanmaya başlayın