A maneira de demonstrar a IU escrita pelo UIKit usando o wrapper SwiftUI

Uma vez que a Apple anunciou o SwiftUI em 2019, tivemos a oportunidade de usar um dos meus recursos favoritos dele – Visualização da IU no Canvas no momento da construção. Parece ótimo, e realmente é. Mas devemos levar em conta que, infelizmente, temos que oferecer suporte aos nossos aplicativos atuais com base de código escrita em Swift e UIKit particularmente.

Então, parece que não há chance de olhar para sua interface do usuário escrita no uikit no momento da construção …

A decisão que sugiro é usar o SwiftUI PreviewProvider para embrulhar sua IU. Pode ser alcançado implementando o protocolo abaixo:

Ne xt passo é a implementação do mesmo em nosso projeto. Podemos suportar qualquer elemento que seja UIView e UIViewController herdados. E uma implementação pode ser diferente: a criação de uma nova classe com protocolo em conformidade ou extensão de UIView e UIViewController com protocolo em conformidade. Eu escolho o último: é muito mais fácil adicioná-lo em um projeto existente. Para o novo, eu recomendo fortemente o uso de novas classes.

Então, aí está a implementação:


Existe um protocolo UIElementRepresentable personalizado, que se parece com o código abaixo:

Ele também tem uma extensão para casos em que Self está em conformidade com UIViewRepresentable e UIViewControllerRepresentable. Você pode encontrá-lo no próximo arquivo:

Agora fica a questão de como reutilizá-lo rapidamente no projeto e como criar arquivos com visualizações já disponíveis. Depois de gastar algum tempo em pesquisa, decidi que a maneira mais fácil e confortável é usar snippets de código e modelos de arquivos. Parece engraçado, mas não há como criar tantos códigos em arquivos existentes com mais conforto do que com o uso de snippets.

Deixe-me dar um exemplo do que estou falando:

Muito rápido!

Para obter esses modelos, faça o seguinte:

⚠️ Aviso: se o seu xcode estiver aberto, feche-o com o atalho command + Q e reabra para ver novos snippets

Para usar UIKitWrapper em seu projeto, você pode:

Obrigado pelo seu tempo! Espero que seja útil para seus objetivos e ficaria feliz em receber seus comentários: