Стиль текста

Компонент 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

Слова

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

Для задания различных стилей в рамках одного и того же Text элемента используйте AnnotatedString — строку, которую можно аннотировать стилями произвольных аннотаций.

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

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

TextStyle используется в компоненте 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() для отображения HTML-отформатированного текста с кликабельными ссылками в вашем приложении Jetpack Compose. Эта функция преобразует строку с 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", которая становится кликабельной, выделена синим цветом, подчеркнута и курсивом:

Заголовок H1 «Jetpack Compose», за которым следует «Создавайте лучшие приложения с помощью Jetpack Compose», где Jetpack Compose — это кликабельная ссылка, оформленная синим цветом, подчеркнутая и курсивная.
Рисунок 2. Заголовок и абзац, где «Jetpack Compose» в абзаце представляет собой кликабельную, стилизованную ссылку.

Расширьте возможности стилизации с помощью Brush

Для более сложных функций стилизации текста можно использовать API Brush с TextStyle и SpanStyle . Теперь Brush можно использовать везде, где обычно используются TextStyle или SpanStyle .

Используйте кисть для оформления текста.

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

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

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

Использование функции `linearGradient` из Brush API с заданным списком цветов.
Рисунок 3. Использование функции linearGradient из Brush API с заданным списком цветов.

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

Интеграции

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

Для получения дополнительной информации об использовании API кисти в TextField см. раздел «Стиль ввода с помощью 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

Используется стандартная кисть со стилем linearGradient для текста.
Рисунок 4. Использование стандартной кисти со стилем linearGradient для Text .
Непрозрачность в фрагменте текста

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

Использование buildAnnotatedString и параметра alpha класса SpanStyle, а также linearGradient для добавления прозрачности к фрагменту текста.
Рисунок 5. Использование buildAnnotatedString и параметра alpha функции SpanStyle , а также linearGradient для добавления прозрачности к фрагменту текста.

Примените эффект «прямоугольной области» к тексту.

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

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

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

{% verbatim %} {% endverbatim %} {% verbatim %} {% endverbatim %}