スワイプによる非表示

スワイプして閉じるアニメーションは、ユーザーが前のページに移動するときの遷移を表現します。

スワイプして閉じるアニメーションの詳細は、RSB の押下と同様です。アニメーションの進行を最大 50%、指で制御します。

アプリビューには、閉じる操作にリンクされている追加のアニメーションがあります。アプリビューに表示される動きの量は、指を動かす必要のある距離とまったく同じというわけではありません。アプリビューが画面の端から離れないようにし、ある程度の抵抗を持たせてスクイーズのような効果を表示します。

実装

Wear には独自のバージョンの Box である SwipeToDismissBox があります。これにより、モバイルの戻るボタンに似た、スワイプして閉じる操作のサポートが追加されています。

SwipeToDismissBox は、右にスワイプすることで閉じることができるコンポーザブルです。

SwipeToDismissBox を使用するには、まず状態を作成する必要があります。状態には、スワイプ方向、アニメーションが実行されているかどうか、現在値やターゲットなどに関する情報が含まれます。次の例は、シンプルな「スワイプして閉じる」操作の設計方法を示しています。

val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
    onDismissed = { /* navigateBack */ },
) { isBackground ->
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}

SwipeToDismissBox を Navigation ライブラリと組み合わせて使用する方法の詳細については、Wear Compose Navigation ライブラリのリファレンス ドキュメントをご覧ください。

設計

スワイプして閉じる操作を設計する際は、次の 2 つの原則に留意してください。

画面の端

スワイプ可能な他の UI 要素（ページ分けされたアプリビューなど）を考慮します。スワイプして閉じることができる場合は、画面の端の 20% を予約して、その動きをトリガーします。

コンテンツが水平方向にスクロールできる場合のエッジスワイプの例については、Wear OS 向け Compose マテリアル コードベースの例をご覧ください。

戻る操作かアプリビューに残る操作かのしきい値

ユーザーが画面幅の 50% 以上を指でドラッグした場合、アプリは残りのスワイプバック アニメーションをトリガーする必要があります。これより小さい場合、アプリは完全なアプリビューにスナップして戻ります。

操作が速い場合は、50% のしきい値ルールを無視してスワイプバックします。