Texto no Jetpack Compose Glimmer

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Óculos de exibição

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)
    }
}