🚀

【Jetpack Compose】ロングタップ時に Ripple Effect を表示する方法

2021/11/01に公開

Jetpack Compose で任意の Composable にロングタップ時の操作をさせたい場合について、公式では下記のように記載されています(2021 年 11 月 1 日時点)。

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onLongPress = { /* ロングタップ時に呼ばれる */ }
    )
}

引用元:操作  |  Jetpack Compose  |  Android Developers

ですが、これだとロングタップ時に Ripple Effect が表示されず、どこがロングタップされたのかがわかりづらいです。

解決方法

Modifier.combinedClickableを使用してください。
Compose Foundation  |  Android デベロッパー  |  Android Developers

Modifier.combinedClickable(
    onClick = { /* タップ時に呼ばれる */ },
    onLongClick = { /* ロングタップ時に呼ばれる */ }
)

Modifier.combinedClickableでは、ロングタップ時に加えて通常のタップ時の処理も記載できます。

ただし、この関数は@OptIn(ExperimentalFoundationApi::class)を付与しないと使用できないため、将来的に変更や削除の可能性があります。
導入の際は慎重に検討してください。

Discussion