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

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

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

Добавьте в проект зависимость от DivKit с помощью одного из менеджеров:

SPM — см. файл Package.swift.
cocoapods — добавьте в Podfile строку:
```
source 'https://github.com/divkit/divkit-ios.git'
```

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

Создание DivKitComponents

Перед тем как создавать DivView, нужно настроить ее зависимости DivKitComponents. По умолчанию никакие параметры передавать не нужно. Со списком параметров можно ознакомиться в файле DivKitComponents.swift. Для простого примера возьмем DivKitComponents по умолчанию.

let divkitComponents = DivKitComponents()

Подготовка данных перед показом в DivView

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

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

В качестве источников данных для карточки можно использовать словарь ([String: Any]), байтовый буфер (Data) или корневую структуру (DivData). Впоследствии DivView приведет эти типы к DivData. Для простоты воспользуемся Data.

private let jsonData: Data = """
  {
      "card": {
          "log_id": "text",
          "states": [
              {
                  "state_id": 0,
                  "div": {
                      "type": "text",
                      "text": "Hello, DivKit!"
                  }
              }
          ]
      }
  }
""".data(using: .utf8)!

Инициализация DivView

let divView = DivView(divKitComponents: divkitComponents)
divView.setSource(DivViewSource(kind: .data(jsonData), cardId: "ExampleCard"))

cardId — уникальный идентификатор карточки. По нему DivKit группирует внутренние сущности. Должен быть уникален для разных карточек.

Чтобы при размещении карточки узнать ее ожидаемые размеры, запросите у DivView параметр cardSize:

divView.cardSize?.sizeFor(parentViewSize: parentViewSize)

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

Посмотреть интерактивный пример

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

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

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

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

Посмотреть интерактивный пример

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

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

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

Чтобы обрабатывать новые типы действий, нужно реализовать свою имплементацию DivUrlHandler и добавить его в DivKitComponents.

class NotificationUrlHandler: DivUrlHandler {
  private let presentingViewController: UIViewController

  init(presentingViewController: UIViewController) {
    self.presentingViewController = presentingViewController
  }

  func handle(_ url: URL, sender: AnyObject?) {
    guard url.scheme == "notification", 
    let alertText = url.queryParamValue(forName: "text") else { return }
    let alert = UIAlertController(title: alertText, message: nil,
                                   preferredStyle: .alert)

    presentingViewController.present(alert, animated: true)
  }
}

Теперь нужно добавить NotificationUrlHandler в DivKitComponents:

    let urlHandler = NotificationUrlHandler(presentingViewController: self)
    let divkitComponents = DivKitComponents(urlHandler: urlHandler)

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

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

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

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

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