Увеличение жестом

Расширение pinch-to-zoom увеличивает элемент, когда пользователь разводит два пальца. Увеличенный элемент отображается поверх остального содержимого и перемещается вслед за пальцами, а после завершения жеста плавно возвращается на место. Расширение поддерживается на Android и iOS.

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

У расширения нет параметров.

Особенности работы

На Android расширение работает только с элементом div-image. К другим элементам оно не применяется, а DivKit сообщает об ошибке.
На iOS расширение можно добавить к любому элементу.

Подключение

Android

iOS

build.gradle

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

В коде:

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

Методы DivPinchToZoomConfiguration.Builder:

host — окно, в котором отображается увеличенное изображение. По умолчанию: окно Activity.
dimColor — цвет затемнения содержимого под увеличенным изображением. По умолчанию затемнения нет.
animationInterpolator — интерполятор анимации, с которой изображение возвращается на место.

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

overlayView — view, поверх которого отображается увеличенный элемент. Чтобы получать события начала жеста, изменения масштаба и окончания жеста, передайте в обработчик параметр zoomObserver с объектом PinchToZoomObserver.

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Была ли статья полезна?

Lottie-анимации

Жесты свайпа