Jetpack Compose drag gesture and pinch gesture

1. Jetpack Compose Drag Gesture / Pinch Gesture @MoyuruAizawa
2. Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa
3. github.com/MoyuruAizawa/Cropify
4. ࠷ۙ࢓ࣄͰ Drag Gestureͱ͔Pinch Gestureͱ͔ ѻͬͨͷͰͦͷ঺հ
5. CatlogͬͯԿ? Catlog Catlog Board ŮŧŠźƃɺͪΌΜͱ͏Μͨ͜͠?͓ͬͨ͜͠͠? ස೘ͩͬͨΓ͠ͳ͍? ମॏͷٸܹͳ૿ݮͱ͔ͯ͠ͳ͍? ͬͯͷ͕෼͔Δੌ͍IoT൘ ŮŧŠźƃɺӡಈͯ͠Δ?ͪΌΜͱ͝൧৯΂ͯΔ?Α͘৸ΕͯΔ? ͬͯͷ͕෼͔Δੌ͍IoTϖϯμϯτ
7. ݩؾείΞ΍ମॏτϨϯυɺτΠϨճ ਺ɺ৯ࣄճ਺ͳͲ ͋ΒΏΔCatlogσʔλΛγΣΞͯ͠͏ͪ ͷࢠࣗຫͰ͖Δػೳ
8. ‣ ༷ʑͳσʔλΛεςοΧʔԽͯ͠഑ஔ ‣ υϥοάͯ͠ҠಈͰ͖ΔΑ ‣ ը໘্୺ΑΓ্ʹυϥοάͨ͠Β࡟আͰ͖ΔΑ ‣ ϐϯνͨ͠ΒζʔϜͰ͖ΔΑ ‣ CenterVerticallyͱ͔CenterHorizontallyʹεφοϓͰ͖ΔΑ ͜ͷը໘ͷΤϯδχΞత໘നΈ
9. Ͳ͏΍Μͷ?
10. ‣ Modifier#pointerInput ‣ PointerInputScope#detectDragGesture ‣ PointerInputScope#detectTransformGesture ॆ࣮ͷgesture API
11. modifier .pointerInput(Unit) { detectDragGestures { change, dragAmount -> state.offset += dragAmount } } .graphicsLayer { translationX = state.offset.x translationY = state.offset.y } PointerInput#detectDragGestures
12. modifier .pointerInput(Unit) { detectTransformGestures { centroid, pan, zoom, rotation -> state.scale *= zoom } } .graphicsLayer { scaleX = state.scale scaleY = state.scale } PointerInput#detectTransformGestures
13. ‣ PointerInputScope#detectDragGesture ‣ Drag͚ͩ͞͹͖͍ͨͳΒ͍ͭ͜Λ࢖͑͹OK ‣ PointerInputScope#detectTransformGesture ‣ DragҎ֎ʹZoom΍Rotation΋ѻ͍͍ͨͳΒ͜Ε ‣ ֤δΣενϟʔͷ஋͕ಉ࣌ʹ͘ΔͷͰͲͷδΣενϟʔ͕ܧଓதͳ ͷ͔൑ผ͠೉͍ ‣ Zoom͠ͳ͕ΒDragͱ͔Ͱ͖ͪΌ͏ ‣ onGestureStart, onGestureEndίʔϧόοΫແ͍ APIੇධ
14. suspend fun PointerInputScope.detectTransformGestures( onGestureStart: (GestureType) -> Unit, onGestureEnd: (GestureType) -> Unit, onDrag: (dragAmount: Offset) -> Unit, onZoom: (zoom: Float) -> Unit, ) { forEachGesture { awaitPointerEventScope { awaitFirstDown(requireUnconsumed = false) val gestureType = detectGesture() ?: return@awaitPointerEventScope onGestureStart(gestureType) do { val event = awaitPointerEvent() when (gestureType) { GestureType.DRAG -> { val dragChange = event.calculatePan() if (dragChange != Offset.Zero) onDrag(dragChange) } GestureType.ZOOM -> { val zoomChange = event.calculateZoom() if (zoomChange != 1f) onZoom(zoomChange) } } event.changes.fastForEach { if (it.positionChanged()) it.consume() } } while (event.changes.fastAny { it.pressed }) onGestureEnd(gestureType) } } } private suspend fun AwaitPointerEventScope.detectGesture(): GestureType? { var zoom = 1f var pan = Offset.Zero val touchSlop = viewConfiguration.touchSlop var gestureType: GestureType? = null do { val event = awaitPointerEvent() zoom *= event.calculateZoom() pan += event.calculatePan() val zoomMotion = abs(1 - zoom) * event.calculateCentroidSize(useCurrent = false) val panMotion = pan.getDistance() if (zoomMotion > touchSlop) { gestureType = GestureType.ZOOM break } if (panMotion > touchSlop) { gestureType = GestureType.DRAG break } } while (event.changes.fastAny { it.pressed }) return gestureType } enum class GestureType { DRAG, ZOOM } ΞϓϦͷཁ݅Λຬͨͤͳ͍ͷͰdetectؔ਺Λࣗ෼Ͱॻ͍ͨ ※Ջͳͱ͖ʹݟͯͶ https://bit.ly/composegesture
15. ‣ Catlogͷཁ݅తʹdetectؔ਺͔Βॻ͍ͨ ‣ ը໘֎΁ͷυϥοά͸ෆՄ ‣ εςοΧʔ͔Βը໘୺·Ͱͷڑ཭ΛܭࢉɺͦΕΛ௒͑Δ dragAmount͸࡟Δ ‣ υϥοάதʹCenterVertically | CenterHorizontally෇ۙʹ͖ͨΒͦ ͜΁εφοϓ ‣ ը໘୺໰୊ͱεφοϓΛߟྀͯ͠࠷ऴతͳdragAmountΛܾఆ͢Δ ‣ ը໘୺ͰZoomͨ͠Βը໘֎ʹ͸Έग़ͪΌ͍·͢ΑͶ ‣ Ͱ͔͘ͳͬͯը໘֎ʹग़ͯ͠·ͬͨ෼ը໘಺΁ͣΒͯ͋͛͠Δ ͩΔ͔ͬͨࣄ
16. δΣενϟʔ࣮૷͢Δ͚ͩͳΒ௒؆୯ ΞϓϦͷཁ݅ʹΑͬͯ͸ͪΐͬͱμϧ͍
17. Thank you