Android Academy · Lección

Previsualizaciones y Hot Reload

Itere rápidamente con las previsualizaciones de Compose

Previsualizaciones y Hot Reload es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Vistas previas en tiempo de diseño

Una de las mejores características de Compose es @Preview: puede ver un composable renderizado dentro de Android Studio sin ejecutar la aplicación en un dispositivo o emulador.

La anotación @Preview

Añada @Preview encima de una función @Composable. Android Studio la renderiza en el panel de diseño.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

Las vistas previas no necesitan parámetros

Una función de vista previa debe poder llamarse con ningún argumento. Por eso, debe crear un composable envoltorio que proporcione datos de ejemplo y, después, mostrar ese envoltorio en la vista previa.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Nombres de las funciones de vista previa

Por convención, los envoltorios de vista previa reciben el nombre del composable seguido del sufijo Preview, por ejemplo, GreetingPreview. Así resulta fácil encontrarlos y se indica que no se usan en producción.

Parámetros de vista previa

@Preview acepta argumentos para ajustar la representación, como showBackground, name y widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

De forma predeterminada, una vista previa tiene un fondo transparente. Pase showBackground = true para renderizar una superficie opaca, lo que facilita ver el texto durante el diseño.

Varias vistas previas

Puede apilar varias anotaciones @Preview en una función para ver distintas configuraciones una al lado de otra; por ejemplo, una anchura pequeña y otra grande.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

Vista previa interactiva

Android Studio ofrece un Interactive Mode para las vistas previas. Permite pulsar botones y activar cambios de estado directamente en la vista previa, sin implementar la aplicación.

Live Edit / Hot Reload

Con Live Edit, las modificaciones en los cuerpos de los composables aparecen casi al instante en la vista previa e incluso en un dispositivo en ejecución; no es necesario realizar una compilación completa. Esto acelera enormemente el ciclo de diseño.

Las vistas previas son gratuitas

Las funciones de vista previa se eliminan de la compilación de lanzamiento, por lo que añadir muchas vistas previas no tiene ningún coste en tiempo de ejecución. Úselas sin restricciones para documentar y probar visualmente cada composable.

Un ejemplo completo

Aquí tiene un composable y su vista previa. Abra el panel de diseño para verlo renderizado al instante.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

Comprobación rápida

¿Por qué una función @Preview no debe aceptar parámetros?

Repaso

Las vistas previas aceleran el desarrollo con Compose:

Añada @Preview encima de un composable sin argumentos.
Use opciones como showBackground y widthDp.
Apile varias vistas previas; use Interactive Mode y Live Edit para iterar rápidamente.

Preguntas frecuentes

¿La lección «Previsualizaciones y Hot Reload» es gratis?

Sí — el texto completo de «Previsualizaciones y Hot Reload» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Previsualizaciones y Hot Reload»?

Itere rápidamente con las previsualizaciones de Compose Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Previsualizaciones y Hot Reload»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy