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")
}
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:
Puedes agregar parámetros de forma manual en tu código para personalizar la forma en que Android Studio procesa @Preview.
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
Contextno estén completamente disponibles.
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.
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")
}
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") } }
}
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.
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.
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")
}
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")
}
}
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))
}
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")
}
@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.
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:
comppara configurar una función@Composableprevpara crear una función que admite composición@Previewpaddppara agregar un modificadorpaddingen dpweightpara agregar un modificadorweightW,WR,WCpara rodear el elemento componible actual con un contenedorBox,RowoColumn
Í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:
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:
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:
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:
IntStringColorDpBoolean
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:
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.
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:
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:
.
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:
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:
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:
La vista previa de Animation detecta automáticamente las animaciones inspeccionables, que se indican mediante el ícono de Start Animation Inspection 
.
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).
