Pinch-to-zoom

The pinch-to-zoom extension zooms the element when the user spreads two fingers. The zoomed element is displayed on top of the rest of the content and follows the fingers; when the gesture ends, it smoothly returns to its place. The extension is supported on Android and iOS.

{
  "type": "image",
  "image_url": "https://example.com/image.png",
  "extensions": [
    {
      "id": "pinch-to-zoom"
    }
  ]
}

The extension has no parameters.

How it works

On Android, the extension works only with the div-image element. It isn't applied to other elements, and DivKit reports an error.
On iOS, the extension can be added to any element.

Connection

Android

iOS

build.gradle

dependencies {
    implementation "com.yandex.div:div-pinch-to-zoom:${versions.divkit}"
}

In the code:

val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(activity)
    .host(window)
    .dimColor(0xFF808080.toInt())
    .build()
val divConfiguration = DivConfiguration.Builder(imageLoader)
    .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
    .build()

DivPinchToZoomConfiguration.Builder methods:

host: Window that displays the zoomed image. Default: the Activity window.
dimColor: Color that dims the content under the zoomed image. By default, the content isn't dimmed.
animationInterpolator: Interpolator of the animation that returns the image to its place.

DivKitComponents(
  ...
  extensionHandlers: [
    PinchToZoomExtensionHandler(overlayView: rootView)
  ]
)

overlayView is the view on top of which the zoomed element is displayed. To receive the events of the gesture start, scale change, and gesture end, pass the zoomObserver parameter with a PinchToZoomObserver object to the handler.

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository

Was the article helpful?

Lottie animations

Swipe gestures