В Jetpack Compose Glimmer компонент Text позволяет задавать различные свойства текста, такие как цвет, размер шрифта, стиль шрифта, толщина шрифта, семейство шрифтов, межбуквенный интервал и выравнивание текста.
Уникальность Jetpack Compose Glimmer Text заключается в интеллектуальном управлении подбором цветов. Например, если цвет не указан, текст по умолчанию принимает цвет, заданный ближайшей поверхностью, на которой он расположен.
Пример: Создание текстового заголовка в рамке.
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Основные моменты, касающиеся кода.
- Поскольку цвет не указан, этот текст ориентируется на ближайшую поверхность, чтобы выбрать наиболее читаемый цвет (обычно белый).
Размер
В Jetpack Compose Glimmer размер шрифта значительно больше, чем в стандартном мобильном Material Design. Размеры стилей TitleLarge и BodyLarge составляют 30.sp , а Caption — 18.sp
| Стиль | Размер (орф.) | Масса | Высота строки |
|---|---|---|---|
titleLarge | 30 | 750 | 36.sp |
заголовокСредний | 24 | 750 | 28.sp |
titleSmall | 20 | 750 | 28.sp |
телоКрупный | 30 | 520 | 36.sp |
средний размер тела | 24 | 520 | 36.sp |
маленький размер тела | 20 | 520 | 28.sp |
подпись | 18 | 650 | 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) } }