https://kotlinlang.org logo
#compose
Title
# compose
u

utikeev

02/23/2021, 7:36 PM
I've implemented custom Pager based on this implementation, but also supporting zoom and vertical pan for alpha11. In alpha12
DragObserver
got deprecated, but I didn't manage to properly migrate my implementation to new API. Using two
draggable
modifiers prevents from dragging simultaneously in both directions and zooming at the same time, while using
pointerInput
lacks was kind of tricky: •
detectDragGestures
lack
onStart
and
velocity
parameter in
onEnd
callback •
drag
function seems to allow more fine-grained setting up, but judging by
detectDragGestures
is also quite hard to handle. Also
velocity
has to be calculated somehow (isn't really clear) I'll attach deprecated snippet, which I currently use, and would be glad to know several directions on how it can be implemented with new API with the similar amount of code.
Copy code
modifier = modifier
            .zoomable { coroutineScope.launch { state.zoom(it) } }
            .rawDragGestureFilter(object : DragObserver {
                override fun onDrag(dragDistance: Offset): Offset {
                    with(state) {
                        coroutineScope.launch { setTranslationX(translationX + dragDistance.x / pageWidth) }
                        translationY += dragDistance.y / pageHeight
                    }
                    return super.onDrag(dragDistance)
                }

                override fun onStart(downPosition: Offset) {
                    state.selectionState = PagerState.SelectionState.Undecided
                    super.onStart(downPosition)
                }

                override fun onStop(velocity: Offset) {
                    coroutineScope.launch { state.fling(velocity.x / pageWidth) }
                    super.onStop(velocity)
                }
            })
a

Andrey Kulikov

02/23/2021, 11:33 PM
in the next release which should be released tomorrow there is a new modifier transformable, which could solve your use case: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]estures/Transformable.kt;l=49?q=transformable&sq=&ss=androidx
u

utikeev

02/24/2021, 7:55 AM
As far as I can see flinging is supported only in
Scrollable
. Will
scrollable
and
transformable
work simultaneously, so I can use
transformable
for Y axis and zoom and
scrollable
for X axis?
a

Andrey Kulikov

02/24/2021, 12:11 PM
that is a good question. cc @matvei
m

matvei

02/24/2021, 12:30 PM
Scrollable and transformable/zoomable will work together, but I'm not sure how flawless the user experience will be, depends on your use case and how you want scroll and zoom to coordinate, e.g. do you want to start zoom if the second finger is down but you are already scolling? Worth to give it a short nonetheless if you can. The best future proof way of doing it would be though to use
Modifier.pointerInput
directly with
drag
extesion function on it and the zoom handling as well. WE have all the helper functions available in foundation for convenience, but yeah, you will have to create and add events to the velocity tracker manually, which is still simple, but the drag/ centroid handling you can calculate via our own functions.
Also it seems like @cb came up with the newer version 🙂 https://github.com/chrisbanes/accompanist/pull/209
K 1
c

cb

02/24/2021, 4:44 PM
Yep, I'm working on it. Hopefully will land it next week
😍 2
u

utikeev

02/24/2021, 6:16 PM
Oh, the new pager implemetation would be a great reference — looking forward to it, thanks!
h

Halil Ozercan

05/03/2021, 8:59 AM
Sorry for resurrecting an old thread. What I really miss is having access to
centroid
in transformable state. Transformable modifier and scroll works well together but now I don't have access to the centroid. If I use
detectTransformGestures
to access the centroid, then it doesn't work well with
verticalScroll
.
10 Views