Как форматировать текст

У composable-функции Text есть несколько необязательных параметров для стилизации контента. Ниже перечислены параметры, которые охватывают наиболее распространенные варианты использования текста. Все параметры Text перечислены в исходном коде Compose Text.

При настройке любого из этих параметров стиль применяется ко всему тексту. Если вам нужно применить несколько стилей в одной строке или абзаце, ознакомьтесь с разделом Несколько встроенных стилей.

Общие стили текста

В следующих разделах описаны распространенные способы оформления текста.

Изменить цвет текста

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

Изменить размер шрифта

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

Выделить текст курсивом

Используйте параметр fontStyle, чтобы выделить текст курсивом (или задать другое значение FontStyle).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

Выделить текст полужирным

Используйте параметр fontWeight, чтобы выделить текст полужирным шрифтом (или задать другое значение FontWeight).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Добавить тень

Параметр style позволяет задать объект типа TextStyle и настроить несколько параметров, например тень. Shadow получает цвет тени, смещение (расположение относительно Text) и радиус размытия (насколько размытой выглядит тень).

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}
TextSnippets.kt

Как добавить несколько стилей в текст

Чтобы задать разные стили в одной composable-функции Text, используйте AnnotatedString – строку, которую можно аннотировать стилями произвольных аннотаций.

AnnotatedString – класс данных, содержащий:

• Стоимость: Text
• List со значением SpanStyleRange, эквивалентный встроенному стилю с диапазоном позиций в текстовом значении.
• List ParagraphStyleRange, определяющий выравнивание текста, направление текста, высоту строки и стиль отступа текста.

TextStyle используется в composable-функции Text, а SpanStyle и ParagraphStyle – в AnnotatedString. Подробнее о том, как добавить несколько стилей в абзац…

В AnnotatedString есть типобезопасный конструктор, который упрощает создание buildAnnotatedString.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}
TextSnippets.kt

Показывать HTML со ссылками в тексте

Используйте AnnotatedString.fromHtml(), чтобы показывать в приложении Jetpack Compose текст в формате HTML с кликабельными ссылками. Эта функция преобразует строку с HTML-тегами в AnnotatedString, что позволяет использовать стили и ссылки.

Пример: HTML со стилизованной ссылкой

Этот фрагмент кода отображает текст в формате HTML со ссылкой, к которой применяется определенный стиль:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

Важные сведения о коде

• AnnotatedString.fromHtml() преобразует строку htmlText в AnnotatedString. Параметр linkStyles позволяет настроить внешний вид ссылки.

• TextLinkStyles определяет стиль ссылок в HTML. SpanStyle задает оформление текста, стиль шрифта и цвет ссылок.

• Компонент Text показывает полученный AnnotatedString.

Результат

Этот фрагмент кода делает текст Jetpack Compose кликабельной ссылкой, выделенной синим цветом, подчеркиванием и курсивом:

Включите расширенные стили с помощью Brush

Чтобы использовать более сложные стили текста, вы можете использовать API Brush с TextStyle и SpanStyle. Везде, где вы обычно используете TextStyle или SpanStyle, теперь можно использовать и Brush.

Как использовать кисть для форматирования текста

Настройте текст с помощью встроенной кисти в TextStyle. Например, вы можете настроить кисть linearGradient для текста следующим образом:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Вы не ограничены этой конкретной цветовой схемой или стилем раскраски. Мы привели простой пример, но вы можете использовать любые встроенные кисти или даже просто SolidColor, чтобы улучшить текст.

Интеграции

Поскольку Brush можно использовать вместе с TextStyle и SpanStyle, интеграция с TextField и buildAnnotatedString выполняется без проблем.

Подробнее о том, как использовать Brush API в TextField, рассказывается в статье Как настроить стиль ввода с помощью Brush API.

Дополнительные стили с помощью SpanStyle

Как применить кисть к фрагменту текста

Если вы хотите применить кисть только к частям текста, используйте buildAnnotatedString и API SpanStyle вместе с выбранной кистью и градиентом.

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

Прозрачность фрагмента текста

Чтобы настроить прозрачность определенного фрагмента текста, используйте необязательный параметр alpha в SpanStyle. Используйте одну и ту же кисть для обеих частей текста и измените параметр альфа-канала в соответствующем теге span. В примере кода первый фрагмент текста отображается с полупрозрачностью (alpha =.5f), а второй – с полной непрозрачностью (alpha = 1f).

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

Как применить к тексту эффект бегущей строки

Вы можете применить модификатор basicMarquee к любой composable-функции, чтобы создать анимированный эффект прокрутки. Эффект бегущей строки возникает, если контент слишком широк, чтобы поместиться в доступные ограничения. По умолчанию для basicMarquee заданы определенные настройки (например, скорость и начальная задержка), но вы можете изменить эти параметры, чтобы настроить эффект.

В следующем фрагменте кода показано, как реализовать базовый эффект бегущей строки в composable-функции Text:

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

Рисунок 6. Модификатор basicMarquee, примененный к тексту.

Дополнительные ресурсы

• Освежаем знания о раскрашивании текста в Compose
• Анимированная кисть для раскрашивания текста в Compose
• Поддержка нескольких ссылок в одной строке текста