Integrar UIKit dentro de SwiftUI es una habilidad clave cuando trabajas en proyectos iOS que combinan ambos frameworks o que dependen principalmente del framework tradicional. Aquí aprendes a construir ese puente con UIViewRepresentable para reutilizar componentes nativos de UIKit en una interfaz declarativa de SwiftUI.
Por qué necesitas un puente entre UIKit y SwiftUI
UIKit es el framework tradicional para construir interfaces en iOS, mientras que SwiftUI propone un enfoque declarativo y moderno. Muchos proyectos reales mezclan ambos, así que necesitas una forma de hacerlos convivir sin reescribir todo.
La pieza central es el protocolo UIViewRepresentable. Funciona como un traductor: toma una vista escrita en UIKit y la convierte en algo que SwiftUI puede renderizar como cualquier otro View.
¿Qué es UIViewRepresentable? Es un protocolo de SwiftUI que actúa como puente para envolver vistas de UIKit y usarlas dentro de jerarquías SwiftUI. Te obliga a implementar makeUIView y updateUIView.
Cómo crear un UILabel de UIKit reutilizable en SwiftUI
El primer paso es crear una struct que herede de UIViewRepresentable. Antes de escribir código, importa los dos frameworks: import SwiftUI y import UIKit. Sin esa doble importación, el puente no compila.
Qué propiedades exponer en tu UIKitLabel
Define las propiedades que el desarrollador podrá personalizar desde SwiftUI. Para un label, las más usadas son tres:
text de tipo String para el contenido textual.textColor de tipo UIColor para el color del texto.fontSize de tipo CGFloat, que es el tipo numérico que UIKit espera para tamaños.
Estas variables actúan como parámetros globales de la estructura y luego se inyectan dentro del UILabel real.
Cómo implementar makeUIView y updateUIView
El protocolo te obliga a sobrecargar dos funciones con nombres exactos. Si te equivocas en el nombre, no funciona.
makeUIView(context:) se ejecuta una vez para construir la vista. Aquí instancias el UILabel, le asignas text, textColor, font con UIFont.systemFont(ofSize:) y defines textAlignment = .center. Devuelve el label creado.updateUIView(_:context:) se ejecuta cuando cambian los datos. Aquí actualizas las mismas propiedades del UILabel recibido para reflejar los nuevos valores.
Con eso ya tienes un componente que se invoca igual que un Text nativo, pero por debajo es UIKit puro.
Cómo envolver un UIImageView de UIKit dentro de SwiftUI
El mismo patrón funciona para imágenes. Crea una struct UIKitImage: UIViewRepresentable con una sola propiedad: imageName de tipo String.
Dentro de makeUIView instancias un UIImageView, le asignas la imagen con UIImage(named: imageName) y configuras dos propiedades clave:
contentMode = .scaleAspectFit para que la imagen mantenga su proporción y no se deforme.clipsToBounds = true para evitar que el contenido se desborde por los costados.
En updateUIView simplemente actualizas view.image si el nombre cambia. El tipo de retorno de makeUIView debe ser UIImageView, que es la vista de UIKit que estás envolviendo.
¿Por qué los nombres de las funciones deben ser exactos? Porque UIViewRepresentable define makeUIView y updateUIView como requisitos del protocolo. Si los renombras, Swift no reconoce que estás cumpliendo el contrato y la vista no se construye.
Cómo llamar componentes UIKit desde una vista SwiftUI
Una vez creadas las structs, las usas dentro de cualquier View de SwiftUI como si fueran nativas. Dentro de un ScrollView, por ejemplo, puedes invocar:
UIKitLabel(text: "Hola desde UIKit", textColor: .blue, fontSize: 30) con un .frame(height: 50) opcional.UIKitImage(imageName: "Deadpool") apuntando a una imagen del catálogo Assets.
Visualmente conviven sin diferencia con un Text("Esto es un texto nativo en SwiftUI") con .font(.title) y .foregroundColor(.red), o con un Image(systemName: "star.fill") redimensionado a 60 por 60 unidades y color amarillo.
Qué cuidados tener al construir el puente
Hay tres detalles que marcan la diferencia entre un componente que funciona y uno que rompe la build:
- Heredar siempre de
UIViewRepresentable en la struct envoltorio.
- Implementar
makeUIView y updateUIView con esos nombres exactos.
- Exponer solo las propiedades que de verdad vas a usar, como
text, textColor y fontSize para labels, o imageName para imágenes.
Con esa base puedes envolver casi cualquier vista de UIKit y darle vida dentro de tus pantallas SwiftUI. ¿Qué componente de UIKit te gustaría migrar primero a tu app? Cuéntame en los comentarios.
