このページは Cloud Translation API によって翻訳されました。

タイルを操作する

タイルをインタラクティブにすることで、タイルのエクスペリエンスをさらに高めることができます。タイル内のレイアウト要素に Clickable 修飾子を追加すると、そのレイアウト要素をタップしたユーザーに反応できます。

このページでは、ユーザーがインタラクティブなタイル内で行う一般的なアクションと、このアクションをアプリのタイルに実装する方法について説明します。

新しいタイルレイアウトを読み込む

LoadAction を使用すると、ユーザーがインタラクティブ要素をタップしたときにタイルのレイアウトを更新できます。

次のコードスニペットでは、setId() で設定したクリック可能 ID が onTileRequest() 呼び出しに渡されるため、この ID に基づいて異なるレイアウトをレンダリングできます。

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

タイル内の状態を更新する

タイル内のインタラクティブ要素に複数の状態がある場合、LoadAction を使用して要素の新しい値を表示します。次のコードスニペットでは、タイルに更新されたチェックボックスの値が示されます。

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

タイルのコンテンツの更新をリクエストする

タイルのコンテンツ全体の更新をリクエストするには、次のコードスニペットに示すように、LoadAction を使用してタイルのリクエスト状態を更新します。

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

ディープリンクを使用してアクティビティを読み込む

ディープリンクを使用してアクティビティを読み込むには、クリック可能な要素を 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()

次に、onTileRequest() メソッドで、TaskStackBuilder オブジェクトをヘルパーとして使用します。

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

エクスポートされたアクティビティを読み込む

エクスポートされたアクティビティを、クラス名で、インテントエクストラを使用して読み込むには、LaunchAction を使用します。

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

次の例に示すように、起動されたアクティビティ内で、タイルに使用された ID を取得できます。

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

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Wear OS で初めてのタイルを作成する
ProtoLayout 名前空間に移行する
タイルに動的な更新を表示する