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

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

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

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

Идентификатор	Описание	Исходный код
`pinch-to-zoom`	Увеличивает элемент.	Android iOS
`lottie`	Подключает Lottie-анимации к gif-image.	Android iOS Web
`input_autocorrection`	Управляет автокоррекцией текста в элементах input (только для 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"
      }
    }
  ]
}

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

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

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

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

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

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

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

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

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

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

visibility-action

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