Herramientas de Compose

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Android Studio ofrece muchas funciones nuevas específicamente para Jetpack Compose. Esta herramienta adopta un enfoque centrado en el código y, al mismo tiempo, mejora la productividad de los desarrolladores sin tener que elegir entre la interfaz de diseño o el editor de código únicamente.

Una diferencia fundamental entre la IU basada en objetos View y Jetpack Compose es que Compose no depende de View para procesar sus elementos componibles. Como consecuencia de este enfoque de arquitectura, Android Studio ofrece funciones extendidas para Jetpack Compose sin que debas abrir un emulador o conectarte a un dispositivo en comparación con Views de Android, lo que permite un proceso iterativo más rápido para que los desarrolladores implementen sus diseños de IU.

Si quieres habilitar funciones específicas de Android Studio para Jetpack Compose, debes agregar estas dependencias en el archivo build.gradle de tu aplicación:

debugImplementation "androidx.compose.ui:ui-tooling:1.2.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"

Vista previa de elementos componibles

Un elemento componible está definido por una función, anotada con @Composable:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

Un elemento de texto simple que contiene las palabras "Hello World"

Para habilitar una vista previa de este elemento componible, debes crear otro elemento componible y anotado con @Composable y @Preview, emitiendo el componible que creaste inicialmente:

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

Por último, haz clic en la vista dividida (diseño/código) para abrir el panel lateral derecho en el que se mostrará tu vista previa:

Selector de "Vista dividida" de Android Studio

La vista de texto simple que se muestra en la ventana de vista previa

@Preview acepta parámetros para personalizar la forma en que lo procesará Android Studio. Puedes agregar estos parámetros de forma manual en tu código o hacer clic en el ícono de margen junto a @Preview para mostrar el selector de configuración, que te permite seleccionar y cambiar esos parámetros de configuración.

Funciones @Preview

Android Studio ofrece algunas funciones para extender vistas previas componibles. Puedes cambiar el diseño de los contenedores, interactuar con ellos o implementarlos directamente en un emulador o dispositivo.

LocalInspectionMode

Puedes leer desde el CompositionLocal de LocalInspectionMode para ver si el elemento que admite composición se renderiza en una vista previa. Eso te permite realizar acciones como mostrar una imagen de marcador de posición en la ventana de vista previa, en lugar de mostrar datos reales. Si la composición se procesa en una vista previa, LocalInspectionMode.current se evalúa como true.

if (LocalInspectionMode.current) {
    // Show this text in a preview window:
    Text("Hello preview user!")
} else {
    // Show this text in the app:
    Text("Hello $name!")
}

Modo interactivo

El modo interactivo te permite interactuar con una vista previa de manera similar a como lo harías en un dispositivo. El modo interactivo está aislado en un entorno de zona de pruebas (separado de otras vistas previas), en el que puedes hacer clic en elementos e ingresar entradas de usuario en la vista previa. La vista previa incluso reproduce animaciones. Es una forma rápida de probar distintos estados y gestos de objetos componibles, como una casilla de verificación marcada o vacía.

El modo interactivo de vista previa se ejecuta directamente en Android Studio sin la ejecución de un emulador, lo que genera algunas limitaciones:

  • No tienes acceso a la red.
  • No tienes acceso al archivo.
  • Es posible que algunas API de Context no estén completamente disponibles.

El usuario hace clic en el botón "interactivo" de la vista previa

Un video del usuario que interactúa con una vista previa

Cómo implementar una vista previa

Puedes implementar una @Preview específica en un emulador o dispositivo físico. La vista previa se implementa dentro de la misma app del proyecto que una actividad nueva, por lo que comparte los mismos contextos y permisos, lo que significa que no necesitas escribir código estándar, como solicitar un permiso, si ya se otorgó.

Haz clic en el ícono Deploy to Device junto a la anotación @Preview o en la parte superior de la vista previa. Android Studio implementará @Preview en tu dispositivo o emulador conectado.

El usuario hace clic en el botón "implementar" de la vista previa

Video del usuario que implementa una vista previa en el dispositivo

Anotaciones de vista previa múltiple

Con la vista previa múltiple, puedes definir una clase de anotación que tenga varias anotaciones @Preview con configuraciones diferentes. Si agregas esta anotación a una función de componibilidad, se renderizarán automáticamente todas las vistas previas a la vez. Por ejemplo, puedes usar esta anotación para obtener una vista previa de varios dispositivos, tamaños de fuente o temas al mismo tiempo sin repetir esas definiciones para cada elemento componible.

