Berinteraksi dengan kartu

Anda dapat meningkatkan kualitas pengalaman kartu lebih lanjut dengan menjadikannya interaktif. Dengan menambahkan pengubah Clickable ke elemen tata letak dalam kartu, Anda dapat bereaksi terhadap pengguna yang mengetuk elemen tata letak tersebut.

Halaman ini mencantumkan beberapa tindakan umum yang dilakukan pengguna dalam kartu interaktif, beserta panduan cara menerapkan perilaku ini di kartu aplikasi Anda.

Memuat tata letak kartu baru

Gunakan LoadAction untuk memuat ulang tata letak kartu saat pengguna mengetuk elemen interaktif.

Dalam cuplikan kode berikut, ID yang dapat diklik dan ditetapkan di setId() akan diteruskan bersama ke panggilan onTileRequest(), sehingga Anda dapat merender tata letak yang berbeda berdasarkan ID ini:

override fun onTileRequest(requestParams: TileRequest) = Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion("1")
        .setTileTimeline(Timeline.fromLayoutElement(
            when(requestParams.currentState.lastClickableId) {
                "foo" -> myFooLayout()
                else -> myOtherLayout()
            }
        )).build()
)

Memperbarui status dalam kartu

Jika elemen interaktif di kartu Anda memiliki beberapa kemungkinan status, gunakan LoadAction untuk menampilkan nilai baru elemen. Dalam cuplikan kode berikut, kartu menampilkan nilai kotak centang yang diperbarui:

private fun checkboxChip(
    checkboxValue: Boolean,
    deviceParameters: DeviceParametersBuilders.DeviceParameters
): Chip =
    Chip.Builder(
            context,
            Clickable.Builder()
                .setOnClick(LoadAction.Builder()
                    .build()
                ).build(),
            deviceParameters
        ).setIconContent(if (checkboxValue) "check" else "checkoff")
        // Set checkbox labels and colors here.
        .build()

Meminta pemuatan ulang konten kartu

Untuk meminta pembaruan pada seluruh konten kartu, gunakan LoadAction dan perbarui status permintaan kartu, seperti ditunjukkan dalam cuplikan kode berikut.

Catatan: Untuk menghindari pergantian tampilan halaman dan animasi yang dimulai ulang, jangan ubah cara pemuatan tata letak, kecuali untuk bagian-bagian dengan nilai ekspresi literal atau dinamis yang telah diperbarui.

private fun tappableElement(): LayoutElement =
    Button.Builder(this, Clickable.Builder()
            .setId("foo")
            .setOnClick(LoadAction.Builder()
                .setRequestState(
                    StateBuilders.State.Builder()
                        /* Update state information here. */
                        .build()
                ).build()
            ).build())
        .setTextContent("Tap me!")
        .build()

Memuat aktivitas menggunakan deep link

Untuk memuat aktivitas menggunakan deep link, kaitkan elemen yang dapat diklik dengan objek LoadAction:

private fun tappableElement(): LayoutElement =
    Text.Builder()
        .setText("Tap me!")
        .setModifiers(Modifiers.Builder()
            .setClickable(Clickable.Builder()
                .setId("foo")
                .setOnClick(LoadAction.Builder().build())
                .build()
            ).build()
        ).build()

Kemudian, dalam metode onTileRequest() Anda, gunakan objek TaskStackBuilder sebagai helper:

override fun onTileRequest(requestParams: TileRequest): ListenableFuture<TileBuilders.Tile> {
    val lastClickableId = requestParams.currentState.lastClickableId
    if (lastClickableId == "foo") {
      TaskStackBuilder.create(this)
        .addNextIntentWithParentStack(Intent(
            Intent.ACTION_VIEW,
            "https://www.example.com/$lastClickableId".toUri(),
            context,
            MyWearOsAppActivity::class.java
        ))
        .startActivities()
    }
    // The user clicked somewhere else on the tile instead.
}

Memuat aktivitas yang diekspor

Untuk memuat aktivitas yang diekspor menurut nama class dan dengan tambahan intent, gunakan LaunchAction.

Perhatian: Perhatikan pengaruh LaunchAction terhadap navigasi aplikasi Anda. Compose untuk Wear OS merekomendasikan agar Anda menggunakan satu aktivitas di aplikasi.

private fun tappableElement(): LayoutElement =
    Text.Builder(this, "Tap me!")
        .setModifiers(Modifiers.Builder()
            .setClickable(Clickable.Builder()
                .setId("foo")
                .setOnClick(ActionBuilders.launchAction(
                    ComponentName("my.package.name", "MyActivity")
                )).build()
            ).build()
        ).build()

Di dalam aktivitas yang diluncurkan, Anda dapat mengambil ID yang digunakan untuk kartu seperti yang ditunjukkan pada contoh berikut:

class MyActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val clickableId =
            intent.getStringExtra(TileService.EXTRA_CLICKABLE_ID)
        // clickableId will be "foo" when launched from the Tile
    }
}