[TIL] SwiftUI in UIKit & UIKit in SwiftUI

[samsung-ga]

SwiftUI in UIKit

• UIHostingController 이용

import UIKit
import SwiftUI

// ✅ ContentView는 스유
class ViewController: UIViewController {

    let contentView = UIHostingController(rootView: ContentView())
    override func viewDidLoad() {
        super.viewDidLoad()
        addChild(contentView)
        view.addSubview(contentView.view)

        contentView.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.view.topAnchor.constraint(equalTo: view.topAnchor),
            contentView.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            contentView.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            contentView.view.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
}

UIKit in SwiftUI

• UIViewController를 가져오고 싶을 때, UIViewControllerRepresentable 이용

UIViewControllerType을 이용하는 방법

• PHPickerViewController, UIPageViewController, UITableViewController 등과 같이 이미 생성되어있는 ViewController를 할당하는 방법이다.
• UIViewControllerRepresentable 프로토콜을 준수하는 struct 타입을 생성한다.
• UIViewControllerType을 지정해주고 필수 메소드 2개를 구현한다.
• 연결 완성🎉
• 하지만, 연결된 VC 내부에서 다시 이전으로 돌아가려는 동작은 전혀 되지 않는다.
• 이 때, Coordinator를 이용한다. (UIKit의 Coordinator 패턴과는 전혀 다른 개념이니까 조심!)
• SwiftUI의 Coordinator는 UIKit view controller의 delegate처럼 작동한다.

import PhotosUI
import SwiftUI
// ✅ PHPickerViewController에 대한 예제
struct ImagePicker: UIViewControllerRepresentable {
    @Binding var image: UIImage?

    func makeUIViewController(context: Context) -> PHPickerViewController {
        var config = PHPickerConfiguration()
        config.filter = .images

        let picker = PHPickerViewController(configuration: config)
        picker.delegate = context.coordinator
        return picker
    }

    func updateUIViewController(_ uiViewController: PHPickerViewController, context: Context) {

    }

    typealias UIViewControllerType = PHPickerViewController

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, PHPickerViewControllerDelegate {

        var parent: ImagePicker

        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
            picker.dismiss(animated: true)

            guard let provider = results.first?.itemProvider else { return }

            if provider.canLoadObject(ofClass: UIImage.self) {
                provider.loadObject(ofClass: UIImage.self) { image, _ in
                    self.parent.image = image as? UIImage
                }
            }
        }

    }
}

UIViewControllerType을 이용하지 않는 방법

• Stoyboard나 Custom VC를 생성해서 SwiftUI에 넣는 방법입니다.
• 데이터를 주고 받을 때는 delegate 패턴을 이용한다.

import Foundation
import SwiftUI

struct StoryboardViewController: UIViewControllerRepresentable {
    @Binding var text: String?

    func makeUIViewController(context: Context) -> some UIViewController {
        let storyboardName = String(describing: "ChildViewController")
        let storyboard = UIStoryboard.init(name: storyboardName, bundle: nil)
        let controller = storyboard.instantiateViewController(identifier: storyboardName)
        guard let child = controller as? ChildViewController else { fatalError() }
        child.delegate = self
        return controller
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

    }
}
extension StoryboardViewController: ChildDelegate {
    func pressButton() {
        text = "프로토콜을 이용한 pressButton"
    }
}

Reference

UIKit in SwiftUI

• https://medium.com/@max.codes/use-swiftui-in-uikit-view-controllers-with-uihostingcontroller-8fe68dfc523b

SwiftUI in UIKit

• https://www.swiftbysundell.com/articles/swiftui-and-uikit-interoperability-part-1/