Kartları kullanmaya başlayın

Uygulamanızdan kart 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.6.2"

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

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

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

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

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

Kotlin

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

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

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

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

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

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

Temel kavramlar

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

  • Düzen şablonları: Ekrandaki 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 gruplandırılmış bu tür birkaç öğeyi temsil eder. Bunlar bir düzen şablonuna yerleştirilir.
  • Kaynaklar: ResourceBuilders.Resources nesneleri, bir düzeni oluşturmak için gereken Android kaynaklarının (resimler) anahtar/değer çiftlerinin eşlemesinden ve bir sürümden oluşur.
  • Zaman çizelgesi: TimelineBuilders.Timeline nesnesi, bir düzen nesnesinin bir veya daha fazla ö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 bir düzenin gösterilmesini durdurma).
  • Durum: İki bileşenin birbiriyle iletişim kurmasını sağlamak için kart ile uygulama arasında iletilen StateBuilders.State türünde bir veri yapısıdır. Örneğin, karttaki bir düğmeye dokunulursa durum, düğmenin kimliğini içerir. Veri türlerini bir harita kullanarak da değiştirebilirsiniz.
  • Tile: Zaman çizelgesi, kaynak sürüm kimliği, güncellik aralığı ve durum bilgisinden oluşan bir karo nesnesini temsil eden TileBuilders.Tile nesnesi.
  • Protolayout: Bu terim, kartlarla ilgili çeşitli 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.

Kutucuk oluşturma

Material3TileService kullan (önerilir)

Material 3 kutuları (androidx.wear.tiles:tiles:1.6.0 ve sonraki sürümler) oluştururken alt düzey TileService sınıfı yerine her zaman Material3TileService sınıfını genişletin. Material3TileService, kart geliştirmeyi basitleştiren, Kotlin öncelikli bir mimari sunar:

  • Yerleşik Kotlin eş yordamları: ListenableFuture kullanmak ve onTileRequest() işlevini geçersiz kılmak yerine tek bir askıya alma MaterialScope.tileResponse(requestParams: TileRequest): Tile işlevi uygulayın.
  • Önceden yapılandırılmış MaterialScope: tileResponse(), alıcısı olarak MaterialScope ile çalışır (allowDynamicTheme ve defaultColorScheme gibi oluşturucu parametreleri aracılığıyla yapılandırılır). Bu nedenle, düzeninizi gereksiz bir materialScope() çağrısına sarmalamanız gerekmez.
  • Tek çağrılı kaynak kaydı: Satır içi resim kaynaklarını otomatik olarak kaydetmek ve hem karo düzenini hem de kaynakları tek bir sistem bağlayıcı çağrısında döndürmek için ProtoLayoutScope içerir. Material3TileService, kaynakları otomatik olarak işlediğinden (final onTileResourcesRequest()) onTileResourcesRequest()'yi geçersiz kılmayın.
class MyTileService : Material3TileService() {

    override suspend fun MaterialScope.tileResponse(requestParams: TileRequest): Tile =
        tile(
            timeline =
            Timeline.fromLayoutElement(
                primaryLayout(
                    mainSlot = {
                        text("Hello, World!".layoutString, typography = BODY_LARGE)
                    }
                )
            )
        )
}

Temel TileService mimarisi

Material3TileService, temel TileService sınıfını temel alır. Bu kılavuzdaki diğer örneklerde, alt düzey kavramları göstermek için bu sınıf kullanılır.

Uygulamanızdan kart sağlamak için TileService türünde bir hizmet uygulayın ve bunu manifest dosyanıza kaydedin. Buna göre sistem, onTileRequest() çağrıları sırasında gerekli karoları ve onTileResourcesRequest() çağrıları sırasında gerekli 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> etiketinin içine 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 kartları yapılandırırken simge, etiket, açıklama ve önizleme kaynağı gösterilir. Önizleme kaynağı, Android'in tüm standart kaynak niteleyicilerini destekler. Bu nedenle, önizlemeyi ekran boyutu ve cihaz dili gibi faktörlere göre değiştirebilirsiniz. Diğer öneriler için önizleme yapılacaklar listesine bakın.

