No Glimmer do Jetpack Compose, o Text componente permite definir várias propriedades de texto, como cor, tamanho, estilo, peso, família, espaçamento entre letras e alinhamento.
O texto do Glimmer do Jetpack Compose é exclusivo porque gerencia de forma inteligente a correspondência de cores. Por exemplo, se nenhuma substituição de cor for especificada, o texto será definido como a cor do conteúdo fornecida pela superfície mais próxima.
Exemplo: criar um título de texto em uma caixa
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Pontos principais sobre o código
- Como nenhuma cor é especificada, esse texto procura a superfície mais próxima para escolher a melhor cor legível (geralmente branca).
Dimensionamento
A escala tipográfica no Glimmer do Jetpack Compose é significativamente maior do que o Material Design padrão para dispositivos móveis. Estilos como TitleLarge e BodyLarge são 30.sp, e a legenda é 18.sp:
| Estilo | Tamanho (sp) | Peso | Altura da linha |
|---|---|---|---|
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 |
caption |
18 |
650 |
24.sp |
Usar o Google Sans Flex
Google Sans Flex é uma fonte variável escolhida especificamente para óculos de IA e fornecida como parte do Glimmer do Jetpack Compose. Os cantos arredondados e os eixos ajustáveis da fonte permitem o dimensionamento óptico ideal, garantindo que o texto permaneça visível e legível. Se possível, para melhorar a consistência entre o app e o sistema, use o Google Sans Flex para todo o texto exibido nos óculos.
Para usar o Google Sans Flex, adicione a biblioteca glimmer-google-fonts às
dependências do app e aplique a fonte globalmente ao GlimmerTheme:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }