Zenn
🐥

JetpackCompose clickable()のクソダサエフェクトをどうにかする&ロングタップに対応する方法

2021/12/23に公開
Android
Jetpack Compose
tech

はい、

タイトルまんまですがclickable()を使うとクソダサエフェクトになるのに、

所謂リップルエフェクト的な奴が見つからず

これどうしたら直んねん！！！的なことを感じることが

多々あると思います(私はずっと思ってました)

解決方法@サンプルコード

Modifier.clickable(
    interactionSource　= remember { MutableInteractionSource() },
    indication　= rememberRipple(bounded　= true),
    onClick　= {}
)

これでタップ位置からじわ〜〜っと広がる一般的なエフェクトになります。

bounded　= falseにすると、

要素の枠を超えて全体に円形状に広がるエフェクトになります(使い道不明)

使いやすくしたサンプルコード

fun Modifier.rippleClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
): Modifier = composed {
    clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = rememberRipple(bounded = true),
        enabled = enabled,
        onClickLabel = onClickLabel,
        role = role
    ) {
        onClick()
    }
}

ロングタップの話

結論から言うとclickable()はロングタップ非対応です。

なのでこちらを使いましょう。

Modifier
    .combinedClickable(
        onClick = { },
        onLongClick = { },
    )

簡単に言うとクリックとロングクリックの切り分けができるclickable()です。

なんで分かれてるのかはよくわかりません。

参考記事

https://www.fixes.pub/program/306565.html

https://proandroiddev.com/jetpack-compose-interactionsources-the-ripple-effect-and-you-f451b60fcd37

https://stackoverflow.com/questions/65835642/button-long-press-listener-in-android-jetpack-compose

Discussion