In Jetpack Compose Glimmer können Sie mit der Komponente Text verschiedene Texteigenschaften wie Farbe, Schriftgröße, Schriftstil, Schriftstärke, Schriftfamilie, Buchstabenabstand und Textausrichtung festlegen.
Jetpack Compose Glimmer Text ist einzigartig, da es Farben intelligent abgleicht. Wenn beispielsweise keine Farbkorrektur festgelegt wurde, wird für den Text standardmäßig die Inhaltsfarbe verwendet, die von der nächstgelegenen Oberfläche bereitgestellt wird.
Beispiel: Textüberschrift in einem Feld erstellen
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Wichtige Punkte zum Code
- Da keine Farbe angegeben ist, wird für diesen Text die Farbe der nächstgelegenen Oberfläche verwendet, um die am besten lesbare Farbe (in der Regel Weiß) auszuwählen.
Größe
Die Typografieskala in Jetpack Compose Glimmer ist deutlich größer als das Standard-Material Design für Mobilgeräte. Stile wie TitleLarge und BodyLarge sind beide 30.sp und die Bildunterschrift ist 18.sp:
| Stil | Größe (sp) | Gewicht | Zeilenhöhe |
|---|---|---|---|
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 |
Untertitel |
18 |
650 |
24.sp |
Google Sans Flex verwenden
Google Sans Flex ist eine variable Schriftart, die speziell für KI-Brillen ausgewählt wurde und Teil von Jetpack Compose Glimmer ist. Die abgerundeten Ecken und anpassbaren Achsen der Schrift ermöglichen eine optimale optische Anpassung, sodass der Text gut lesbar bleibt. Um die Konsistenz zwischen Ihrer App und dem System für Nutzer zu verbessern, sollten Sie nach Möglichkeit Google Sans Flex für alle Texte verwenden, die auf der Brille angezeigt werden.
Wenn Sie Google Sans Flex verwenden möchten, fügen Sie die glimmer-google-fonts-Bibliothek den Abhängigkeiten Ihrer App hinzu und wenden Sie die Schriftart dann global auf GlimmerTheme an:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }