Как задать стиль абзаца

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

Как задать выравнивание текста

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

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

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

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

Если вы хотите вручную задать выравнивание текста для composable-функции Text, используйте TextAlign.Start и TextAlign.End вместо TextAlign.Left и TextAlign.Right соответственно, поскольку они выравнивают текст по правому краю composable-функции 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 – устаревшее свойство, которое добавляет дополнительное внутреннее поле на основе показателей шрифта в верхней части первой строки и нижней части последней строки текста. Начиная с версии 2024.01.01 Compose BOM, значение 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). Выравнивание и обрезка используют измеренное пространство между строками текста, чтобы более равномерно распределить его по всем строкам, включая одну строку текста и верхнюю строку блока текста.

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

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Чтобы узнать больше об этом изменении, о том, как includeFontPadding работал в системе View, и об изменениях, внесенных в Compose и новые API LineHeightStyle, прочитайте запись блога Исправление отступов шрифтов в тексте Compose.

Как вставить разрыв строки

LineBreak API определяет критерии, по которым текст разбивается на несколько строк. Вы можете указать тип переноса строки в блоке 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

Особенности работы с китайским, японским и корейским языками

Вы также можете настроить LineBreak с помощью API Strictness и WordBreak, которые разработаны специально для языков стран Восточной Азии. В языках, отличных от китайского, японского и корейского, эффекты этих API могут быть не всегда заметны. В целом правила переноса строк определяются на основе региональных стандартов.

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, перенос слова выполняется только в том случае, если строка короче, чем слово.
• На устройстве задан подходящий язык, поскольку перенос слов определяется с помощью словарей, имеющихся в системе.