Vista previa de diseño

Puedes obtener una vista previa de tus componentes de Jetpack Compose en Android Studio sin necesidad de implementar tu app en un dispositivo o emulador. Puedes tener varias vistas previas de una determinada función que admita composición, cada una con una restricción de ancho y altura, escala de fuente o tema diferentes. A medida que desarrolles la app, se actualizarán las versiones de vista previa a fin de que puedas revisar los cambios de forma más rápida.

Crea una vista previa básica de diseño

Para crear una vista previa de diseño, escribe una función que admita composición y que no tome parámetros y agrega la anotación @Preview. Después de que compiles tu app, la IU de la función de vista previa aparecerá en el panel Vista previa de Studio.

Por ejemplo, supongamos que tienes una función que admite composición que muestra un saludo al usuario:

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

Para obtener una vista previa de la IU de esta función, escribe un wrapper que no tome parámetros y agrégale la anotación @Preview:

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

Se muestran una función simple que admite composición como "Hello World", una función de vista previa que llama a esa función y la ventana de vista previa que muestra la IU generada por la función de vista previa.

Figura 1: En la ventana de vista previa, se muestra la IU generada por las funciones de vista previa

Si haces clic en un elemento de la IU en la vista previa, Studio te llevará a la línea en la que se crea ese elemento. Por ejemplo, si haces clic en el texto "Hello Android!" de la ventana de vista previa, Studio te llevará a la línea Greeting() en la que se crea el elemento de texto.

Cuando cambie el código, haz clic en el botón Actualizar de la ventana de vista previa a fin de actualizar la vista previa. Es posible que debas volver a compilar tu proyecto para actualizar la vista previa. La ventana de vista previa te indicará si necesitas hacerlo.

Puedes personalizar la vista previa pasando los parámetros a la anotación @Preview. Por ejemplo, la etiqueta de la vista previa se basa de forma predeterminada en el nombre de la función de vista previa, que en este caso es PreviewGreeting. Puedes cambiar la etiqueta si pasas un parámetro name:

@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
    Greeting("Android")
}

Para obtener la lista completa de los parámetros que puedes pasar a @Preview, consulta la referencia de @Preview.

Puedes definir varias funciones de vista previa, las cuales se muestran juntas en la ventana de vista previa. Por ejemplo, puedes escribir funciones que prueben varios tipos de entrada:

@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
    Greeting("my valued friend, whom I am incapable of "
    + "greeting without using a great many words")
}

@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
    Greeting("world\nwith a line break")
}

Ventana de vista previa que muestra varias funciones de vista previa

Figura 2: Si defines varias funciones de vista previa, sus IU se mostrarán en la misma ventana de vista previa

Cómo implementar vistas previas en tu dispositivo

Para implementar una vista previa en tu dispositivo o emulador predeterminado, haz clic en el botón deploy: . Android Studio creará una nueva actividad que contenga la IU generada por esa función y la implementará en la app instalada en el dispositivo. Eso te permitirá probar la IU en un dispositivo real sin tener que reinstalar toda la app ni navegar a su ubicación.

Captura de pantalla de un dispositivo Android que muestra una función de vista previa

Figura 3: Vista previa de ComposeLongGreeting(), implementada en un dispositivo virtual

Vistas previas interactivas

Android Studio ofrece un modo de vista previa interactiva. Cuando usas ese modo, puedes hacer clic en los elementos de la IU o escribir en ellos, y la IU responderá como si se tratara de la app instalada. Para activar la vista previa interactiva, haz clic en el botón interactive, en cualquiera de tus ventanas de vista previa: . El panel de vista previa cambiará al modo interactivo para esa función de vista previa hasta que salgas del modo.

Por ejemplo, mira esta función que responde a los clics del usuario:

@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
    Button(
        onClick = { updateCount(count + 1) },
        colors = defaultButtonColors(
            backgroundColor = if (count > 5) Color.Green else Color.White
        )
    ) {
        Text("I've been clicked $count times")
    }
}
@Preview
@Composable
fun PreviewCounter() {
    val counterState = remember { mutableStateOf(0) }

    Counter(
        count = counterState.value,
        updateCount = { newCount ->
            counterState.value = newCount
        }
    )
}

La vista previa común para esta función te muestra el diseño de los elementos de la IU. Sin embargo, no responde si haces clic en el botón. En su lugar, Studio te lleva a la línea en la que se creó el elemento.

Por el contrario, cuando haces clic en el botón desde el modo de vista previa interactiva, el contador se incrementará y, cuando llegue a 6, se pondrá de color verde, como lo haría en la app en ejecución:

Ventana de vista previa que muestra una vista previa interactiva que responde a los clics

Figura 4: Cuando está en modo interactivo, la ventana de vista previa responde a los clics del usuario

Nota: El modo de vista previa interactiva no permite que tus funciones interactúen con el almacenamiento o la red del dispositivo. Si necesitas probar una funcionalidad que dependa de esas operaciones, deberás proporcionar emulaciones.