Решение типичных проблем

Поддержка светлой и темной темы

Есть несколько подходов при работе с различными темами.

Цветовая палитра приложения задается с клиента.

Создайте свое хранилище переменных DivVariableStorage и передайте его в DivConfiguration.

    val variableController = DivVariableController()
    val imageLoader = PicassoImageLoader(..)
    val configuration = DivConfiguration.Builder(imageLoader)
        .divVariableController(variableController)
        .build()

Затем объявите в контроллере переменную, которая будет отвечать за тему приложения app_theme, а также словарь со значениями цветов, которые будут использоваться в темной и светлой темах:

    val palette = JSONObject(""" 
        {
            "light": {
                "text_color": "#ffffff",
                "text_background": "#0077FF"
            },
            "dark": {
                "text_color": "#000000",
                "text_background": "#66ADFF"
            }
        }
    """.trimIndent())
    val pallete = Variable.DictVariable("pallete", pallete)
    val theme = Variable.StringVariable("app_theme", "light")

    variableController.putOrUpdate(pallete)
    variableController.putOrUpdate(theme)

Если тема приложения изменится, можно изменить значение переменной темы так: theme.set("dark").

Теперь в любой верстке, созданной из конфигурации, можно использовать цвета из словаря:

{
  "card": {
    "log_id": "text",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "text",
          "text": "Hello, DivKit!",
          "height": {
            "type": "fixed",
            "value": 48
          },
          "border": {
            "corner_radius": 16
          },
          "background": [
            {
              "type": "solid",
              "color": "@{getColorFromDict(palette, app_theme, 'text_background')}"
            }
          ],
          "margins": {
            "top": 20,
            "left": 20,
            "right": 20
          },
          "font_size": 14,
          "text_alignment_vertical": "center",
          "text_alignment_horizontal": "center",
          "text_color": "@{getColorFromDict(palette, app_theme, 'text_color')}"
        }
      }
    ]
  }
}

Если вы не уверены, что на всех версиях клиента в DivVariableController объявлены необходимые переменные, то для избежания ошибок можно использовать функцию getOptColorFromDict, добавив значение по умолчанию.

Сервер сам управляет цветовой палитрой.

Как и в предыдущем случае, объявите переменную app_theme в DivVariableController, но словарь с переменными объявите в самой верстке:

{
  "card": {
    "variables": [
      {
        "name": "palette",
        "type": "dict",
        "value": {
          "light": {
            "text_color": "#ffffff",
            "text_background": "#0077FF"
          },
          "dark": {
            "text_color": "#000000",
            "text_background": "#0077FF"
          }
        }
      }
    ],
    "log_id": "text",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "text",
          "text": "Hello, DivKit!",
          "height": {
            "type": "fixed",
            "value": 48
          },
          "border": {
            "corner_radius": 16
          },
          "background": [
            {
              "type": "solid",
              "color": "@{getColorFromDict(palette, app_theme, 'text_background')}"
            }
          ],
          "margins": {
            "top": 20,
            "left": 20,
            "right": 20
          },
          "font_size": 14,
          "text_alignment_vertical": "center",
          "text_alignment_horizontal": "center",
          "text_color": "@{getColorFromDict(palette, app_theme, 'text_color')}"
        }
      }
    ]
  }
}

Работа с ошибками в DivKit

Для упрощения отладки верстки на клиенте в DivKit есть индикатор с ошибками в верстке. По умолчанию он выключен. Чтобы его включить, нужно дополнительно передать параметр
visualErrorsEnabled в DivConfiguration.Builder:

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

Для примера передадим в corner_radius невалидное значение:

"border": {
    "corner_radius": "incorrect_value"
},

В этом случае на верстке появится индикатор ошибки:

При нажатии на индикатор можно посмотреть последние 25 ошибок и, если нужно, получить стактрейс:

Также ошибки можно логировать, для этого в DivConfiguration нужно передать свою реализацию интерфейса Div2Logger параметром divLogger.

Умеет ли DivKit работать с right-to-left интерфейсом?

Да, DivKit на Android по умолчанию поддерживает RTL-языки. Если по умолчанию View не развернулась, нужно указать div2View.layoutDirection = LayoutDirection.RTL.

Можно ли использовать локальные картинки при работе с DivView?

Можно. DivKit по умолчанию умеет загружать картинки из папки assets/divkit с помощью ссылки в формате divkit-asset://path/image.png.
Сам JSON будет выглядеть так:

{
  "type": "image",
  "image_url": "divkit-asset://path/image.png",
  "height": {
    "type": "match_parent"
  }
}

Также, если вы используете одну из наших реализаций DivImageLoader, вы можете использовать ссылку вида file:///android_asset/path/image.png.

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

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

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

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