Интеграция с фреймворком UIKit

Представление карты

Представление карты в Compose Multiplatform можно реализовать с помощью компонента MKMapView из UIKit. Задайте размер компонента с помощью функций Modifier.size() или Modifier.fillMaxSize() из Compose Multiplatform:

UIKitView(
    factory = { MKMapView() },
    modifier = Modifier.size(300.dp),
)

После выполнения этого кода приложение должно выглядеть так:

Теперь рассмотрим более сложный пример. Этот код оборачивает UITextField из UIKit в Compose Multiplatform:

@OptIn(ExperimentalForeignApi::class)
@Composable
fun UseUITextField(modifier: Modifier = Modifier) {
    // Holds the state of the text in Compose
    var message by remember { mutableStateOf("Hello, World!") }

    UIKitView(
        factory = {
            // Creates a UITextField integrated with Compose state
            val textField = object : UITextField(CGRectMake(0.0, 0.0, 0.0, 0.0)) {
                @ObjCAction
                fun editingChanged() {
                    // Updates the Compose state when text changes in UITextField
                    message = text ?: ""
                }
            }
            // Adds a listener for text changes within the UITextField
            textField.addTarget(
                target = textField,
                action = NSSelectorFromString(textField::editingChanged.name),
                forControlEvents = UIControlEventEditingChanged
            )
            textField
        },
        modifier = modifier.fillMaxWidth().height(30.dp),
        update = { textField ->
            // Updates UITextField text from Compose state
            textField.text = message
        }
    )
}

• Параметр factory содержит функцию editingChanged() и слушатель textField.addTarget() для обнаружения любых изменений в UITextField.

• Функция editingChanged() аннотирована с помощью @ObjCAction, чтобы обеспечить совместимость с кодом Objective-C.

• Параметр action функции addTarget() передаёт имя функции editingChanged(), вызывая её в ответ на событие UIControlEventEditingChanged.

• Параметр update функции UIKitView() вызывается при изменении значения наблюдаемого состояния сообщения.

• Функция обновляет атрибут text объекта UITextField, чтобы пользователь видел обновлённое значение.

Изучите код этого примера в нашем примере проекта.

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

Представление камеры в Compose Multiplatform можно реализовать с помощью компонентов UIKit AVCaptureSession и AVCaptureVideoPreviewLayer.

Это позволяет приложению получать доступ к камере устройства и показывать видео с неё в режиме реального времени.

Вот пример реализации простого представления камеры:

UIKitView(
    factory = {
        val session = AVCaptureSession().apply {
            val device = AVCaptureDevice.defaultDeviceWithMediaType(AVMediaTypeVideo)!!
            val input = AVCaptureDeviceInput.deviceInputWithDevice(device, null)!!
            addInput(input)
        }
        val previewLayer = AVCaptureVideoPreviewLayer(session)
        session.startRunning()

        object : UIView() {
            override fun layoutSubviews() {
                super.layoutSubviews()
                previewLayer.frame = bounds
            }
        }.apply {
            layer.addSublayer(previewLayer)
        }
    },
    modifier = Modifier.size(300.dp)
)

Теперь рассмотрим более сложный пример. Этот код делает снимок, добавляет метаданные GPS и отображает изображение с камеры в режиме реального времени с помощью нативного UIView:

Компонуемый элемент RealDeviceCamera выполняет следующие задачи:

• Настраивает нативный предпросмотр с камеры с помощью AVCaptureSession и AVCaptureVideoPreviewLayer.

• Создаёт UIKitView, в котором размещается пользовательский подкласс UIView, отвечающий за обновление макета и встраивание слоя предпросмотра.

• Инициализирует AVCapturePhotoOutput и настраивает делегат для обработки съёмки.

• Использует CLLocationManager (через locationManager), чтобы получить координаты GPS в момент съёмки.

• Преобразует полученное изображение в UIImage, оборачивает его в PlatformStorableImage и передаёт метаданные, такие как имя, описание и местоположение GPS, с помощью onCapture.

• Отображает круглую компонуемую кнопку для запуска съёмки.

• Применяет настройки зеркального отображения при использовании фронтальной камеры, чтобы селфи выглядело привычно.

• Динамически обновляет макет предпросмотра в layoutSubviews() с помощью CATransaction, чтобы избежать анимации.

Полный код этого примера можно посмотреть в примере проекта ImageViewer.

Веб-представление

Веб-представление в Compose Multiplatform можно реализовать с помощью компонента UIKit WKWebView. Это позволяет приложению отображать веб-контент и взаимодействовать с ним в интерфейсе. Задайте размер компонента с помощью функций Modifier.size() или Modifier.fillMaxSize() из Compose Multiplatform:

UIKitView(
    factory = {
        WKWebView().apply {
            loadRequest(NSURLRequest(URL = NSURL(string = "https://www.jetbrains.com")))
        }
    },
    modifier = Modifier.size(300.dp)
)

Теперь рассмотрим более сложный пример. Этот код настраивает веб-представление с делегатами навигации и обеспечивает взаимодействие между Kotlin и JavaScript:

@Composable
fun WebViewWithDelegate(
    modifier: Modifier = Modifier,
    initialUrl: String = "https://www.jetbrains.com",
    onNavigationChange: (String) -> Unit = {}
) {
    // Creates a delegate to listen for navigation events
    val delegate = remember {
        object : NSObject(), WKNavigationDelegateProtocol {
            override fun webView(
                webView: WKWebView,
                didFinishNavigation: WKNavigation?
            ) {
                // Updates the current URL after navigation is complete
                onNavigationChange(webView.URL?.absoluteString ?: "")
            }
        }
    }
    UIKitView(
        modifier = modifier,
        factory = {
            // Instantiates a WKWebView and sets its delegate
            val webView = WKWebView().apply {
                navigationDelegate = delegate
                loadRequest(NSURLRequest(uRL = NSURL(string = initialUrl)))
            }
            webView
        },
        update = { webView ->
            // Reloads the web page if the URL changes
            if (webView.URL?.absoluteString != initialUrl) {
                webView.loadRequest(NSURLRequest(uRL = NSURL(string = initialUrl)))
            }
        }
    )
}

Компонуемый элемент WebViewWithDelegate выполняет следующие задачи:

• Создаёт стабильный объект-делегат, реализующий интерфейс WKNavigationDelegateProtocol. Этот объект сохраняется между рекомпозициями с помощью remember из Compose.

• Создаёт экземпляр WKWebView, встраивает его с помощью UIKitView и настраивает, назначая сохранённый делегат.

• Загружает начальную веб-страницу, указанную в параметре initialUrl.

• Отслеживает изменения навигации через делегат и передаёт текущий URL через обратный вызов onNavigationChange.

• Использует параметр update для отслеживания изменений запрошенного URL и соответствующей перезагрузки веб-страницы.