Utilisation de l'aperçu en direct dans UIKit

Depuis la mise en œuvre de Live Preview dans Xcode, j'ai trouvé que c'était une méthode très efficace et pratique pour tester et déboguer mon code SwiftUI. La possibilité de prévisualiser mes animations en temps réel a considérablement réduit le temps de développement, ce qui en fait un outil idéal pour mon travail avec SwiftUI. Je ne compte plus sur des simulateurs ou des appareils physiques pour tester mon code, car Live Preview offre une expérience transparente et intuitive.

UIKit est un outil puissant pour créer des interfaces utilisateur riches et interactives. Il peut être difficile d'itérer rapidement sur la conception et la mise en page de vos vues sans créer et exécuter l'application sur un simulateur ou un appareil. C'est là que Live Preview entre en jeu.

Pour utiliser Live Preview avec UIKit, nous devons encapsuler nos UIViewControllers et UIViews dans des vues SwiftUI. Ceci peut être réalisé en utilisant les protocoles UIViewControllerRepresentableet UIViewRepresentable.

UIViewControllerRepresentableet UIViewRepresentablesont des protocoles du framework SwiftUI qui vous permettent de représenter UIViewControllerou UIView, respectivement, dans un environnement SwiftUI. Ces protocoles définissent les méthodes et les propriétés nécessaires pour créer et gérer une instance UIViewControllerou UIViewdans un environnement SwiftUI.

Configuration de l'emballage

Nous allons créer un nouveau fichier et le nommer LivePreview. Nous allons importer le framework SwiftUI et définir deux structures nommées UIViewControllerPreviewet UIViewPreviewdans ce fichier. Chacun conforme à UIViewControllerRepresentableet UIViewRepresentablerespectivement

UIViewControllerPreviewet UIViewPreviewsont des structures génériques qui prennent un paramètre de type ViewControlleret Viewqui sont respectivement conformes aux protocoles UIViewControlleret .UIView

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

La signature du UIViewControllerRepresentable est comme ci-dessous :

protocol UIViewControllerRepresentable : View where Self.Body == Never

• makeUIViewController(context:) -> UIViewController: Cette méthode est utilisée pour créer l'instance UIViewController qui sera utilisée dans l'aperçu.
• updateUIViewController(_:context:): Cette méthode est utilisée pour mettre à jour l'instance UIViewController lorsque la hiérarchie de la vue SwiftUI change.

La signature du UIViewControllerRepresentable est comme ci-dessous :

protocol UIViewRepresentable : View where Self.Body == Never

• makeUIView(context:) -> UIView: Cette méthode permet de créer l' UIViewinstance qui sera utilisée dans l'aperçu.
• updateUIView(_:context:): Cette méthode est utilisée pour mettre à jour l' UIViewinstance lorsque la hiérarchie de la vue SwiftUI change.

Mise en œuvre

Nous allons mettre en place la fonction obligatoire dans notre structure que j'ai mentionnée précédemment comme ci-dessous.

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

Une fois cela configuré, nous pouvons ouvrir le mode Canvas en cliquant sur Commande + Option + Retour. Cela ouvrira Canvas dans la fenêtre de l'éditeur assistant, nous permettant de voir un aperçu en direct de notre ViewController.

Lorsque nous apportons des modifications à notre ViewController, telles que la mise à jour de la couleur d'arrière-plan de sa vue, comme dans le gif ci-dessus, que j'ai partagé, nous pouvons voir ces modifications reflétées en temps réel dans l'aperçu en direct.

En résumé, en enveloppant notre UIKit UIViewControllerdans une structure conforme au UIViewControllerRepresentableprotocole, nous pouvons étendre l'aperçu en direct à notre UIViewController, permettant un flux de travail plus efficace lors de la conception et de l'itération sur notre interface utilisateur.

Si vous avez apprécié la lecture de cet article et que vous l'avez trouvé utile, pensez à lui donner quelques applaudissements et suivez-moi pour plus de contenu comme celui-ci à l'avenir ❤️