Uygulamanızı dağıtın ve kartı, kartlar rulosuna ekleyin (kartı önizlemenin geliştiriciler için daha kolay 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 kutusu.
Şekil 1. "Hello World" kutusu.

Eksiksiz bir örnek için GitHub'daki kod örneğine veya kod laboratuvarına bakın.

Kartlar için kullanıcı arayüzü oluşturma

Material 3 Expressive kullanıcı arayüzü öğeleri, Kotlin'in tip güvenli oluşturucu kalıbı tarafından desteklenen yapılandırılmış bir yaklaşım kullanılarak oluşturulur.

Düzen

Etkili ve duyarlı kart düzenleri oluşturmanın ardındaki 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 context ve deviceConfiguration değerlerini sağlayarak materialScope() işlevini çağırın. allowDynamicTheme ve defaultColorScheme gibi isteğe bağlı parametreler ekleyebilirsiniz. allowDynamicTheme varsayılan olarak true değerine sahiptir ve defaultColorScheme, dinamik renkler kullanılamadığında (ör. kullanıcı özelliği kapattığında) veya cihaz tarafından desteklenmediğinde ya da allowDynamicTheme, false olduğunda kullanılan ColorScheme değerini temsil eder. Özel bir TileService içinde backgroundImage() gibi ImageResource API'lerini kullanırken bunun yerine materialScopeWithResources() yöntemini çağırın.

  2. Kullanıcı arayüzünüzü kapsam içinde oluşturun: Belirli bir Kart düzeni için tüm kullanıcı arayüzü bileşenleri, tek bir üst düzey materialScope() çağrısının lambda'sı içinde 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ında ç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 kart düzeni, üç farklı yuvadan yararlanan, Compose'dan ilham alan bir yaklaşım kullanır. Yukarıdan aşağıya doğru bunlar şunlardır:

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

Her bir 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ılarda düzenlenmiş bileşenler. Bu bileşenler birbirinin içine de yerleştirilebilir. Örneğin, bir sütun satır içerebilir.
  • bottomSlot (isteğe bağlı): Genellikle kenara dayalı düğme veya metin etiketiyle doldurulur.

Karolar kaydırılamadığı için sayfalama, kaydırma veya uzun içerik listelerini işleme bileşenleri yoktur. Yazı tipi boyutu büyüdüğünde 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 eylem odaklıdır. Belirli eylemleri tetiklemek için kullanılırlar. Her bir 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(): Bir simgeyi temsil eden tek bir alan içeren düğme
  • avatarButton(): Dikey olarak yığılmış etiketi ve ikincil etiketi temsil eden içeriği ve yanındaki resmi (avatar) barındırmak için üç adede kadar alan sunan hap şeklindeki avatar düğmesi
  • imageButton(): Ek alan sunmayan, yalnızca resim içeren tıklanabilir resim düğmesi (ör. arka plan olarak backgroundImage)
  • compactButton(): Bir simgeyi ve yanındaki metni temsil eden, yatay olarak yığılmış içeriği barındırmak için iki adede kadar alan sunan kompakt düğme
  • button(): dikey olarak yığılmış etiketi ve ikincil etiketi temsil eden içeriği ve yanındaki simgeyi almak için üç adede kadar alan sunan hap şeklinde düğme

Kenar Düğmeleri

Kenar düğmesi, saatin yuvarlak ekranının alt kısmına sabitlenmiş özel, tam genişlikte bir düğmedir. Mevcut kart ekranında yapılacak en önemli işlemi temsil eder.

  • iconEdgeButton(): Simge veya benzer şekilde yuvarlak, küçük içerik barındırmak için tek bir yuva sunan kenar düğmesi
  • textEdgeButton(): Metin veya benzer uzunlukta ve genişlikte içerik barındırmak için tek bir alan sunan kenar düğmesi

Kartlar

Kartlar öncelikle bilgi odaklıdır. İlişkili, yapılandırılmış veri 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şlem yapmak için bu kartlara dokunabilir.

  • titleCard(): Genellikle metin tabanlı bir ila üç alan sunan başlık kartı
  • appCard(): Genellikle metin tabanlı, en fazla beş alan sunan uygulama kartı
  • textDataCard(): Genellikle metin veya sayı tabanlı, dikey olarak yığılmış üç adede kadar alan sunan bilgi kartı
  • iconDataCard(): Genellikle metin veya sayı tabanlı, simge içeren ve dikey olarak üst üste yerleştirilmiş üç adede kadar alan sunan veri kartı
  • graphicDataCard(): İlerleme göstergesi gibi grafik verileri için bir alan ve genellikle metin açıklamaları için dikey olarak yığılmış 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 bileşen düzeni
  • primaryLayout(): Önerilen duyarlı bir M3 düzen stilini temsil eden ve önerilen kenar boşlukları ve dolgularla birlikte öğelerin yerleşimini yöneten tam ekran düzeni

Tema uygulama

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

Material 3 Expressive Renk Sistemi; birincil, ikincil, üçüncül, hata, yüzey ve dış çizgi gibi gruplar halinde düzenlenmiş renk rollerini gösterir.
Şekil 3. Material 3 Expressive renk sistemi.

ColorScheme, bu 29 rolün her birini karşılık gelen bir renkle eşler. MaterialScope'nin bir parçası olduğu ve bileşenlerin içinde oluşturulması gerektiği için otomatik olarak şemadaki renkleri alır. Bu yaklaşım, tüm kullanıcı arayüzü öğelerinin otomatik olarak Materyal Tasarım standartlarına uymasını sağlar.

Kullanıcıların, tanımladığınız bir renk şeması (ör. marka renklerinizi yansıtan bir şema) ile sistem tarafından sağlanan bir şema (kullanıcının mevcut kadranından türetilen veya kullanıcı tarafından seçilen bir şema) arasında seçim yapmasına izin vermek için MaterialScope öğesini aşağıdaki gibi ilk kullanıma hazırlayı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 her temada en iyi görünürlük için doğru şekilde renklendirilebilecek tek renkli bir karo simgesi sağlayın.

Kartlarınızın, sağladığınız renk şemasında görünmesini zorunlu kılmak için allowDynamicTheme değerini false olarak ayarlayarak dinamik tema 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 hakkında ayrıntılı bilgi için renk tasarım kılavuzunu inceleyin.

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ı 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, MaterialScope içindeki etkin ColorScheme'ten uygun rollere dolgulu, tonlu veya ana hatlı gibi yaygın stilleri eşleyen önceden yapılandırılmış ButtonColors örnekleri oluşturur. 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
)

  2. Yedek renk rollerini açıkça belirtin. Kendi ButtonColors nesnenizi oluşturun ve 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 semantik rollerine göre (ör. colorScheme.primary) belirtmeniz önerilir ancak 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ılavuzuna bakın.

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

