saket / telephoto

Building blocks for designing media experiences in Compose UI
https://saket.github.io/telephoto/
Apache License 2.0
869 stars 28 forks source link

Content padding #75

Closed WildOrangutan closed 2 months ago

WildOrangutan commented 3 months ago

Hey,

love your library, but I found one annoyance.

Let's say I have an image, that I would like to display full screen. If image is not zoomed in, I would like to have some padding between the screen and image. If image is zoomed in, I want to have it edge-to-edge.

Is it possible to achieve this? I didn't find a way to do it.

I'm using it like so:

    ZoomableAsyncImage(
        modifier = modifier.fillMaxSize().padding(all = 16.dp),
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .build(),
        contentDescription = null,
    )
saket commented 3 months ago

I would like to have some padding between the screen and image.

Interesting! What's the reason for doing this? Was this requested by your designer?

I am not sure what'd be a good way to solve this. Can you try using a custom ContentScale?

ZoomableAsyncImage(
  contentScale = FooContentScale,
)
private object FooContentScale : ContentScale {
  override fun computeScaleFactor(srcSize: Size, dstSize: Size): ScaleFactor {
    val scaleToFit = ContentScale.Fit.computeScaleFactor(srcSize, dstSize)
    return ScaleFactor(
      scaleX = scaleToFit.scaleX * 0.9f,
      scaleY = scaleToFit.scaleY * 0.9f,
    )
  }
} 
saket commented 2 months ago

Closing this due to inactivity. Please feel free to reopen?