En Jetpack Compose Glimmer, el componente Text te permite establecer varias propiedades de texto, como el color, el tamaño de la fuente, el estilo de la fuente, el grosor de la fuente, la familia de fuentes, el espacio entre letras y la alineación del texto.
El texto con efecto de brillo de Jetpack Compose es único porque administra de forma inteligente la coincidencia de colores. Por ejemplo, si no se especifica ninguna anulación de color, el texto se establece de forma predeterminada en el color de contenido proporcionado por la superficie más cercana en la que se encuentra.
Ejemplo: Crea un encabezado de texto en un cuadro
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Puntos clave sobre el código
- Como no se especifica ningún color, este texto busca la superficie más cercana para elegir el mejor color legible (por lo general, blanco).
Tamaño
La escala de tipografía en Jetpack Compose Glimmer es significativamente más grande que la de Material Design estándar para dispositivos móviles. Los estilos como TitleLarge y BodyLarge son 30.sp, y el subtítulo es 18.sp:
| Estilo | Tamaño (sp) | Peso | Altura de línea |
|---|---|---|---|
titleLarge |
30 |
750 |
36.sp |
titleMedium |
24 |
750 |
28.sp |
titleSmall |
20 |
750 |
28.sp |
bodyLarge |
30 |
520 |
36.sp |
bodyMedium |
24 |
520 |
36.sp |
bodySmall |
20 |
520 |
28.sp |
leyenda |
18 |
650 |
24.sp |
Cómo usar Google Sans Flex
Google Sans Flex es una fuente variable elegida específicamente para los lentes con IA que se proporciona como parte de Jetpack Compose Glimmer. Las esquinas redondeadas y los ejes ajustables de la fuente permiten un tamaño óptico ideal, lo que garantiza que el texto siga siendo legible y fácil de leer de un vistazo. Si es posible, para mejorar la coherencia entre tu app y el sistema para los usuarios, usa Google Sans Flex para todo el texto que se muestre en los lentes de pantalla.
Para usar Google Sans Flex, agrega la biblioteca glimmer-google-fonts a las dependencias de tu app y, luego, aplica la fuente de forma global al GlimmerTheme:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }