Стиль абзаца

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

На этой странице описывается, как можно стилизовать текст для вашего абзаца. Чтобы задать стили на уровне абзаца, вы можете настроить такие параметры, как textAlign и lineHeight или определить свой собственный ParagraphStyle .

Установить выравнивание текста

Параметр textAlign позволяет задать горизонтальное выравнивание текста в пределах области компоновки Text .

По умолчанию Text выберет естественное выравнивание текста в зависимости от его содержимого:

• Левый край Text контейнера для алфавитов с написанием слева направо, таких как латиница, кириллица или хангыль
• Правый край Text контейнера для алфавитов с письмом справа налево, таких как арабский или иврит

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Если вы хотите вручную задать выравнивание текста 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")
            }
        }
    )
}
TextSnippets.kt

Отрегулируйте высоту строки и отступы

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
            )
        )
    )
)
TextSnippets.kt

В дополнение к настройке lineHeight , теперь вы можете дополнительно центрировать и стилизовать текст с помощью конфигураций с API LineHeightStyle : LineHeightStyle.Alignment и LineHeightStyle.Trim (для работы Trim includeFontPadding должен быть установлен в значение false ). Выравнивание и Trim используют измеренное пространство между строками текста, чтобы более правильно распределить его по всем строкам, включая отдельную строку текста и верхнюю строку блока текста.

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 , читайте в записи блога «Исправление отступов шрифта в тексте Compose».

Вставить переносы строк

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
                )
            )
        }
    )
)
TextSnippets.kt

Обратите внимание, что в приведенном выше выводе поведение разрыва строки 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
            )
        }
    )
)
TextSnippets.kt

Соображения 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
    )
)
TextSnippets.kt

Расставить переносы в тексте, разделенном на строки

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
                )
            )
        }
    )
)
TextSnippets.kt

Если эта функция включена, переносы происходят только при следующих условиях:

• Слово не помещается на строку. Если вы используете Simple стратегию переноса строк, перенос слова происходит только в том случае, если строка короче отдельного слова.
• Соответствующая локаль установлена ​​на вашем устройстве, поскольку соответствующая расстановка переносов определяется с помощью словарей, имеющихся в системе.