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

У 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…

Дополнительное форматирование с помощью SpanStyle

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

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

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

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