На этой странице описано, как стилизовать текст для абзаца. Чтобы установить стиль на уровне абзаца, вы можете настроить такие параметры, как textAlign
и lineHeight
, или определить свой собственный ParagraphStyle
.
Установить выравнивание текста
Параметр textAlign
позволяет задать горизонтальное выравнивание текста в области компонуемой поверхности Text
.
По умолчанию Text
выберет естественное выравнивание текста в зависимости от значения его содержимого:
- Левый край контейнера
Text
для алфавитов с письмом слева направо, таких как латиница, кириллица или хангыль. - Правый край контейнера
Text
для алфавитов с письмом справа налево, таких как арабский или иврит.
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Если вы хотите вручную установить выравнивание текста составного Text
, предпочитайте использовать TextAlign.Start
и TextAlign.End
вместо TextAlign.Left
и TextAlign.Right
соответственно, поскольку они разрешаются по правому краю составного Text
в зависимости от предпочтительного языка. ориентация текста. Например, TextAlign.End
выравнивается по правой стороне для французского текста и по левой стороне для арабского текста, но TextAlign.Right
выравнивается по правой стороне независимо от того, какой алфавит используется.
Добавить несколько стилей в абзац
Чтобы добавить несколько стилей в абзац, вы можете использовать ParagraphStyle
в AnnotatedString
, который может быть снабжен стилями произвольных аннотаций. Как только часть вашего текста помечена ParagraphStyle
, эта часть отделяется от остального текста, как если бы в начале и конце у нее были переводы строк.
Дополнительные сведения о добавлении нескольких стилей в текст см. в разделе Добавление нескольких стилей в текст .
AnnotatedString
имеет типобезопасный конструктор , упрощающий создание: buildAnnotatedString
. Следующий фрагмент использует buildAnnotatedString
для установки ParagraphStyle
:
@Composable fun ParagraphStyle() { Text( buildAnnotatedString { withStyle(style = ParagraphStyle(lineHeight = 30.sp)) { withStyle(style = SpanStyle(color = Color.Blue)) { append("Hello\n") } withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color.Red ) ) { append("World\n") } append("Compose") } } ) }
Отрегулируйте высоту строки и отступы
includeFontPadding
— это устаревшее свойство, которое добавляет дополнительные отступы на основе показателей шрифта вверху первой строки и внизу последней строки текста. Начиная с версии Compose BOM 2024.01.01
, для параметра includeFontPadding
по умолчанию установлено значение false
, что приводит макет текста по умолчанию в большее соответствие с распространенными инструментами дизайна.
Возможность настройки lineHeight
не нова — она доступна начиная с Android Q. Вы можете настроить lineHeight
для Text
с помощью параметра lineHeight
, который распределяет высоту строки в каждой строке текста. Затем вы можете использовать новый LineHeightStyle API
для дальнейшей настройки выравнивания этого текста в пространстве и удаления пробелов.
Для повышения точности вы можете настроить lineHeight
, используя текстовую единицу «em» (относительный размер шрифта) вместо «sp» (масштабированные пиксели). Дополнительные сведения о выборе подходящего текстового блока см. в разделе TextUnit
.
Text( text = text, style = LocalTextStyle.current.merge( TextStyle( lineHeight = 2.5.em, platformStyle = PlatformTextStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( alignment = LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None ) ) ) )
В дополнение к настройке lineHeight
теперь вы можете дополнительно центрировать и стилизовать текст, используя конфигурации с помощью экспериментального API LineHeightStyle
: LineHeightStyle.Alignment
и LineHeightStyle.Trim
(для работы Trim для параметра includeFontPadding
должно быть установлено значение false
). Функции «Выравнивание» и «Обрезка» используют измеренное пространство между строками текста, чтобы более правильно распределить его по всем строкам, включая одну строку текста и верхнюю строку блока текста.
LineHeightStyle.Alignment
определяет, как выровнять строку в пространстве, предусмотренном высотой строки. Внутри каждой строки вы можете выровнять текст по верху, низу, центру или пропорционально. LineHeightStyle.Trim
затем позволяет вам оставить или удалить дополнительное пространство вверху первой строки и внизу последней строки вашего текста, созданное в результате любых настроек lineHeight
и Alignment. В следующих примерах показано, как выглядит многострочный текст с различными конфигурациями LineHeightStyle.Trim
при выравнивании по центру ( LineHeightStyle.Alignment.Center
).
LineHeightStyle.Trim.None | LineHeightStyle.Trim.Both |
LineHeightStyle.Trim.FirstLineTop | LineHeightStyle.Trim.LastLineBottom |
См. публикацию в блоге «Исправление заполнения шрифта при составлении текста», чтобы узнать больше о контексте этого изменения, о том, как includeFontPadding
работает в системе View, а также об изменениях, внесенных в Compose и новых API-интерфейсах LineHeightStyle
.
Вставить разрывы строк
API LineBreak
определяет критерии, по которым текст разбивается на несколько строк. Вы можете указать желаемый тип разрыва строки в блоке TextStyle
вашего компонуемого Text
. К предустановленным типам разрыва строк относятся следующие:
-
Simple
— быстрый, простой разрыв строки. Рекомендуется для полей ввода текста. -
Heading
— разрыв строки с более мягкими правилами разрыва. Рекомендуется для короткого текста, например заголовков. -
Paragraph
— более медленный и качественный перенос строк для улучшения читаемости. Рекомендуется для больших объемов текста, например абзацев.
В следующем фрагменте кода используются как Simple
, так и Paragraph
чтобы указать поведение разрыва строк в длинном блоке текста:
TextSample( samples = mapOf( "Simple" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Simple ) ) }, "Paragraph" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph ) ) } ) )
Обратите внимание, что в приведенном выше выводе поведение разрыва строки Paragraph
дает более визуально сбалансированный результат, чем Simple
разрыв строки.
Настройте разрывы строк
Вы также можете создать свою собственную конфигурацию LineBreak
с помощью параметра Strategy
. Strategy
может быть любой из следующих:
-
Balanced
— пытается сбалансировать длину строк текста, а также применяет автоматический перенос, если он включен. Рекомендуется для небольших экранов, например часов, чтобы максимизировать объем отображаемого текста. -
HighQuality
— оптимизирует абзац для более читаемого текста, включая расстановку переносов, если он включен. (Должно быть значением по умолчанию для всего, что не являетсяBalanced
илиSimple
.) -
Simple
— базовая, быстрая стратегия. Если этот параметр включен, переносы выполняются только для слов, которые не умещаются на всей строке. Полезно для редактирования текста, чтобы избежать изменения позиции во время набора текста.
В следующем фрагменте показана разница между абзацем с настройками по умолчанию и абзацем, оптимизированным для маленьких экранов с помощью Balanced
стратегии разрыва строк:
TextSample( samples = mapOf( "Balanced" to { val smallScreenAdaptedParagraph = LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = smallScreenAdaptedParagraph ) ) }, "Default" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default ) } ) )
Соображения CJK
Вы также можете настроить LineBreak
с помощью API-интерфейсов Strictness
и WordBreak
, которые были разработаны специально для языков CJK . Вы не всегда можете увидеть эффекты этих API на языках, отличных от CJK. В целом правила разрыва строк определяются на основе языкового стандарта.
Strictness
описывает строгость разрыва строки со следующими свойствами:
-
Default
— правила нарушения по умолчанию для локали. Может соответствоватьNormal
илиStrict
. -
Loose
— Наименее ограничительные правила. Подходит для коротких линий. -
Normal
— наиболее распространенные правила разрыва строки. -
Strict
— самые строгие правила переноса строк.
WordBreak
определяет, как разрывы строк должны быть вставлены в слова со следующими свойствами:
-
Default
— правила нарушения по умолчанию для локали. -
Phrase
— разрыв строки основан на фразах.
В следующем фрагменте кода для японского текста используются параметры « Strict
строгость» и «Разбиение слов Phrase
:
val customTitleLineBreak = LineBreak( strategy = LineBreak.Strategy.HighQuality, strictness = LineBreak.Strictness.Strict, wordBreak = LineBreak.WordBreak.Phrase ) Text( text = "あなたに寄り添う最先端のテクノロジー。", modifier = Modifier.width(250.dp), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = customTitleLineBreak ) )
Перенос текста, разбитого на строки
API Hyphens
позволяет добавить поддержку расстановки переносов в ваше приложение. Под расстановкой переносов понимается вставка знака препинания в виде тире, чтобы указать, что слово разделено на строки текста. Если этот параметр включен, переносы добавляются между слогами слова в соответствующих точках переноса.
По умолчанию расстановка переносов не включена. Чтобы включить расстановку переносов, добавьте Hyphens.Auto
в качестве параметра в блок TextStyle
:
TextSample( samples = mapOf( "Hyphens - None" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.None ) ) }, "Hyphens - Auto" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.Auto ) ) } ) )
Если этот параметр включен, расстановка переносов происходит только при следующих условиях:
- Слово не помещается в строку. Если вы используете стратегию
Simple
разрыва строки, перенос слова происходит только в том случае, если строка короче отдельного слова. - На вашем устройстве установлена соответствующая локаль, а соответствующие переносы определяются с использованием словарей, имеющихся в системе.
Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Стиль текста
- Основы создания макета
- Внутренние измерения в макетах Compose