Стиль абзаца

На этой странице описано, как стилизовать текст для абзаца. Чтобы установить стиль на уровне абзаца, вы можете настроить такие параметры, как 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 выравнивается по правой стороне независимо от того, какой алфавит используется.

Примечание. Выравнивание текста отличается от выравнивания макета, которое заключается в расположении Composable внутри контейнера, такого как Row или Column . Дополнительные сведения см. в разделе Основы создания макета .

Добавить несколько стилей в абзац

Чтобы добавить несколько стилей в абзац, вы можете использовать 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 .

Рисунок 1. Используйте Alignment и Trim, чтобы настроить текст в пределах заданного lineHeight и при необходимости обрезать лишнее пространство.

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 и Alignment. В следующих примерах показано, как выглядит многострочный текст с различными конфигурациями LineHeightStyle.Trim при выравнивании по центру ( LineHeightStyle.Alignment.Center ).

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

Предупреждение. Эти настройки с использованием API LineHeightStyle (Trim) могут работать только при их использовании вместе с конфигурацией includeFontPadding = false.

См. публикацию в блоге «Исправление заполнения шрифта при составлении текста», чтобы узнать больше о контексте этого изменения, о том, как 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
                )
            )
        }
    )
)
TextSnippets.kt

Рисунок 1. Текстовый блок с простой стратегией разрыва строк (вверху) и текстовый блок с оптимизированным для абзаца разрывом строки (внизу).

Обратите внимание, что в приведенном выше выводе поведение разрыва строки Paragraph дает более визуально сбалансированный результат, чем Simple разрыв строки.

Настройте разрывы строк

Вы также можете создать свою собственную конфигурацию LineBreak с помощью параметра Strategy . Strategy может быть любой из следующих:

• Balanced — пытается сбалансировать длину строк текста, а также применяет автоматический перенос, если он включен. Рекомендуется для небольших экранов, например часов, чтобы максимизировать объем отображаемого текста.
• HighQuality — оптимизирует абзац для более читаемого текста, включая расстановку переносов, если он включен. (Должно быть значением по умолчанию для всего, что не является Balanced или Simple .)
• Simple — базовая, быстрая стратегия. Если этот параметр включен, переносы выполняются только для слов, которые не умещаются на всей строке. Полезно для редактирования текста, чтобы избежать изменения позиции во время набора текста.

Примечание. Вы также можете настроить поведение разрыва строки с помощью параметров Strictness и WordBreak . Эти параметры предназначены для языков CJK, и вы можете не увидеть желаемого эффекта, если будете использовать их для языков, отличных от CJK. Дополнительную информацию см. в разделе Рекомендации CJK .

В следующем фрагменте показана разница между абзацем с настройками по умолчанию и абзацем, оптимизированным для маленьких экранов с помощью 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

Рисунок 2. Абзац, отформатированный с использованием стратегии Balanced разрыва строк (вверху), по сравнению с абзацем, отформатированным без стратегии разрыва строк.

Соображения CJK

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

Strictness описывает строгость разрыва строки со следующими свойствами:

Примечание. Рекомендуемое по умолчанию значение 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

Рис. 3. Текст, отформатированный с настройками Strictness и WordBreak (вверху), по сравнению с текстом, отформатированным только с использованием LineBreak.Heading (внизу).

Перенос текста, разбитого на строки

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

Рисунок 4. Абзац без включенных переносов (вверху) и абзац с включенными переносами (внизу).

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

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

{% дословно %} {% дословно %}