카드와 상호작용

카드를 대화형으로 만들면 카드 환경을 개선할 수 있습니다. 카드 내의 레이아웃 요소에 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
    }
}
드림