Para comenzar, crea tu propia clase de anotación personalizada:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

Puedes usarla para los elementos que admiten composición de la vista previa:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

Pestaña de diseño de Android Studio que muestra el elemento que admite composición con una fuente pequeña y grande

Puedes combinar anotaciones de vista previa múltiple y de vista previa normal para crear un conjunto más completo de estas. La combinación de anotaciones de vista previa múltiple no implica que se muestren todas las combinaciones diferentes. En cambio, cada anotación de vista previa múltiple actúa de manera independiente y solo renderiza sus propias variantes.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

Pestaña de diseño de Android Studio que muestra el elemento que admite composición en todas las configuraciones

Navegación por código y esquemas componibles

Puedes desplazarte por sobre una vista previa para ver los contornos del elemento componible que contiene. Cuando haces clic en un esquema componible, se activa la vista de edición para navegar a su definición.

El usuario se desplaza sobre una vista previa, lo que hace que Studio muestre los esquemas de sus elementos componibles

Cómo copiar la renderización de @Preview

Se puede copiar cada vista previa renderizada como imagen haciendo clic con el botón derecho en ella.

El usuario hace clic en una vista previa para copiarla como una imagen.

Cómo establecer un color de fondo

De forma predeterminada, tu elemento componible se mostrará con un fondo transparente. Para agregar un fondo, agrega los parámetros showBackground y backgroundColor. Ten en cuenta que backgroundColor es un Long de ARGB, no un valor Color:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

Un rectángulo verde con las palabras "Hello World"

Dimensiones

De forma predeterminada, las dimensiones de @Preview se eligen automáticamente para unir su contenido. Si deseas establecer las dimensiones de forma manual, puedes agregar los parámetros heightDp y widthDp. Ten en cuenta que esos valores ya se interpretan como Dp. No es necesario que agregues .dp al final del valor:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}

Un cuadrado amarillo con las palabras "Hello World"

Configuración regional

Para probar diferentes configuraciones regionales de usuario, debes agregar el parámetro locale:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

Un elemento de texto simple que contiene la palabra "Bonjour" con una bandera francesa

IU del sistema

Si necesitas mostrar barras de estado y de acción dentro de una vista previa, agrega el parámetro showSystemUi:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}

Una ventana de vista previa que muestra una actividad con el estado y barras de acción

@PreviewParameter

Puedes pasar datos de muestra a la función Composable Preview agregando un parámetro con la anotación @PreviewParameter.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}

Para proporcionar los datos de muestra, crea una clase que implemente PreviewParameterProvider y muestre los datos de muestra como una secuencia.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}

Se mostrará una vista previa renderizada por elemento de datos en la secuencia:

Puedes usar la misma clase de proveedor para varias vistas previas. Si es necesario, limita la cantidad de vistas previas que se renderizarán configurando el parámetro de límite.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}

Modo de IU

El parámetro uiMode puede tomar cualquiera de las constantes Configuration.UI_* y te permite cambiar el comportamiento de la vista previa según corresponda. Por ejemplo, puedes configurar la vista previa en Modo nocturno para la reacción del tema.

IU de la vista previa de Compose

Acciones del editor

Android Studio también cuenta con funciones dentro del área de edición para mejorar tu productividad con Jetpack Compose.

Plantillas dinámicas

Android Studio agregó estas plantillas dinámicas relacionadas con Compose, que te permiten ingresar fragmentos de código para su inserción rápida escribiendo la abreviatura correspondiente de la plantilla:

  • comp para configurar una función @Composable
  • prev para crear una función que admite composición @Preview
  • paddp para agregar un modificador padding en dp
  • weight para agregar un modificador weight
  • W, WR, WC para rodear el elemento componible actual con un contenedor Box, Row o Column

Íconos de margen

Los íconos de margen son acciones contextuales visibles en la barra lateral, junto a los números de línea. Android Studio presenta varios íconos de margen específicos de Jetpack Compose para facilitar tu experiencia de desarrollador.

Cómo implementar una vista previa

Puedes implementar un objeto @Preview en el emulador o dispositivo físico directamente desde el ícono de margen:

El usuario hace clic en el ícono de margen de implementación de una función de vista previa y, luego, implementa la vista previa en el dispositivo

Selector de color

Cada vez que se define un color dentro o fuera de un elemento componible, su vista previa se muestra en el canal. Para cambiar el color mediante el selector de color, haz clic en él de la siguiente manera:

El usuario hace clic en un color dentro del margen, lo que muestra un selector de color

Selector de recursos de imagen

