Usando la vista previa en vivo en UIKit

Desde la implementación de Live Preview en Xcode, descubrí que es un método muy eficiente y conveniente para probar y depurar mi código SwiftUI. La capacidad de obtener una vista previa de mis animaciones en tiempo real ha reducido drásticamente el tiempo de desarrollo, lo que la convierte en una herramienta ideal para mi trabajo con SwiftUI. Ya no confío en simuladores o dispositivos físicos para probar mi código, ya que Live Preview ofrece una experiencia fluida e intuitiva.

UIKit es una poderosa herramienta para crear interfaces de usuario ricas e interactivas. Puede ser difícil iterar rápidamente en el diseño y el diseño de sus vistas sin compilar y ejecutar la aplicación en un simulador o dispositivo. Ahí es donde entra en juego la vista previa en vivo.

Para usar Live Preview con UIKit, debemos envolver nuestros UIViewControllers y UIViews en las vistas de SwiftUI. Esto se puede lograr mediante el uso de los protocolos UIViewControllerRepresentabley UIViewRepresentable.

UIViewControllerRepresentabley UIViewRepresentableson protocolos en el marco SwiftUI que le permiten representar UIViewControllero UIView, respectivamente, en un entorno SwiftUI. Estos protocolos definen los métodos y las propiedades necesarios para crear y administrar una instancia UIViewControllero UIViewen un entorno de SwiftUI.

Configuración del envoltorio

Crearemos un nuevo archivo y lo llamaremos LivePreview. Importaremos el marco SwiftUI y definiremos dos estructuras nombradas UIViewControllerPreviewy UIViewPreviewdentro de este archivo. Cada uno conforme a UIViewControllerRepresentabley UIViewRepresentablerespectivamente

UIViewControllerPreviewy UIViewPreviewson estructuras genéricas que toman un parámetro de tipo ViewControllery Viewque se ajustan al protocolo UIViewControllery UIViewrespectivamente.

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

La firma de UIViewControllerRepresentable es como a continuación:

protocol UIViewControllerRepresentable : View where Self.Body == Never

• makeUIViewController(context:) -> UIViewController: este método se usa para crear la instancia de UIViewController que se usará en la vista previa.
• updateUIViewController(_:context:): este método se usa para actualizar la instancia de UIViewController cuando cambia la jerarquía de vistas de SwiftUI.

La firma de UIViewControllerRepresentable es como a continuación:

protocol UIViewRepresentable : View where Self.Body == Never

• makeUIView(context:) -> UIView: este método se utiliza para crear la UIViewinstancia que se utilizará en la vista previa.
• updateUIView(_:context:): este método se usa para actualizar la UIViewinstancia cuando cambia la jerarquía de vistas de SwiftUI.

Implementación

Configuraremos la función obligatoria en nuestra estructura que mencioné antes como a continuación.

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())
    }
}

Una vez que esto esté configurado, podemos abrir el modo Canvas haciendo clic en Comando + Opción + Retorno. Esto abrirá Canvas en la ventana del editor asistente, permitiéndonos ver una vista previa en vivo de nuestro ViewController.

A medida que hacemos cambios en nuestro ViewController, como actualizar el color de fondo de su vista, como en el gif anterior, que compartí, podemos ver esos cambios reflejados en tiempo real dentro de la vista previa en vivo.

En resumen, al envolver nuestro UIKit UIViewControlleren una estructura que se ajusta al UIViewControllerRepresentableprotocolo, podemos extender Live Preview a nuestro UIViewController, lo que permite un flujo de trabajo más eficiente al diseñar e iterar en nuestra interfaz de usuario.

Si disfrutaste leyendo este artículo y lo encontraste útil, considera darle algunos aplausos y sígueme para obtener más contenido como este en el futuro ❤️