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

Модуль compose отрисовывает JSON-вёрстку DivKit с помощью Jetpack Compose. В этой инструкции вы подключите библиотеку и выведете карточку с текстом «Hello, DivKit!».

Подключение библиотеки

Используйте Android-приложение с настроенным Jetpack Compose.

Добавьте в build.gradle.kts приложения зависимость ниже. Вместо <divkit-version> укажите нужную версию DivKit. Доступные версии Compose-рендерера перечислены в Maven Central.

dependencies {
    implementation("com.yandex.div:compose:$divKitVersion")
}

Подготовка JSON

Создайте файл src/main/assets/hello_divkit.json в модуле приложения:

{
  "card": {
    "log_id": "hello_compose",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "text",
          "text": "Hello, DivKit!"
        }
      }
    ]
  }
}

Объект card описывает карточку. Если вёрстка использует шаблоны, добавьте рядом с ним объект templates. Шаблоны нужно разобрать до создания DivData.

Минимальная конфигурация и отрисовка

Для вывода карточки нужны три объекта:

• DivData — разобранная JSON-вёрстка.
• DivConfiguration, созданная через divConfiguration {} — настройки рендерера. Для текстовой карточки достаточно настроек по умолчанию.
• DivContext — Android-контекст с конфигурацией DivKit. Передайте его в LocalContext для composable-функции DivView.

Замените содержимое MainActivity.kt следующим кодом, сохранив строку package своего приложения. Пример использует файл hello_divkit.json, созданный на предыдущем шаге.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.yandex.div.compose.DivContext
import com.yandex.div.compose.DivView
import com.yandex.div.compose.divConfiguration
import com.yandex.div.data.DivParsingEnvironment
import com.yandex.div.json.ParsingErrorLogger
import com.yandex.div2.DivData
import org.json.JSONObject

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val json = assets.open("hello_divkit.json")
            .bufferedReader()
            .use { it.readText() }
        val data = parseDivData(json)
        val configuration = divConfiguration {}
        val divContext = DivContext(baseContext = this, configuration = configuration)

        setContent {
            CompositionLocalProvider(LocalContext provides divContext) {
                DivView(
                    data = data,
                    modifier = Modifier.safeDrawingPadding().padding(16.dp)
                )
            }
        }
    }
}

private fun parseDivData(json: String): DivData {
    val document = JSONObject(json)
    val environment = DivParsingEnvironment(ParsingErrorLogger.LOG)
    document.optJSONObject("templates")?.let { environment.parseTemplates(it) }
    return DivData(environment, document.getJSONObject("card"))
}

Запустите приложение: на экране появится текст «Hello, DivKit!».

В примере JSON разбирается, а конфигурация и DivContext создаются один раз в Activity.onCreate, до вызова setContent. DivView использует готовые данные при рекомпозициях и получает DivContext через CompositionLocalProvider.

Для больших карточек перенесите чтение и разбор JSON в фоновый поток и передайте готовый DivData в DivView через состояние Compose. Не разбирайте неизменившийся JSON при каждой рекомпозиции.

Изображения и дополнительная настройка

Compose-рендерер создаёт загрузчик изображений Coil самостоятельно. Для загрузки ресурсов из сети добавьте разрешение внутрь <manifest> в AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Дополнительные возможности подключаются в блоке divConfiguration {}: actionHandler обрабатывает действия приложения, fontSourceProvider предоставляет шрифты, customViewFactories — пользовательские компоненты, а extensionHandlers — расширения. Для воспроизведения видео настройте playerFactory, для загрузки патчей — patchDownloader.

Пример интеграции

Рабочую интеграцию Compose-рендерера можно посмотреть в демоприложении DivKit. Класс ComposeRendererFacade показывает конфигурацию, создание ComposeView с DivContext и передачу данных в DivView.

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

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

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