Инструкция для Android

Конфигурация библиотеки и отрисовка первой DivView

Настройка сетевого стека

Начиная с этой версии, DivKit для Android предоставляет единый сетевой клиент (DivNetworkClient) для всех встроенных сетевых запросов библиотеки. Это позволяет централизованно управлять HTTP-стеком (настройки OkHttpClient, интерцепторы, куки) для всех компонентов DivKit.

Для настройки общего сетевого клиента используйте DivKitConfiguration:

// Настройка общего сетевого клиента до первого вызова DivKit.getInstance()
val hostOkHttpClient = OkHttpClient.Builder()
    .addInterceptor(...) // Настройка интерцепторов, логов и т.д.
    .build()

DivKit.configure(
    DivKitConfiguration.Builder()
        .networkClient(OkHttpDivNetworkClient(hostOkHttpClient))
        .build()
)

Этот клиент автоматически используется для:

• Отправки действий (submit actions)
• Загрузки SVG изображений
• Загрузки патчей по умолчанию
• Работы модулей Lottie, Media3 (видео) и Beacon (как fallback)

val beaconConfig = SendBeaconConfiguration(
    networkClient = OkHttpDivNetworkClient(hostOkHttpClient),
    cookieStorage = ... // опционально
)

Настройка зависимостей

Добавьте в проект зависимость от DivKit:

    implementation 'com.yandex.div:div:$version'
    implementation 'com.yandex.div:div-core:$version'
    implementation 'com.yandex.div:div-json:$version'
    implementation 'com.yandex.div:div-network-okhttp:$version' // для OkHttpDivNetworkClient

Последнюю версию библиотеки можно узнать на странице релизов.

Создание DivConfiguration

Создайте и настройте в коде конфигурацию DivConfiguration:

    val imageLoader = PicassoImageLoader(..)
    val configuration = DivConfiguration.Builder(imageLoader).build()

DivConfiguration имеет только один обязательный параметр — imageLoader: DivImageLoader. Вы можете реализовать свой загрузчик, либо использовать одну из наших иплементаций:

• PicassoImageLoader
• GlideImageLoader
• CoilImageLoader

Зависимости для их использования нужно добавить отдельно:

    implementation 'com.yandex.div:picasso:$version' 
    implementation 'com.yandex.div:glide:$version'
    implementation 'com.yandex.div:coil:$version'

Все загрузчики изображений поддерживают формат SVG. Если основной загрузчик не поддерживает SVG, система автоматически использует SVG-загрузчик для соответствующих изображений.

Создание DivData

Верстка в DivKit состоит из двух основных блоков — шаблоны и сама карточка. Они могут приходить как отдельно друг от друга, так и быть в одном JSON файле. Рассмотрим пример, когда пришедшая верстка имеет такую структуру:

{
    "templates": { ... шаблоны ... },
    "card": { ... карточка ...}
}

Тогда метод для обработки DivData будет выглядеть так:

fun JSONObject.asDiv2DataWithTemplates(): DivData {
    val templates = getJSONObject("templates")
    val card = getJSONObject("card")
    val environment = DivParsingEnvironment(ParsingErrorLogger.LOG)
    environment.parseTemplates(templates)
    return DivData(environment, card)
}

Обработка карточки и вывод на экран

Выведем на экран небольшой текст:

val card = """
{
    "card": {
        "log_id": "text",
        "states": [
            {
                "state_id": 0,
                "div": {
                    "type": "text",
                    "text": "Hello, DivKit!"
                }
            }
        ]
    }
}
""".trimIndent()

Теперь соберем все описанное выше воедино и добавим View в иерархию:

    val divData = JSONObject(card).asDiv2DataWithTemplates()
    val div2View = Div2View(Div2Context(context, configuration, lifecyclerOwner))
    yourViewGroup.addView(div2View)
    div2View.setData(divData, DivDataTag("your_unique_tag_here"))

Если все сделано без ошибок, на экране появится надпись «Hello, DivKit!».

Обработка действий пользователя

Чтобы сделать интерфейс интерактивным, добавьте обработку действия. Для примера превратим текст в интерактивную кнопку, при нажатии которой появится всплывающая подсказка.

Модификация JSON

В DivKit сознательно нет таких высокоуровневых сущностей, как, например, «карточка товара» или «кнопка». Кнопкой может быть любой элемент. Для этого изменим внешний вид надписи и добавим действие при нажатии:

В примере изменили внешний вид: добавили скругление углов и отступы, поменяли цвет фона и текста, добавили анимацию при нажатии, поменяли расположение текста внутри View. И главное — добавили действие при нажатии:

    "actions": [
        {
            "log_id": "button_pressed",
            "url": "notification://show-toast?text=Hello%2C%20DivKit%21"
        }
    ]

Поддержка нового действия на уровне кода в Android

Чтобы обрабатывать новые типы действий, нужно реализовать свою имплементацию DivActionHandler и добавить его в DivConfiguration.
Начнем с имплементации DivActionHandler:

class NotificationDivActionHandler(): DivActionHandler() {
    override fun handleAction(action: DivAction, view: DivViewFacade): Boolean {
        if (super.handleAction(action, view)) {
            return true
        }

        val uri = action.url?.evaluate(view.expressionResolver) ?: return false
        if (uri.authority != "show-toast" || uri.scheme != "notification") return false
        val text = uri.getQueryParameter("text") ?: return false
        
        Toast.makeText(view.view.context, text, Toast.LENGTH_LONG).show()
        return true
    }
}

Мы вызываем метод super.handleAction(action, view), чтобы действия по умолчанию продолжали работать. Если действие еще не обработано, пытаемся его определить и показать уведомление.

Теперь нужно добавить NotificationDivActionHandler() в конфигурацию:

    val configuration = DivConfiguration.Builder(imageLoader)
        .actionHandler(NotificationDivActionHandler())
        .build()

Так можно повлиять из JSON-верстки не только на состояние самой карточки, но и на все приложение.

Пример проекта

Готовый к запуску пример доступен на GitHub: минималистичное приложение с базовой интеграцией DivKit, кастомными шрифтами, обработчиком действий и расширениями (Rive, Markdown, pinch-to-zoom).

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

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

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