Кастомизация

Элемент extension — это блок данных, который позволяет изменять поведение и отображение элементов. Расширение можно добавлять к любому элементу.

Дополнительная логика описывается в обработчике расширения DivExtensionHandler.

Готовые расширения

Идентификатор	Описание	Исходный код
`pinch-to-zoom`	Увеличивает элемент.	Android iOS
`lottie`	Подключает Lottie-анимации к gif-image.	Android iOS Web
`input_autocorrection`	Управляет автокоррекцией текста в элементах input (только для iOS).	iOS
`rasterize`	Исправляет проблемы с отрисовкой вне экрана в overlap контейнерах (только для iOS).	iOS
`blur`	Добавляет эффект размытия к элементу (только для iOS).	iOS

Подключение

Примечание

В качестве примера в этом разделе используется расширение Lottie.

Android

iOS

Web

build.gradle

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

В коде:

val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(this)
    .host(window)
    .dimColor(0xFF808080.toInt())
    .build()
val rawResProvider = object : DivLottieRawResProvider {
    override fun provideRes(url: String): Int? {
        if (url == "res://love") return R.raw.love_anim
        return null
    }
    override fun provideAssetFile(url: String): String? {
        if (url == "asset://banana") return "lottie/lottie_1.json"
        return null
    }
}
val divConfiguration = DivConfiguration.Builder(DefaultDivImageLoader(Container.imageManager))
    .experimentConfig(experimentConfig)
    .actionHandler(actionHandler)
    .divLogger(logger)
    .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
    .extension(DivLottieExtensionHandler(rawResProvider))
    .build()
val divContext = DivContext(baseContext = this, configuration = divConfiguration)
divView = DivView(divContext)

Обработчики расширений должны соответствовать протоколу DivExtensionHandler.

Для подключения обработчика передайте его в DivBlockModelingContext:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    PinchToZoomExtensionHandler(overlayView: rootView),
    SomeExtensionHandler()
  ]
)

import { lottieExtensionBuilder } from '@divkitframework/divkit/client';
import Lottie from 'lottie-web/build/player/lottie';

const map = new Map();

map.set('lottie', lottieExtensionBuilder(Lottie.loadAnimation));

render({
    id: 'test',
    target: element,
    json: {},
    extensions: map
});

Пример подключенного расширения доступен в репозитории.

Lottie в анимированном gif-изображении

Для подключения анимации к gif-изображению заполните массив extensions:

{
  "extensions": [
    {
      "id": "lottie",
      "params": {
        "lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json",
        "repeat_count": 3,
        "repeat_mode": "restart"
      }
    }
  ]
}

Примечание

Поведение параметра repeat_count

repeat_count: 0 — анимация проигрывается один раз
repeat_count: 1 — анимация проигрывается два раза
repeat_count: N — анимация проигрывается N+1 раз
repeat_count: -1 — бесконечное зацикливание

Параметры	Описание
`id`	Идентификатор расширения.
`lottie_url`	Обязательная ссылка на Lottie JSON, если не задан параметр `lottie_json`. Может работать по схемам `asset:{address}` или `res:{address}` для встроенных ресурсов. Связывание ресурсов по этим схемам происходит через зависимость `DivLottieRawResProvider`, которая передается в `DivLottieExtensionHandler`. При использовании неподдерживаемых схем URL (не http/https/file/res) предзагрузка анимации будет пропущена с записью ошибки в лог.
`lottie_json`	Обязательный параметр, если не задана ссылка `lottie_url`. Содержит Lottie JSON.
`repeat_count`	Количество повторов анимации. Для бесконечного количества повторов используйте значение `-1`.
`repeat_mode`	Действие после окончания анимации. Может принимать значения: `restart` — анимация начинается сначала; `reverse` — анимация идет покадрово в обратном порядке.
`min_frame`	Минимальный кадр, с которого начинается анимация. Используется для сложных сценариев цикличного воспроизведения.
`is_playing`	Управляет автоматическим воспроизведением анимации при инициализации. Если установлено значение `false`, анимация не будет запускаться автоматически. По умолчанию: `true`.

Управление автокоррекцией текста

Для управления автокоррекцией текста в элементах input на iOS используйте расширение input_autocorrection:

{
  "extensions": [
    {
      "id": "input_autocorrection",
      "params": {
        "enabled": false
      }
    }
  ]
}

Параметры	Описание
`id`	Идентификатор расширения.
`enabled`	Управляет включением автокоррекции для поля ввода. Установите значение `false`, чтобы отключить автокоррекцию.

Автоматическая коррекция соотношения сторон изображений

Для автоматического кадрирования изображений в div-image до ожидаемого соотношения сторон используйте расширение aspect-correction (только для iOS):

{
  "extensions": [
    {
      "id": "aspect-correction",
      "params": {
        "aspect_tolerance": 0.001
      }
    }
  ]
}

Параметры	Описание
`id`	Идентификатор расширения.
`aspect_tolerance`	Допуск отклонения соотношения сторон (опционально). Если фактическое соотношение сторон отличается от ожидаемого менее чем на это значение, кадрирование не применяется. По умолчанию: 0.001.

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

Изображения кадрируются центрально при значительном отклонении от ожидаемого соотношения сторон
Если фактическое соотношение сторон меньше ожидаемого - обрезается по высоте
Если фактическое соотношение сторон больше ожидаемого - обрезается по ширине
Поддерживается кэширование обработанных изображений для оптимизации производительности

Интеграция на iOS:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    AspectCorrectionExtensionHandler(aspectTolerance: 0.001)
  ]
)

Растеризация для исправления отрисовки вне экрана

Для исправления проблем с отрисовкой вне экрана в overlap контейнерах используйте расширение rasterize (только для iOS):

{
  "extensions": [
    {
      "id": "rasterize"
    }
  ]
}

Параметры	Описание
`id`	Идентификатор расширения.

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

Применяет растеризацию к блокам через layer.shouldRasterize = true
Использует UIScreen.main.scale для оптимального качества
Решает проблемы с отрисовкой вне экрана в overlap контейнерах

Интеграция на iOS:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    RasterizeExtensionHandler()
  ]
)

Эффект размытия

Для добавления эффекта размытия к элементу используйте расширение blur (только для iOS):

{
  "extensions": [
    {
      "id": "blur",
      "params": {
        "style": "regular"
      }
    }
  ]
}

Параметры

Описание

id

Идентификатор расширения.

style

Стиль эффекта размытия. Доступные значения:

extra_light — очень светлый
regular — обычный
prominent — выразительный
system_ultra_thin_material — ультратонкий материал
system_ultra_thin_material_light — ультратонкий материал (светлый вариант)
system_ultra_thin_material_dark — ультратонкий материал (темный вариант)
system_thin_material — тонкий материал
system_thin_material_light — тонкий материал (светлый вариант)
system_thin_material_dark — тонкий материал (темный вариант)
system_material — материал
system_material_light — материал (светлый вариант)
system_material_dark — материал (темный вариант)
system_thick_material — толстый материал
system_thick_material_light — толстый материал (светлый вариант)
system_thick_material_dark — толстый материал (темный вариант)
system_chrome_material — хром материал
system_chrome_material_light — хром материал (светлый вариант)
system_chrome_material_dark — хром материал (темный вариант)

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

Использует системные blur-эффекты iOS (UIBlurEffect)
Поддерживает как базовые стили, так и material-стили с вариантами для светлой и темной темы
Применяется ко всему элементу, к которому добавлено расширение

Интеграция на iOS:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    BlurExtensionHandler()
  ]
)

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

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

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

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

visibility-action

Вопросы и ответы