Metin stili oluşturmak için genellikle tipografik sabitlerle birlikte text() yöntemini kullanırsınız. Bu bileşen, Material 3 Expressive'deki önceden tanımlanmış tipografi rollerini kullanmanıza olanak tanır. Bu sayede, kartınız okunabilirlik ve hiyerarşi için belirlenmiş tipografik en iyi uygulamalara uyar. Kitaplıkta, BODY_MEDIUM gibi 18 semantik tipografi sabiti bulunur. 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, kalınlık, genişlik ve yuvarlaklık eksenleri boyunca değiştirebileceğiniz değişken bir yazı tipi kullanılabilir. 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() kullanın ve fontStyle() kullanarak fontStyle özelliği için bir değer oluşturun.

Şekil ve kenar boşlukları

shape özelliğini kullanarak neredeyse her bileşenin köşe yarıçapını 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: Yay etrafında eğri bir çizgi oluşturur.
  • ArcText: Yayda kavisli metin oluşturur.
  • ArcAdapter: Yayda, yaya teğet olarak çizilen temel bir düzen öğesi oluşturur.

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

Değiştiriciler

Mevcut 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 ekleyebilirsiniz.
  • Düzenle ilgili meta veriler ekleyin. Örneğin, ekran okuyucularla kullanmak için düzen öğenize bir semantik değiştirici ekleyin.
  • İşlev ekleyin. Örneğin, karonuzu etkileşimli hale getirmek için düzen öğenize tıklanabilir bir değiştirici ekleyin. Daha fazla bilgi için Kartlarla etkileşim kurma başlıklı makaleyi inceleyin.

Örneğin, aşağıdaki kod örneğinde gösterildiği gibi bir 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()

Spannable'lar

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 öğeyle doldurulur. Diğer alt öğelere veya iç içe yerleştirilmiş Spannable örneklerine izin verilmez.

İki tür Span alt öğesi vardır:

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

Örneğin, "Hello World" kutusundaki "dünya" 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

Kartların, uygulamanızın kaynaklarına erişimi yoktur. Yani, bir Android resim kimliğini Image düzen öğesine iletip çözümlenmesini bekleyemezsiniz. 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 resmi kontrol listesi

Sistem, yeni bir kutu eklemek için kutu bant düzenleyicide Android uygulama manifestinde referans verilen kutu önizleme resmini gösterir. Bu düzenleyici hem Wear OS cihazlarda hem de telefonlardaki kol saati tamamlayıcı uygulamasında görünür.

Kullanıcıların bu önizleme resminden en iyi şekilde yararlanabilmesi için kartınızla ilgili aşağıdaki ayrıntıları doğrulayın:

  • En yeni tasarımı yansıtır. Önizleme, kartınızın 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 sağlamak için önizleme resminin boyutları 400 piksele 400 piksel olmalıdır.
  • Statik bir renk teması kullanır. Dinamik bir renk teması yerine kartın 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/giriş yapılan durumu gösterir. Önizleme, tamamen işlevsel bir "yüklendi" veya "giriş yapıldı" durumunu göstermeli, boş veya yer tutucu içeriklerden kaçınmalıdır.
  • Özelleştirme için kaynak çözümleme kurallarından yararlanın (isteğe bağlı). Cihazın ekran boyutu, dil veya yerel ayarlarıyla eşleşen önizlemeler sağlamak için Android'in kaynak çözümleme kurallarını kullanabilirsiniz. Bu, özellikle kartınızın görünümü cihazlar arasında farklılık gösteriyorsa kullanışlıdır.