La API de Style es un nuevo paradigma para personalizar o "diseñar" elementos y componentes en Jetpack Compose, que tradicionalmente se realizaba a través de modificadores. Está diseñada para desbloquear una personalización más profunda y sencilla.
La API de Styles mejora la flexibilidad en los factores de forma, proporciona un mejor rendimiento y permite crear sistemas de diseño personalizados más fácilmente. Incluso si no necesitas componentes personalizados, la API de Styles tiene muchos beneficios para tu sistema de diseño.
Una distinción importante es que los estilos no reemplazan a los modificadores, pero sí actúan como reemplazo de los parámetros de diseño, como el padding y los colores. Recomendamos hacer la transición para usar estilos en lugar de parámetros para aumentar la flexibilidad y el rendimiento.
Beneficios de los estilos
- Simplifica el estilo basado en el estado: La API proporciona una forma más concisa y declarativa de definir estilos que cambian según los diferentes estados (p.ej., cuando se coloca el cursor sobre un elemento, cuando está enfocado o cuando se presiona), lo que reduce significativamente el código estándar en comparación con el sistema de modificadores.
- Mejora las transiciones de estado animadas: La API de Style permite la animación integrada de las propiedades de estilo entre estados con características de rendimiento ideales, lo que evita las recomposiciones que se producen con el enfoque actual de
animateColorAsState. - Optimiza las APIs de componentes: Con la introducción de un solo parámetro de Style para la personalización, las APIs de componentes se simplifican de forma drástica y ofrecen una mayor flexibilidad.
- Menos recomposiciones que generan un mejor rendimiento en comparación con los modificadores: Los estilos se ejecutan en las fases de dibujo y diseño de Compose, y se omiten en la fase de composición.
- Conjunto más estandarizado de APIs: Un conjunto estándar de propiedades de estilo hace que cualquier componente se pueda diseñar.
Conceptos básicos
| Concepto | Descripción |
|---|---|
Style |
Es una interfaz que define la apariencia de un elemento de la IU, con un conjunto estándar de propiedades que se pueden diseñar. Es similar a los estilos de CSS y se puede personalizar de forma local o a través de un tema. Los estilos se sobrescriben entre sí. Si configuras una propiedad dos veces (p. ej., background()), se obtiene un solo valor final. |
StyleScope |
Es un alcance de receptor para la función applyStyle() dentro de un estilo. Proporciona funciones para definir propiedades visuales (padding, fondo, borde, etc.) y acceder al StyleState actual. |
StyleState |
Proporciona un estado (p.ej., isEnabled, isPressed, isChecked, estados personalizados) que puedes usar dentro de un estilo para definir un diseño condicional. |
Comienza: Agrega dependencias
Para usar las APIs en tu propio proyecto, asegúrate de usar la versión alfa más reciente de la base de Jetpack Compose. En tu archivo settings.gradle.kts, agrega el repositorio de Maven de instantáneas a la lista de repositorios que se usarán.
Ya sea en tu archivo libs.versions.toml o directamente en tu archivo app/build.gradle.kts, establece la versión de Compose en 1.11.0-alpha06:
compose = "1.11.0-alpha06"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }