La API de Style es un paradigma nuevo para personalizar o "aplicar diseño" a elementos y componentes en Jetpack Compose, lo que tradicionalmente se hacía a través de modificadores. Está diseñado para permitir 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 un sistema de diseño personalizado 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í a 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.
Habilidades de Android
Ver en GitHubEstilos
android skills add stylesBeneficios de los estilos
- Simplifica el diseño basado en el estado: La API proporciona una forma más concisa y declarativa de definir estilos que cambian según diferentes estados (p.ej., cuando se coloca el cursor sobre un elemento, se enfoca o 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 Style para la personalización, las APIs de componentes se simplifican de forma significativa y ofrecen una mayor flexibilidad.
- Menos recomposiciones que generan un mejor rendimiento que 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 de APIs más estandarizado: Un conjunto estándar de propiedades de estilo permite que cualquier componente tenga estilo.
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 a las que se les puede aplicar diseño. Es similar a los estilos CSS y se puede personalizar de forma local o a través de un tema. Los estilos se reemplazan entre sí. Si configuras una propiedad dos veces (p. ej., background()), se obtiene un solo valor final. |
StyleScope |
Es un alcance del receptor para la función applyStyle() dentro de un Style. Proporciona funciones para definir propiedades visuales (relleno, 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 Style para definir estilos condicionales. |
Comienza agregando 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 el 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.12.0-alpha03:
compose = "1.12.0-alpha03"
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" }