Cuando un elemento de diseño, un vector o una imagen se define dentro o fuera de un elemento componible, su vista previa se muestra en el margen. Puedes cambiarla desde el selector de recursos de imágenes haciendo clic en él de la siguiente manera:

El usuario hace clic en un ícono del margen, lo que muestra el selector de recursos

Desarrollo de código iterativo

Como desarrollador de contenido para dispositivos móviles, sueles crear la UI de tu app paso a paso en lugar de hacerlo todo a la vez. Android Studio adopta este enfoque con Jetpack Compose mediante herramientas que no requieren una compilación completa para inspeccionar, modificar los valores y verificar el resultado final.

Edición de literales en tiempo real

Android Studio puede actualizar en tiempo real algunos literales constantes que se usan en elementos componibles dentro de vistas previas, el emulador y el dispositivo físico. Estos son algunos tipos compatibles:

  • Int
  • String
  • Color
  • Dp
  • Boolean

Video del usuario que cambia literales del código fuente, y la vista previa se actualiza de forma dinámica

Puedes ver literales de constantes que activan actualizaciones en tiempo real sin el paso de compilación si habilitas decoraciones literales a través del indicador de IU de edición en vivo de literales:

Habilitación de la edición en vivo de literales

Ediciones en vivo

Puedes acelerar tu experiencia de desarrollo de Compose con la edición en vivo en los lanzamientos Canary de Android Studio Flamingo. Edición en vivo es una versión más potente que la de literales. La funcionalidad te permite ver el efecto de las actualizaciones de los elementos que admiten composición en tiempo real mediante la implementación automática de cambios de código en un emulador o dispositivo.

Descripción general de la IU de Ediciones en vivo

Apply Changes

Apply Changes te permite actualizar código y recursos sin tener que volver a implementar la app en un emulador o dispositivo físico (con algunas limitaciones).

Siempre que agregues, modifiques o borres elementos componibles, puedes hacer clic en este botón para actualizar la app sin tener que volver a implementarla:

Un usuario que hace clic en el botón &quot;Apply Changes&quot;

Inspector de diseño

El Inspector de diseño te permite inspeccionar un diseño de Compose dentro de la app en ejecución en un emulador o dispositivo físico.

Obtén el recuentos de recomposiciones

Puedes usar el Inspector de diseño para consultar la frecuencia con la que se omite o se vuelve a componer un elemento que admite composición. Si la IU tiene un rendimiento deficiente, esto suele deberse a un error de programación que obliga a que se recomponga en exceso. Por otro lado, algunos errores de programación pueden evitar que la IU se recomponga cuando sea necesario, lo que significa que los cambios de la IU no se muestran en la pantalla. El seguimiento de las recomposiciones puede ayudar a encontrar ambos tipos de problemas.

Para hacer un seguimiento de la recomposición, activa Mostrar recuentos de recomposiciones en las opciones de vista:

Cantidades de recomposiciones habilitadas en las opciones de vista.

Una vez que la habilites, el inspector de diseño mostrará los recuentos de recomposiciones a la izquierda y las recomposiciones omitidas a la derecha:

Recuentos de recomposición que se muestran en el Inspector de diseño

Si haces doble clic en un elemento que admite composición en el Inspector de diseño, se te redireccionará al código correspondiente para su análisis.

Animaciones

Android Studio te permite inspeccionar animaciones desde vistas previas interactivas de Animation. Si se describe una animación en una vista previa componible, puedes inspeccionar el valor exacto de cada valor animado en un momento determinado, pausar la animación, repetirla, adelantarla o ralentizarla para ayudarte a depurarla durante sus transiciones:

Vuelve a reproducir, arrastra y ralentiza AnimatedVisibility

También puedes usar la vista previa de Animation para visualizar el gráfico de las curvas de animación, lo que es útil a fin de garantizar que los valores de la animación se realicen de manera correcta:

Visualización de una curva de animación

La vista previa de Animation detecta automáticamente las animaciones inspeccionables, que se indican mediante el ícono de Start Animation Inspection Ícono Run.

Ícono de Start Animation Inspection en la ventana de diseño

Actualmente, la vista previa de Animation es compatible con la API de updateTransition. Para usar esta vista previa con updateTransition, usa Compose 1.0.1 o una versión posterior.

Cómo habilitar funciones experimentales

Algunas funciones solo están disponibles después de habilitarlas de forma manual en la sección experimental de las preferencias de Android Studio: File > Settings > Experimental (Android Studio > Preferences > Experimental en Mac).

Herramientas de Compose habilitadas en las preferencias experimentales de Android Studio