La API de Style es un nuevo paradigma para personalizar o "dar estilo" a elementos y componentes en Jetpack Compose, lo que tradicionalmente se ha hecho a través de modificadores. Está diseñado para desbloquear una personalización más profunda y sencilla.
La API de Styles mejora la flexibilidad en todos los factores de forma, proporciona un mejor rendimiento y permite crear sistemas de diseño personalizados con mayor facilidad. 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. Te recomendamos que realices la transición para usar estilos en lugar de parámetros y, así, aumentar la flexibilidad y el rendimiento.
Beneficios de los estilos
- Simplifica el diseño basado en estados: La API proporciona una forma más concisa y declarativa de definir diseños que cambian según diferentes estados (p.ej., cuando se coloca el cursor sobre un elemento, cuando se enfoca o cuando se presiona), lo que reduce significativamente el código repetitivo 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 diseño para la personalización, las APIs de componentes se simplifican de forma drástica y ofrecen mayor flexibilidad.
- Menos recomposiciones que generan un mejor rendimiento en los modificadores: Los estilos se ejecutan en las fases de diseño y dibujo 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 permite aplicar estilo a cualquier componente.
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 con estilo. Es similar a los estilos CSS y se puede personalizar de forma local o a través de un tema. Los estilos se sobrescriben entre sí. Si se configura una propiedad dos veces (p. ej., background()), se genera un solo valor final. |
StyleScope |
Es un alcance del receptor para la función applyStyle() dentro de un objeto Style. Proporciona funciones para definir propiedades visuales (padding, fondo, borde, etcétera) y acceder al StyleState actual. |
StyleState |
Proporciona estados (p.ej., isEnabled, isPressed, isChecked, estados personalizados) que puedes usar dentro de un objeto Style para definir un diseño condicional. |
Primeros pasos: Agrega dependencias
Para usar las APIs en tu propio proyecto, asegúrate de usar la versión alfa más reciente de Jetpack Compose Foundation. En tu archivo settings.gradle.kts, agrega el repositorio de Maven de instantáneas a la lista de repositorios que se usarán.
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" }