0Pricing
Android Academy · Lección

Previsualizar su interfaz

Use @Preview para iterar rápidamente

Previsualizar su interfaz es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 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.

Por qué son útiles las vistas previas

Compilar y ejecutar una aplicación en un dispositivo lleva tiempo. Compose ofrece una forma más rápida de ver su interfaz de usuario: la vista previa.

Una vista previa representa un composable directamente dentro de Android Studio, para que pueda comprobar el diseño sin iniciar la aplicación completa en un emulador o teléfono.

La anotación @Preview

Para obtener una vista previa de un composable, debe crear una función independiente y marcarla con @Preview. Android Studio mostrará el resultado representado en el panel de diseño.

La propia función de vista previa también es un composable, por lo que incluye @Preview y @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Las vistas previas no aceptan parámetros

Una función de vista previa no debe aceptar parámetros. Compose necesita llamarla por su cuenta, por lo que no puede proporcionarle argumentos.

Por eso se crea un contenedor: la vista previa llama a su composable real y le pasa datos de ejemplo para que los muestre.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Nombrar las funciones de vista previa

Una convención habitual consiste en nombrar la vista previa a partir del composable que muestra y terminar el nombre en Preview. Para Greeting, escribiría GreetingPreview.

Así resulta evidente qué vista previa corresponde a cada composable, especialmente cuando el archivo crece.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Asignar un nombre a una vista previa

Puede etiquetar una vista previa con el parámetro name. Este título aparece encima de la vista previa representada en Android Studio.

Los nombres descriptivos facilitan distinguir varias vistas previas de un vistazo.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Mostrar el fondo

De forma predeterminada, una vista previa puede representarse sobre un fondo transparente. Establezca showBackground = true para dibujar una superficie sólida detrás de su composable.

Esto facilita mucho evaluar el espaciado y los colores en el panel de diseño.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Varias vistas previas a la vez

Puede añadir varias anotaciones @Preview a una función o escribir varias funciones de vista previa. Cada una se representa por separado.

Esto resulta útil para comprobar la misma interfaz de usuario con distintos datos de ejemplo, como un nombre corto y uno largo.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Obtener vistas previas de distintos tamaños

Los parámetros widthDp y heightDp establecen el tamaño del lienzo de la vista previa. Esto le permite probar el aspecto del diseño en un área pequeña o grande.

Ajustar el tamaño de la vista previa ayuda a detectar texto que se ajusta de forma poco adecuada o contenido que se desborda.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Vistas previas del modo oscuro

Puede obtener una vista previa del aspecto de su interfaz de usuario con el tema oscuro mediante el parámetro uiMode configurado en el modo nocturno. Esto permite detectar colores que no se ven bien sobre fondos oscuros.

Comprobar pronto las vistas previas clara y oscura evita sorpresas más adelante.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Vistas previas interactivas y en tiempo real

Android Studio puede actualizar la vista previa mientras escribe, de modo que los cambios aparecen casi al instante. También hay un modo interactivo que permite hacer clic sin realizar una compilación completa.

Las vistas previas no sustituyen la ejecución de la aplicación, pero hacen que diseñar pantallas sea mucho más rápido.

Las vistas previas solo sirven para depurar

Las funciones de vista previa son herramientas de desarrollo. No forman parte de la aplicación distribuida ni serán visibles para los usuarios.

Por tanto, puede añadir tantas vistas previas como quiera con datos de ejemplo. Solo afectan a lo que ve en el IDE.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Comprobación rápida

Repasemos una regla importante sobre las funciones de vista previa.

Resumen

Ha aprendido que @Preview representa un composable dentro de Android Studio, sin necesidad de un dispositivo. Las funciones de vista previa no aceptan parámetros, por lo que envuelven su composable real con datos de ejemplo.

Entre las opciones útiles se incluyen name, showBackground, widthDp, heightDp y uiMode para el modo oscuro. Las vistas previas son herramientas exclusivas de depuración. A continuación, combinará todo para crear una tarjeta de perfil real.

Preguntas frecuentes

¿La lección «Previsualizar su interfaz» es gratis?

Sí — el texto completo de «Previsualizar su interfaz» 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 «Previsualizar su interfaz»?

Use @Preview para iterar rápidamente 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 3 de 4.

¿Cuánto tiempo toma la lección «Previsualizar su interfaz»?

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

  1. Qué es un Composable
  2. Conceptos básicos de Text y Column
  3. Previsualizar su interfaz
  4. Crear una tarjeta de perfil
← Volver a Android Academy