--- metadata: - name: generator content: Diplodoc Platform v5.50.3 alternate: - https://divkit.tech/docs/en/quickstart/ios.md - https://divkit.tech/docs/ru/quickstart/ios.md --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt # Инструкция для iOS ## Конфигурация библиотеки и отрисовка первой DivView ### Настройка зависимостей Добавьте в проект зависимость от DivKit с помощью одного из менеджеров: - [SPM](https://github.com/apple/swift-package-manager) — см. файл [Package.swift](https://github.com/divkit/divkit-ios/blob/main/Package.swift). - cocoapods — добавьте в Podfile строку: ```translate=no source 'https://github.com/divkit/divkit-ios.git' ``` Последнюю версию библиотеки можно узнать на [странице релизов](https://github.com/divkit/divkit/releases). ### Создание DivKitComponents Перед тем как создавать `DivView`, нужно настроить ее зависимости `DivKitComponents`. По умолчанию никакие параметры передавать не нужно. Со списком параметров можно ознакомиться в файле [DivKitComponents.swift](https://github.com/divkit/divkit-ios/blob/main/DivKit/DivKitComponents.swift#L51-L91). Для простого примера возьмем `DivKitComponents` по умолчанию. ```Swift translate=no let divkitComponents = DivKitComponents() ``` ### Настройка кэширования изображений Для улучшения производительности при работе с изображениями можно настроить in-memory кэширование. Это особенно полезно в сценариях с частым повторным использованием одних и тех же изображений: ```Swift translate=no let holderFactory: DivImageHolderFactory = ... let divkitComponents = DivKitComponents( imageHolderFactory: holderFactory.withInMemoryCache(imageCountLimit: 20) ) ``` Параметр `imageCountLimit` позволяет ограничить количество кэшированных изображений для оптимального использования памяти. ### Подготовка данных перед показом в DivView Верстка в DivKit состоит из двух основных блоков — шаблоны и сама карточка. Они могут приходить как отдельно друг от друга, так и быть в одном JSON файле. Для примера выведем на экран небольшой текст: ```Swift translate=no let cardText = """ { "card": { "log_id": "text", "states": [ { "state_id": 0, "div": { "type": "text", "text": "Hello, DivKit!" } } ] } } """ ``` В качестве источников данных для карточки можно использовать словарь (`[String: Any]`), байтовый буфер (`Data`) или корневую структуру (`DivData`). Впоследствии `DivView` приведет эти типы к `DivData`. Для простоты воспользуемся `Data`. ```Swift translate=no private let jsonData: Data = """ { "card": { "log_id": "text", "states": [ { "state_id": 0, "div": { "type": "text", "text": "Hello, DivKit!" } } ] } } """.data(using: .utf8)! ``` ### Инициализация DivView ### UIKit ```Swift translate=no let divView = DivView(divKitComponents: divkitComponents) divView.setSource(DivViewSource(kind: .data(jsonData), cardId: "ExampleCard")) ``` ### SwiftUI ```Swift translate=no DivHostingView(divkitComponents: divKitComponents, source: DivViewSource(kind: .data(jsonData), cardId: "ExampleCard")) ``` `cardId` — уникальный идентификатор карточки. По нему DivKit группирует внутренние сущности. Должен быть уникален для разных карточек. Чтобы при размещении карточки узнать ее ожидаемые размеры, запросите у `DivView` параметр `cardSize`: ```Swift translate=no divView.cardSize?.sizeFor(parentViewSize: parentViewSize) ``` Если все сделано без ошибок, на экране появится надпись «Hello, DivKit!». {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Обработка действий пользователя Чтобы сделать интерфейс интерактивным, добавьте обработку [действия](https://divkit.tech/docs/ru/concepts/interaction.md). Для примера превратим текст в интерактивную кнопку, при нажатии которой появится всплывающая подсказка. ### Модификация JSON В DivKit сознательно нет таких высокоуровневых сущностей, как, например, «карточка товара» или «кнопка». Кнопкой может быть любой элемент. Для этого изменим внешний вид надписи и добавим действие при нажатии: {% cut "Посмотреть интерактивный пример" %} {% endcut %} В примере изменили внешний вид: добавили скругление углов и отступы, поменяли цвет фона и текста, добавили анимацию при нажатии, поменяли расположение текста внутри View. И главное — добавили действие при нажатии: ```translate=no "actions": [ { "log_id": "button_pressed", "url": "notification://show-toast?text=Hello%2C%20DivKit%21" } ] ``` ### Поддержка нового действия на уровне кода в iOS Чтобы обрабатывать новые типы действий, нужно реализовать свою имплементацию `DivUrlHandler` и добавить его в `DivKitComponents`. ```Swift translate=no 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`: ```Swift translate=no let urlHandler = NotificationUrlHandler(presentingViewController: self) let divkitComponents = DivKitComponents(urlHandler: urlHandler) ``` Так можно повлиять из JSON-верстки не только на состояние самой карточки, но и на все приложение. ![](../_images/quickstart/hello-divkit-ios.gif =250x) ## Примеры проектов Готовые к запуску проекты доступны на [GitHub](https://github.com/divkit/divkit/tree/main/client/ios/Samples): - **[UIKitIntegration](https://github.com/divkit/divkit/tree/main/client/ios/Samples/UIKitIntegration)** — интеграция DivKit в UIKit-приложение: встраивание `DivView` в `UIViewController`, обработка кастомных действий через `DivUrlHandler`, использование расширений (например, pinch-to-zoom). - **[SwiftUIIntegration](https://github.com/divkit/divkit/tree/main/client/ios/Samples/SwiftUIIntegration)** — интеграция DivKit в SwiftUI-приложение через `DivHostingView`. - **[CollectionViewSample](https://github.com/divkit/divkit/tree/main/client/ios/Samples/CollectionViewSample)** — отображение нескольких DivKit-карточек в `UICollectionView` с использованием `DivViewPreloader` для предзагрузки и вычисления размеров ячеек до отрисовки. ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)