I've implemented custom Pager based on <this imple...

# compose

[utikeev]

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.

[utikeev]

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)
                }
            })

[Andrey Kulikov]

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&amp;sq=&amp;ss=androidx

[utikeev]

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?

[Andrey Kulikov]

that is a good question. cc @matvei

[matvei]

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.

[matvei]

Also it seems like @cb came up with the newer version 🙂

https://github.com/chrisbanes/accompanist/pull/209

[cb]

Yep, I'm working on it. Hopefully will land it next week

[utikeev]

Oh, the new pager implemetation would be a great reference — looking forward to it, thanks!

[Halil Ozercan]

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 .