--- metadata: - name: generator content: Diplodoc Platform v5.50.3 alternate: - https://divkit.tech/docs/en/concepts/extensions.md - https://divkit.tech/docs/ru/concepts/extensions.md --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt # Кастомизация Элемент [extension](https://divkit.tech/docs/ru/concepts/divs/2/div-extension.md) — это блок данных, который позволяет изменять поведение и отображение элементов. Расширение можно добавлять к любому элементу. Дополнительная логика описывается в обработчике расширения `DivExtensionHandler`. ## Готовые расширения {#ready} #| || **Идентификатор** | **Описание** | **Исходный код** || || `pinch-to-zoom` | Увеличивает элемент. | [Android](https://github.com/divkit/divkit/tree/main/client/android/div-pinch-to-zoom) [iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/PinchToZoomExtensionHandler.swift) || || `lottie` | Подключает [Lottie](https://lottiefiles.com/)-анимации к [gif-image](https://divkit.tech/docs/ru/concepts/divs/2/div-gif-image.md). | [Android](https://github.com/divkit/divkit/tree/main/client/android/div-lottie) [iOS](https://github.com/divkit/divkit/tree/main/client/ios/DivKitExtensions/Animations/Lottie) [Web](https://github.com/divkit/divkit/blob/main/client/web/divkit/src/extensions/lottie.ts) || || `input_autocorrection` | Управляет автокоррекцией текста в элементах [input](https://divkit.tech/docs/ru/concepts/divs/2/div-input.md) (только для iOS). | [iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/InputAutocorrectionExtensionHandler.swift) || || `rasterize` | Исправляет проблемы с отрисовкой вне экрана в overlap контейнерах (только для iOS). | [iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/RasterizeExtensionHandler.swift) || || `blur` | Добавляет эффект размытия к элементу (только для iOS). | [iOS](https://github.com/divkit/divkit/blob/main/client/ios/DivKitExtensions/ExtensionHandlers/BlurExtensionHandler.swift) || |# ## Подключение {#connect} {% note info %} В качестве примера в этом разделе используется расширение [Lottie](https://lottiefiles.com/). {% endnote %} {% list tabs %} - Android build.gradle ```cpp translate=no 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}" } ``` В коде: ```cpp translate=no 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) ``` - iOS Обработчики расширений должны соответствовать протоколу `DivExtensionHandler`. Для подключения обработчика передайте его в `DivBlockModelingContext`: ```cpp translate=no DivBlockModelingContext( ... extensionHandlers: [ PinchToZoomExtensionHandler(overlayView: rootView), SomeExtensionHandler() ] ) ``` - Web ```js translate=no 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 }); ``` Пример подключенного расширения доступен в [репозитории](https://github.com/divkit/divkit/tree/main/client/web/divkit-examples/extensions-builtin). {% endlist %} ### Lottie в анимированном gif-изображении {#lottie} Для подключения анимации к [gif-изображению](https://divkit.tech/docs/ru/concepts/divs/2/div-gif-image.md) заполните массив `extensions`: ```json translate=no { "extensions": [ { "id": "lottie", "params": { "lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json", "repeat_count": 3, "repeat_mode": "restart" } } ] } ``` {% note info %} **Поведение параметра repeat_count** - `repeat_count: 0` — анимация проигрывается один раз - `repeat_count: 1` — анимация проигрывается два раза - `repeat_count: N` — анимация проигрывается N+1 раз - `repeat_count: -1` — бесконечное зацикливание {% endnote %} #| || **Параметры** | **Описание** || || `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_autocorrection} Для управления автокоррекцией текста в элементах [input](https://divkit.tech/docs/ru/concepts/divs/2/div-input.md) на iOS используйте расширение `input_autocorrection`: ```json translate=no { "extensions": [ { "id": "input_autocorrection", "params": { "enabled": false } } ] } ``` #| || **Параметры** | **Описание** || || `id` | Идентификатор расширения. || || `enabled` | Управляет включением автокоррекции для поля ввода. Установите значение `false`, чтобы отключить автокоррекцию. || |# ### Автоматическая коррекция соотношения сторон изображений {#aspect-correction} Для автоматического кадрирования изображений в [div-image](https://divkit.tech/docs/ru/concepts/divs/2/div-image.md) до ожидаемого соотношения сторон используйте расширение `aspect-correction` (только для iOS): ```json translate=no { "extensions": [ { "id": "aspect-correction", "params": { "aspect_tolerance": 0.001 } } ] } ``` #| || **Параметры** | **Описание** || || `id` | Идентификатор расширения. || || `aspect_tolerance` | Допуск отклонения соотношения сторон (опционально). Если фактическое соотношение сторон отличается от ожидаемого менее чем на это значение, кадрирование не применяется. По умолчанию: 0.001. || |# **Особенности работы:** - Изображения кадрируются центрально при значительном отклонении от ожидаемого соотношения сторон - Если фактическое соотношение сторон меньше ожидаемого - обрезается по высоте - Если фактическое соотношение сторон больше ожидаемого - обрезается по ширине - Поддерживается кэширование обработанных изображений для оптимизации производительности **Интеграция на iOS:** ```cpp translate=no DivBlockModelingContext( ... extensionHandlers: [ AspectCorrectionExtensionHandler(aspectTolerance: 0.001) ] ) ``` ### Растеризация для исправления отрисовки вне экрана {#rasterize} Для исправления проблем с отрисовкой вне экрана в overlap контейнерах используйте расширение `rasterize` (только для iOS): ```json translate=no { "extensions": [ { "id": "rasterize" } ] } ``` #| || **Параметры** | **Описание** || || `id` | Идентификатор расширения. || |# **Особенности работы:** - Применяет растеризацию к блокам через `layer.shouldRasterize = true` - Использует `UIScreen.main.scale` для оптимального качества - Решает проблемы с отрисовкой вне экрана в overlap контейнерах **Интеграция на iOS:** ```cpp translate=no DivBlockModelingContext( ... extensionHandlers: [ RasterizeExtensionHandler() ] ) ``` ### Эффект размытия {#blur} Для добавления эффекта размытия к элементу используйте расширение `blur` (только для iOS): ```json translate=no { "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:** ```cpp translate=no DivBlockModelingContext( ... extensionHandlers: [ BlurExtensionHandler() ] ) ``` ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)