Git Product home page Git Product logo

zoomables's Introduction

Zoomables

MavenCentral

A Jetpack Compose Library provides Composables that handle nice and smooth zooming behaviour for you

If you have any issues or ideas how to improve any of these libraries feel free to open an issue

Show comparison

Comparison between this library and the way recommended by the Android documentation

Notice that the rotation and zoom are centered at the touch point with this library but at the center of the image with the other option

Why use this library?

  • It provides nicer zooming behaviour (see comparison)
  • Provides callback functions to handle swiping left/right on the image when not zoomed in
  • Reduces difficult to read code

What does this library provide?

  • General Composables for with zooming behaviour
  • Special Composables for Images, reducing boilerplate code even further
  • A ZoomableState

How to use this library

Import via gradle using this version number: MavenCentral

implementation "de.mr-pine.utils:zoomables:{Version number}"

Zoomable Image:

ZoomableImage(
    coroutineScope = rememberCoroutineScope(),
    zoomableState = rememberZoomableState(),
    painter = /* Painter */, //also possible with ImageVector and ImageBitmap
    onSwipeRight = {
     Toast.makeText(
         context, "Swipe right", Toast.LENGTH_LONG
     ).show()
    },
    onSwipeLeft = {
     Toast.makeText(
         context, "Swipe left", Toast.LENGTH_LONG
     ).show()
    }
)

Zoomable:

Zoomable(
    coroutineScope = rememberCoroutineScope(),
    zoomableState = rememberZoomableState(),
    onSwipeLeft = {
     Toast.makeText(
         context, "Swipe left", Toast.LENGTH_LONG
     ).show()
    },
    onSwipeRight = {
     Toast.makeText(
         context, "Swipe right", Toast.LENGTH_LONG
     ).show()
    }
) {
    /* Your Composable */
}

zoomables's People

Contributors

ajans avatar mr-pine avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

ajans

zoomables's Issues

[Feature] Add Fling support

Currently the panning stops once you lift your finger. For the panning to feel more natural, it would be great if there was an optional fling gesture support.

Found this example code on developer.android.com while searching around for a solution. But needs to be implemented in a pointerInput scope, so I think it has to be implemented inside the library.

[Zoomable] Add boolean-parameter to turn off rotation

Hi,

thank you for awesome library! I found nothing else as sophisticated as your Zoomables, great job!

As I am in the process of implementing an image-gallery, I would like to disable content-rotation.

So it would be nice to have a booelan-flag to enable/disable rotation for the Zoomable-composable-function.
The boolean-parameter lockRotationOnZoomPan would then only take effect if rotation is enabled.

Would you be open to implement such a feature or alternatively for a Merge Request for me to add this?

Not an issue, just appreciation

Hi, I think what you create is very good. Thanks a lot

To other that needed some sample how to use it, here it is :

val scope = rememberCoroutineScope()
val zoomableState = rememberZoomableState()

...
ZoomableImage(
		modifier = Modifier
			.fillMaxWidth()
			.fillMaxHeight(0.95f),
		coroutineScope = scope, zoomableState = zoomableState,		
	)	

[Zoomable] Double-Tap zoom point

Hi,

I would propose a little behavior optimization in that the Zoomable should zoom in on the last touchpoint when using the double-tap zoom feature (which is awesome, by the way).

Would that be possible to implement?

[Bug] Multi-touch zoom + drag to one finger drag sometimes does not work

The bug happens when you are pinch zooming and dragging, and lift one finger and try to continue dragging. The drag does not work. Although, I can't seem to reproduce all the time, but it happens often. I have attached a video of the issue. Happens at the very start and very end of the video.

video_2023-03-26_19-41-18.mp4

[Feature request] Allow some additional configuration

It would be great if you can also add the following to ZoomableImage:

  1. An onTap callback. If I add my own pointerInput to the modifier to detect single taps, it breaks the double tap zoom.
  2. Currently the default double tap only zooms it to 2f scale. Allow us to change this value. I know I could just copy the double tap implementation and give my own value, but I think it would be better if the double tap zoom value is configurable.
  3. Also, allow changing the double tap AnimationSpec. This way we can give our own animation easing, duration etc.

[Zoomable] Add feature to disable swipeability in zoomed state

Hi,

thanks again you for your library!

As I understand the parameters minimumSwipeDistance and onSwipeLeft / onSwipeRight, those parameters are designed to handle something like a Pager-like scenario in the unzoomed state, right?

In my app, I already tested your Zoomable in the context of the HorizontalPager-composable from the accompanist-library "com.google.accompanist:accompanist-pager:0.23.1", so my use-case is a bit different, as page-swiping is already handled by HorizontalPager.

The problem for me with the usage of Zoomable in HorizontalPager is the gesture-conflict happening in the zoomed state.
Depending on how slow or fast I do the drag-gesture, either Zoomable is panning the viewport to the zoomed content or HorizontalPager picks up the gesture and starts to swipe to the next page, which is not what the app-user would expect.

For me, the best solution would be to disable page-swiping if the Zoomable is in the zoomed state.
Would that be something that could be handled by Zoomable on its own or would I need to adapt the HorizontalPager for that somehow in regards to gesture-propagation?

I found this issue for disabling swipe for HorizontalPager, but the parameter for that is only re-introduced in a newer version of accompanist than I am currently using (it also depends on the newer alpha-version of Jetpack Compose).
So I guess the alternative for me would be to migrate to the newer accompanist-version and handle this by bubbling-up the zoomableState and disable the HorizontalPager-swipe in the zoomed state myself.

What do you think?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.