Jetpack Compose Intercept pinch/zoom in child layout
I want to have a box with colums of rows filled with further children that accept clicks ("CL") and long clicks ("LO") to be zoomable and draggable. Using pointerInput with detectTransforgestures I can transform the child layout as I want.
var zoom by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }
val outer = (1..60).toList().chunked(6)
Box(Modifier
.fillMaxSize()
.pointerInput(Unit) {
//zoom in/out and move around
detectTransformGestures { gestureCentroid, gesturePan, gestureZoom, _ ->
val oldScale = zoom
val newScale = (zoom * gestureZoom).coerceIn(0.5f..5f)
offset =
(offset + gestureCentroid / oldScale) - (gestureCentroid / newScale + gesturePan / oldScale)
zoom = newScale
}
}) {
Box(
Modifier
.graphicsLayer {
translationX = -offset.x * zoom
translationY = -offset.y * zoom
scaleX = zoom
scaleY = zoom
}
.background(Color.Cyan)
) {
Column {
outer.forEach { inner ->
Row {
inner.forEach { tile ->
var text by remember {
mutableStateOf(tile.toString())
}
Text(text,
Modifier
.padding(8.dp)
.combinedClickable(
onClick = {
text = "CL"
},
onLongClick = {
text = "LO"
}
)
.background(Color.Green)
.padding(8.dp)
)
}
}
}
}
}
}
The problem being now that the clickable children (marked green) seem to swallow tap gestures, so when trying to pinch two fingers, I'm unable to zoom back out, if my fingers hit the buttons (as signaled by the ripple) instead of the blue or white area.
Is there any way to not make the clickable children consume this type of event or maybe intercepts it, so that they don't even receive multitouch events like pinch?
Solution
In jetpack Compose default PointerEventPass is Main which as you can see in this answer, gestures propagate from descendant to ancestor while you want transform gesture to propagate from ancestor to descendant.
You need to use PointerEventPass.Initial for this. Using Final won't work when you touch the buttons because they will consume events. Now, Cyan background will allow pinch gestures before buttons consume them also you can consume events when number of pointers is bigger than 1 to not set click or long click as
// 🔥Consume touch when multiple fingers down
// This prevents click and long click if your finger touches a
// button while pinch gesture is being invoked
val size = changes.size
if (size>1){
changes.forEach { it.consume() }
}
Result
The code you should use for transform is
suspend fun PointerInputScope.detectTransformGestures(
panZoomLock: Boolean = false,
consume: Boolean = true,
pass: PointerEventPass = PointerEventPass.Main,
onGestureStart: (PointerInputChange) -> Unit = {},
onGesture: (
centroid: Offset,
pan: Offset,
zoom: Float,
rotation: Float,
mainPointer: PointerInputChange,
changes: List<PointerInputChange>
) -> Unit,
onGestureEnd: (PointerInputChange) -> Unit = {}
) {
awaitEachGesture {
var rotation = 0f
var zoom = 1f
var pan = Offset.Zero
var pastTouchSlop = false
val touchSlop = viewConfiguration.touchSlop
var lockedToPanZoom = false
// Wait for at least one pointer to press down, and set first contact position
val down: PointerInputChange = awaitFirstDown(
requireUnconsumed = false,
pass = pass
)
onGestureStart(down)
var pointer = down
// Main pointer is the one that is down initially
var pointerId = down.id
do {
val event = awaitPointerEvent(pass = pass)
// If any position change is consumed from another PointerInputChange
// or pointer count requirement is not fulfilled
val canceled =
event.changes.any { it.isConsumed }
if (!canceled) {
// Get pointer that is down, if first pointer is up
// get another and use it if other pointers are also down
// event.changes.first() doesn't return same order
val pointerInputChange =
event.changes.firstOrNull { it.id == pointerId }
?: event.changes.first()
// Next time will check same pointer with this id
pointerId = pointerInputChange.id
pointer = pointerInputChange
val zoomChange = event.calculateZoom()
val rotationChange = event.calculateRotation()
val panChange = event.calculatePan()
if (!pastTouchSlop) {
zoom *= zoomChange
rotation += rotationChange
pan += panChange
val centroidSize = event.calculateCentroidSize(useCurrent = false)
val zoomMotion = abs(1 - zoom) * centroidSize
val rotationMotion =
abs(rotation * kotlin.math.PI.toFloat() * centroidSize / 180f)
val panMotion = pan.getDistance()
if (zoomMotion > touchSlop ||
rotationMotion > touchSlop ||
panMotion > touchSlop
) {
pastTouchSlop = true
lockedToPanZoom = panZoomLock && rotationMotion < touchSlop
}
}
if (pastTouchSlop) {
val centroid = event.calculateCentroid(useCurrent = false)
val effectiveRotation = if (lockedToPanZoom) 0f else rotationChange
if (effectiveRotation != 0f ||
zoomChange != 1f ||
panChange != Offset.Zero
) {
onGesture(
centroid,
panChange,
zoomChange,
effectiveRotation,
pointer,
event.changes
)
}
if (consume) {
event.changes.forEach {
if (it.positionChanged()) {
it.consume()
}
}
}
}
}
} while (!canceled && event.changes.any { it.pressed })
onGestureEnd(pointer)
}
}
Usage
@OptIn(ExperimentalFoundationApi::class)
@Preview
@Composable
private fun TouchComposable() {
var zoom by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }
val outer = (1..60).toList().chunked(6)
Box(
Modifier
.fillMaxSize()
.pointerInput(Unit) {
//zoom in/out and move around
detectTransformGestures(
pass = PointerEventPass.Initial,
onGesture = { gestureCentroid: Offset,
gesturePan: Offset,
gestureZoom: Float,
_,
_,
changes: List<PointerInputChange> ->
val oldScale = zoom
val newScale = (zoom * gestureZoom).coerceIn(0.5f..5f)
offset =
(offset + gestureCentroid / oldScale) - (gestureCentroid / newScale + gesturePan / oldScale)
zoom = newScale
// 🔥Consume touch when multiple fingers down
// This prevents click and long click if your finger touches a
// button while pinch gesture is being invoked
val size = changes.size
if (size > 1) {
changes.forEach { it.consume() }
}
}
)
}) {
Box(
Modifier
.graphicsLayer {
translationX = -offset.x * zoom
translationY = -offset.y * zoom
scaleX = zoom
scaleY = zoom
}
.background(Color.Cyan)
) {
Column {
outer.forEach { inner ->
Row {
inner.forEach { tile ->
var text by remember {
mutableStateOf(tile.toString())
}
Text(text,
Modifier
.padding(8.dp)
.combinedClickable(
onClick = {
text = "CL"
},
onLongClick = {
text = "LO"
}
)
.background(Color.Green)
.padding(8.dp)
)
}
}
}
}
}
}
}
You can also find this gesture and some other gestures in this library
https://github.com/SmartToolFactory/Compose-Extended-Gestures
And more about gestures in this tutorial
https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials
- Webview doesn't recompose upon change of mutableIntState
- Problems with Android Studio Tutorial = Adding an Image
- @HiltViewModel annotated class should contain exactly one @Inject or @AssistedInject annotated constructor
- android webRTC video not woroking
- Advantage of adding asSequence() in Array in Kotlin
- Why I cant use Modifier.sharedBounds in jetpack compose
- Create mime email message from scratch (for Mailgun API)
- Why can I successfully connect to a netcat server from the adb shell and not from the Android app?
- kotlin get enum value by it's generic type in case it is enum
- Convert InputStream to Flow
- How to read and decode a remote JSON data in Jetpack Compose app?
- Is there a way to map my document id with toObject?
- Run Coroutine functions on broadcast receiver
- "Unresolved reference: Parcelize" after updating to Kotlin 1.3.30
- How to fix issues with icons in Jetpack Compose?
- Unable to start activity ComponentInfo when im launching my Android App
- When to use suspend function and Flow together or seperate in kotlin?
- How to provide ActivityCompat.requestPermissions with MainActivity in Android using Kotlin
- A white screen instead of displaying information in Compose and Room Library
- I didn't use "com.google.android.play:core:1.10.3" in project gradle in android studio
- Type mismatch when serializing data class
- Laggy Lazy Column Android Compose
- Jetpack Compose - Column - Gravity center
- Failure to setup Room in build.grade
- @ConfigurationProperties without default values in spring boot 3 using Kotlin
- Smart cast to 'X' is impossible, because 'X' is a public API property declared in different module
- Read value from local.properties via Kotlin DSL
- How to perform click on button of ListView element in Android
- Access Kotlin Jooq generated sources in JAVA
- Convert Hex value to Base64 using Kotlin