Herramientas de Compose

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 esta dependencia en el archivo build.gradle de tu aplicación:

implementation "androidx.compose.ui:ui-tooling:1.0.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.

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ó.

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

Video del usuario que implementa una vista previa en el dispositivo

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

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 habilitando estos valores destacados:

Video de un usuario que destaca literales en tiempo real

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 "Apply Changes"

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.

Animaciones

Android Studio te permite inspeccionar animaciones desde vistas previas interactivas. 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:

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

Para habilitar el inspector de animaciones, haz clic en este botón:

Demostración de un usuario que abre el inspector de animaciones

Cómo habilitar funciones experimentales

Algunas funciones, como la vista previa interactiva y el inspector de animaciones, solo están disponibles después de habilitarlas de forma manual en la sección experimental de las preferencias de Android Studio:

Herramientas de Compose habilitadas en las preferencias experimentales de Android Studio