Использование Live Preview в UIKit

С момента реализации Live Preview в Xcode я обнаружил, что это очень эффективный и удобный метод для тестирования и отладки моего кода SwiftUI. Возможность предварительного просмотра моих анимаций в режиме реального времени значительно сократила время разработки, что делает его идеальным инструментом для моей работы со SwiftUI. Я больше не полагаюсь на симуляторы или физические устройства для тестирования своего кода, так как Live Preview предлагает удобный и интуитивно понятный интерфейс.

UIKit — мощный инструмент для создания многофункциональных и интерактивных пользовательских интерфейсов. Может быть сложно быстро повторить дизайн и макет ваших представлений без создания и запуска приложения на симуляторе или устройстве. Вот тут-то и появляется Live Preview.

Чтобы использовать Live Preview с UIKit, мы должны обернуть наши UIViewControllers и UIViews в представления SwiftUI. Это может быть достигнуто с помощью протоколов UIViewControllerRepresentableи UIViewRepresentable.

UIViewControllerRepresentableи UIViewRepresentableявляются протоколами в структуре SwiftUI, которые позволяют вам представлять UIViewControllerили UIView, соответственно, в среде SwiftUI. Эти протоколы определяют методы и свойства, необходимые для создания или управления UIViewControllerэкземпляром UIViewв среде SwiftUI.

Настройка обертки

Мы создадим новый файл и назовем его LivePreview. Мы импортируем структуру SwiftUI и определим две структуры с именами UIViewControllerPreviewи UIViewPreviewв этом файле. Каждый соответствует UIViewControllerRepresentableи UIViewRepresentableсоответственно

UIViewControllerPreviewи UIViewPreviewявляются универсальными структурами, которые принимают параметр типа ViewControllerи Viewсоответствуют протоколу UIViewControllerи соответственно.UIView

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable
struct UIViewPreview<View: UIView>: UIViewRepresentable

Подпись UIViewControllerRepresentable выглядит следующим образом:

protocol UIViewControllerRepresentable : View where Self.Body == Never

• makeUIViewController(context:) -> UIViewController: этот метод используется для создания экземпляра UIViewController, который будет использоваться в предварительном просмотре.
• updateUIViewController(_:context:): этот метод используется для обновления экземпляра UIViewController при изменении иерархии представлений SwiftUI.

Подпись UIViewControllerRepresentable выглядит следующим образом:

protocol UIViewRepresentable : View where Self.Body == Never

• makeUIView(context:) -> UIView: этот метод используется для создания UIViewэкземпляра, который будет использоваться в предварительном просмотре.
• updateUIView(_:context:): этот метод используется для обновления UIViewэкземпляра при изменении иерархии представлений SwiftUI.

Реализация

Мы настроим обязательную функцию в нашей структуре, о которой я упоминал ранее, как показано ниже.

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
    let viewController: ViewController

    init(_ viewController: ViewController) {
        self.viewController = viewController
    }

    func makeUIViewController(context: Context) -> ViewController {
        viewController
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) { }
}

struct UIViewPreview<View: UIView>: UIViewRepresentable {
    let view: View

    init(_ view: View) {
        self.view = view
    }

    func makeUIView(context: Context) -> UIView {
        return view
    }

    func updateUIView(_ view: UIView, context: Context) {
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }
}

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        UIViewControllerPreview(ViewController())
    }
}

После того, как это настроено, мы можем открыть режим холста, нажав Command + Option + Return. Это откроет Canvas в окне помощника редактора, что позволит нам увидеть предварительный просмотр нашего ViewController в реальном времени.

Когда мы вносим изменения в наш ViewController, например, обновляем цвет фона его представления, как на приведенном выше gif-файле, которым я поделился, мы можем видеть, как эти изменения отражаются в режиме реального времени в предварительном просмотре в реальном времени.

Таким образом, заключив наш UIKit UIViewControllerв структуру, соответствующую UIViewControllerRepresentableпротоколу, мы можем расширить Live Preview на наш UIViewController, что позволит повысить эффективность рабочего процесса при разработке и итерации нашего пользовательского интерфейса.

Если вам понравилось читать эту статью и она оказалась полезной, пожалуйста, похлопайте ей и подписывайтесь на меня, чтобы получать больше подобного контента в будущем ❤️