В Jetpack Compose Glimmer компонент Text позволяет задавать различные свойства текста, такие как цвет, размер шрифта, стиль шрифта, толщина шрифта, семейство шрифтов, межбуквенный интервал и выравнивание текста.
Jetpack Compose Glimmer Text – уникальный инструмент, который позволяет подбирать цвета. Например, если не указан цвет текста, по умолчанию используется цвет контента, предоставленный ближайшей поверхностью, на которой он размещен.
Пример: создание текстового заголовка в поле
@Composable fun TextSample() { Text( text = "Hello Glimmer", style = GlimmerTheme.typography.titleLarge ) }
Ключевые моменты
- Поскольку цвет не указан, текст будет выглядеть так, как если бы он был нанесен на ближайшую поверхность, чтобы его было лучше видно (обычно это белый цвет).
Размеры
Масштаб шрифтов в Glimmer для Jetpack Compose значительно больше, чем в стандартном мобильном Material Design. Стили TitleLarge и BodyLarge относятся к типу 30.sp, а субтитры – к типу 18.sp:
| Стиль | Размер (sp) | Вес | Высота строки |
|---|---|---|---|
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 |
Подпись |
18 |
турецких лир |
24.sp |
Как использовать Google Sans Flex
Google Sans Flex – это переменный шрифт, специально разработанный для ИИ-очков и предоставляемый в составе Jetpack Compose Glimmer. Благодаря закругленным углам и регулируемым осям шрифт можно оптимально масштабировать, чтобы текст оставался легко читаемым. По возможности, чтобы обеспечить согласованность для пользователей между вашим приложением и системой, используйте шрифт Google Sans Flex для всего текста, который показывается на видеоочках.
Чтобы использовать Google Sans Flex, добавьте библиотеку glimmer-google-fonts в зависимости приложения, а затем примените шрифт ко всему приложению GlimmerTheme:
@Composable
fun GoogleSansFlexTypographySample() {
val typography = createGoogleSansFlexTypography()
GlimmerTheme(typography = typography) {
Text("Hello World", style = GlimmerTheme.typography.titleLarge)
}
}