Home > Software design >  Combine detectTapGestures and detectDragGesturesAfterLongPress?
Combine detectTapGestures and detectDragGesturesAfterLongPress?

Time:07-08

We need to be able to detect both taps and drag gestures after long press on the same component in Jetpack Compose.

To detect taps we can do:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
}

And to detect drag gestures after long press:

Modifier.pointerInput(graphData) {
    detectDragGesturesAfterLongPress(
        ...
    )
}

But it is not possible to use both at the same time, since the first detect* will consume the pointer events:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
    detectDragGesturesAfterLongPress(
        ...
    )
}

Is it possible to achieve this in a more convenient way then rolling our own custom function that replicates most of the code in detectDragGesturesAfterLongPress?

CodePudding user response:

By chaining two Modifier.pointerInput(Unit) functions you will be able to detect both gestures. Of course you won't be able to detect tap if drag gesture has started

val context = LocalContext.current

val modifier = Modifier
    .pointerInput(Unit) {
        detectTapGestures(
            onPress = {
                Toast
                    .makeText(context, "onPress", Toast.LENGTH_SHORT)
                    .show()
            },
            onTap = {
                Toast
                    .makeText(context, "onTap", Toast.LENGTH_SHORT)
                    .show()
            }
        )
    }

    .pointerInput(Unit) {
        detectDragGesturesAfterLongPress(
            onDragStart = {
                Toast
                    .makeText(context, "onDragStart", Toast.LENGTH_SHORT)
                    .show()
            },
            onDrag = { change, dragAmount ->
                println("DRAGGING$ dragAmount")

            }
        )
    }
  • Related