Визуальные компоненты

Text

Неотъемлемой частью визуального интерфейса является текст. Для отображения текста Jetpack Compose предоставляет ряд встроенных компонентов. Прежде всего это компонент Text, который имеет следующее определение:

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    style: TextStyle = LocalTextStyle.current
): Unit

Параметры компонента:

• text: объект String, который представляет выводимый текст

• modifier: объект Modifier, который представляет применяемые к компоненту модификаторы

• color: объект Color, который представляет цвет текста. По умолчанию имеет значение Color.Unspecified

• fontSize: объект TextUnit, который представляет размер шрифта. По умолчанию равен TextUnit.Unspecified

• fontStyle: объект FontStyle?, который представляет стиль шрифта. По умолчанию равен null

• fontWeight: объект FontWeight?, который представляет толщину шрифта. По умолчанию равен null

• fontFamily: объект FontFamily?, который представляет тип шрифта. По умолчанию равен null

• letterSpacing: объект TextUnit, который представляет отступы между символами. По умолчанию равен TextUnit.Unspecified

• textDecoration: объект TextDecoration?, который представляет тип декораций (например, подчеркивание), применяемых к тексту. По умолчанию равен null

• textAlign: объект TextAlign?, который представляет выравнивание текста. По умолчанию равен null

• lineHeight: объект TextUnit, который представляет высоту строки текста. По умолчанию равен TextUnit.Unspecified

• overflow: объект TextOverflow, который определяет поведение текста при его выходе за границы контейнера. По умолчанию равен TextOverflow.Clip

• softWrap: объект Boolean, который определяет, должен ли текст переносится при завершении строки. При значении false текст не переносится, как будто строка имеет бесконечную длину. По умолчанию равен true

• maxLines: объект Int, который представляет максимальное количество строк. Если текст превысил установленное количество строк, то он усекается в соответствии с параметрами overflow и softWrap. По умолчанию равен Int.MAX_VALUE

• minLines: минимальное количество строк

• onTextLayout: объект (TextLayoutResult) -> Unit, который представляет функцию, выполняемую при определении компоновки текста.

• style: объект TextStyle, который представляет стиль текста. Значение по умолчанию - LocalTextStyle.current

Размер шрифта

Размер шрифта определяется параметром fontSize. В качестве параметру может передаваться значение типов Int, Double и Float, после которых указывается тип единиц. Это могут быть масштабируемые пиксели (единицы sp, например, 22.sp), либо это может быть относительный размер шрифта в единицах em (например, 18.em). Значение TextUnit.Unspecified указывает, что высота шрифта наследуется от настроек родительного компонента

Простейшее применение компонента:/p>

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
				Text("Hello Jetpack Compose!", fontSize=25.sp)
				Text("Hello Jetpack Compose!", fontSize=6.em)
			}
        }
    }
}

Цвет шрифта

За определение цвета шрифта отвечает параметр color, который представляет объект Color, ранее рассмотренный в статье Установка цвета.

import androidx.compose.ui.graphics.Color
//..........
Column {
	Text("Hello Jetpack Compose!",  fontSize=22.sp, color=Color.Red)
	Text("Hello Jetpack Compose!",  fontSize=22.sp, 
		color= Color(red = 0x44, green = 0x55, blue = 0x88, alpha = 0xFF))
}

Стиль шрифта

Стиль шрифта определяется параметром fontStyle, который представляет класс FontStyle?. Для определения этот класс предоставляет два встроенных значения:

• FontStyle.Italic (наклоннный шрифт)

• FontStyle.Normal (стандартный шрифт)

import androidx.compose.ui.text.font.FontStyle
//..........
Text("Hello Jetpack Compose!",  fontSize=22.sp, fontStyle = FontStyle.Italic)
Text("Hello Jetpack Compose!",  fontSize=22.sp, fontStyle = FontStyle.Normal)

Толщина шрифта

Толщина шрифта задается параметром fontWeight, который представляет класс FontWeight.

Есть два способа установки толщины шрифта. Прежде всего можно использовать конструктор этого класса, в который передается числовое значение от 1 до 1000. Чем больше значение, тем толще будет шрифт:

FontWeight(600)

Второй способ заключается в применении встроенных значений:

• FontWeight.Black (Эквивалентно значению W900)

• FontWeight.Bold (Эквивалентно значению W700)

• FontWeight.ExtraBold (Эквивалентно значению W800)

• FontWeight.ExtraLight (Эквивалентно значению W200)

• FontWeight.Light (Эквивалентно значению W300)

• FontWeight.Medium (Эквивалентно значению W500)

• FontWeight.Normal (Эквивалентно W400 - значение по умолчанию)

• FontWeight.SemiBold (Эквивалентно значению W600)

• FontWeight.Thin (Эквивалентно значению W100

Так, следующие определения компонента Text будут аналогичны:

import androidx.compose.ui.text.font.FontWeight
//..........
Text("Hello Jetpack Compose!",  fontSize=22.sp, fontWeight= FontWeight.Bold)
Text("Hello Jetpack Compose!",  fontSize=22.sp, fontWeight= FontWeight.W700)
Text("Hello Jetpack Compose!",  fontSize=22.sp, fontWeight= FontWeight(700))

Тип шрифта

Тип или семейство шрифта определяется параметром fontFamily, который представляет объект FontFamily?

Для определения шрифта FontFamily предоставляет ряд встроенных констант:

• FontFamily.Cursive (курсивный, рукописный шрифт)

• FontFamily.Monospace

• FontFamily.Serif

• FontFamily.SansSerif

• FontFamily.Default (шрифт по умолчанию на текущей платформе)

• FontFamily.SansSerif

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                Text("Hello METANIT.COM", fontSize=28.sp, fontFamily= FontFamily.Cursive)
                Text("Hello METANIT.COM", fontSize=28.sp, fontFamily=FontFamily.Monospace)
                Text("Hello METANIT.COM", fontSize=28.sp, fontFamily=FontFamily.SansSerif)
                Text("Hello METANIT.COM", fontSize=28.sp, fontFamily=FontFamily.Serif)
                Text("Hello METANIT.COM", fontSize=28.sp, fontFamily=FontFamily.Default)
            }
        }
    }
}

Расстояния между символами

Параметр letterSpacing задает расстояние между символами и представляет класс TextUnit. В данном случае мы можем установить расстояние, так как и размер шрифта, с помощью единиц sp или em:

Text("Hello Jetpack Compose!",  fontSize=22.sp, letterSpacing= 1.3.sp)
Text("Hello Jetpack Compose!",  fontSize=22.sp, letterSpacing= 0.3.em)

Декорации текста

Параметр textDecoration позволять задать декорации для текста. Данный параметр принимает объект класса TextDecoration, который предоставляет несколько встроенных значений:

• TextDecoration.LineThrough (зачеркивает текст)

• TextDecoration.Underline (подчеркивает текст)

• TextDecoration.None (отсутствие декораций)

import androidx.compose.ui.text.style.TextDecoration
//...........
Column {
    Text("Hello Jetpack Compose!",  fontSize=28.sp, textDecoration = TextDecoration.LineThrough)
    Text("Hello Jetpack Compose!",  fontSize=28.sp, textDecoration = TextDecoration.Underline)
    Text("Hello Jetpack Compose!",  fontSize=28.sp, textDecoration = TextDecoration.None)
}      

Выравнивание текста

Параметр textAlign управляет выравниванием текста и представляет объект класса TextAlign. В качестве значения этому параметру можно передать значение одного из свойств класса TextAlign:

• TextAlign.Center: выравнивание текста по центру контейнера

• TextAlign.Justify: текст равномерно растягивается по всей ширине контейнера

• TextAlign.End: выравнивание текста по конечному краю контейнера (в зависимости от ориентации текста это может быть левый или правый край)

• TextAlign.Start: выравнивание текста по началу контейнера (в зависимости от ориентации текста это может быть левый или правый край)

• TextAlign.Left: выравнивание текста по левому краю контейнера

• TextAlign.Right: выравнивание текста по правому краю контейнера

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                Text("Center", modifier = Modifier.fillMaxWidth(1f) , fontSize=28.sp, textAlign = TextAlign.Center)
                Text("Justify", modifier = Modifier.fillMaxWidth(1f), fontSize=28.sp, textAlign = TextAlign.Justify)
                Text("Left", modifier = Modifier.fillMaxWidth(1f), fontSize=28.sp, textAlign = TextAlign.Left)
                Text("Right", modifier = Modifier.fillMaxWidth(1f), fontSize=28.sp, textAlign = TextAlign.Right)
                Text("Start", modifier = Modifier.fillMaxWidth(1f), fontSize=28.sp, textAlign = TextAlign.Start)
                Text("End", modifier = Modifier.fillMaxWidth(1f), fontSize=28.sp, textAlign = TextAlign.End)
            }
        }
    }
}

Усечение текста

Параметр overflow управляет тем, как будет обрабатываться текст при его выходе за границы контейнера. Этот параметр принимает значение класса TextOverflow. В качестве значения параметру можно передать значение одного из свойств данного класса:

• TextOverflow.Clip: выходящий за границы контейнера текст усекается

• TextOverflow.Ellipsis: текст усекается, а в конце текста добавляется многоточие

• TextOverflow.Visible: весь текст может отображаться

Перенос текста

Параметр softWrap управляет переносом текста. Если он равен true, то текст переносится. Если false, то нет.

Стиль текста

Параметр style управляет стилем текста. Он предоставляет класс TextStyle , который по сути объединяет ряд вышеупомянутых и несколько дополнительных параметров в одну сущность. Он несколько конструкторов с кучей параметров, например, один из них:

TextStyle(
    color: Color,
    fontSize: TextUnit,
    fontWeight: FontWeight?,
    fontStyle: FontStyle?,
    fontSynthesis: FontSynthesis?,
    fontFamily: FontFamily?,
    fontFeatureSettings: String?,
    letterSpacing: TextUnit,
    baselineShift: BaselineShift?,
    textGeometricTransform: TextGeometricTransform?,
    localeList: LocaleList?,
    background: Color,
    textDecoration: TextDecoration?,
    shadow: Shadow?,
    drawStyle: DrawStyle?,
    textAlign: TextAlign,
    textDirection: TextDirection,
    lineHeight: TextUnit,
    textIndent: TextIndent?,
    platformStyle: PlatformTextStyle?,
    lineHeightStyle: LineHeightStyle?,
    lineBreak: LineBreak,
    hyphens: Hyphens,
    textMotion: TextMotion?
)

Основные параметры конструктора в принципе дублируют стандартные свойства компонента Text:

• color: объект Color, который представляет цвет текста. По умолчанию имеет значение Color.Unspecified

• background: объект Color, который фоновый цвет компонента. По умолчанию имеет значение Color.Unspecified

• fontSize: объект TextUnit, который представляет размер шрифта. По умолчанию равен TextUnit.Unspecified

• fontStyle: объект FontStyle?, который представляет стиль шрифта. По умолчанию равен null

• fontWeight: объект FontWeight?, который представляет толщину шрифта. По умолчанию равен null

• fontFamily: объект FontFamily?, который представляет тип шрифта. По умолчанию равен null

• fontFeatureSettings: объект String?, который определяет, как будут применяться настройки толщины шрифта и его наклон (то есть значения параметров fontWeight и fontStyle), если используемый шрифт не поддерживает выделение жирным и (или) наклон. По умолчанию равен null

• letterSpacing: объект TextUnit, который представляет отступы между символами. По умолчанию равен TextUnit.Unspecified

• baselineShift: объект BaselineShift?, который определяет, насколько текст будет сдвигаться относительно базовой линии (baseline). По умолчанию равен null

• textGeometricTransform: представляет применяемые к тексту геометрические трансформации в виде объекта TextGeometricTransform?. По умолчанию равен null

• localeList: объект LocaleList?, который представляет список со специфичными для егиона символами. По умолчанию равен null

• textDecoration: объект TextDecoration?, который представляет тип декораций (например, подчеркивание), применяемых к тексту. По умолчанию равен null

• textAlign: объект TextAlign?, который представляет выравнивание текста. По умолчанию равен null

• textDirection: объект TextDirection?, который представляет направление текста. По умолчанию равен null

• lineHeight: объект TextUnit, который представляет высоту строки текста. По умолчанию равен TextUnit.Unspecified

• shadow: объект Shadow?, который определяет применяемый к тексту эффект тени. По умолчанию равен null

• textIndent: объект TextIndent?, который представляет отступ от начала текста. По умолчанию равен null

Поскольку большая часть этих параметров применяется непосредственно в функции компонента Text, рассмотрим некоторые параметры, которые отстуствуют в функции компонента Text.

Геометрические трансформации

Параметр TextGeometricTransform задает геометрические трансформации текста с помощью объекта TextGeometricTransform:

TextGeometricTransform(scaleX: Float = 1.0f, skewX: Float = 0f)

Первый параметр - scaleX указывает на увеличение текста. Если значение меньше 1.0f, то текст сжимается, если больше - то увеличивается.

Второй параметр - skewX указывает на сдвиг текста. Например, точка с координатами (x, y), будет трансформирована в точку (x + y * skewX, y). Значение по умолчанию - 0.0f. Например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextGeometricTransform

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val content = "Все мы сейчас желаем кушать, потому что утомились"
            val textSize = 25.sp
            Column {
                Text(
                    content,
                    fontSize = textSize,
                    style = TextStyle(textGeometricTransform = TextGeometricTransform(0.5f))
                )
                Text(
                    content,
                    fontSize = textSize,
                    style = TextStyle(textGeometricTransform = TextGeometricTransform(1.5f))
                )
            }
        }
    }
}

Создание тени для текста

Параметр shadow задает затенение текста с помощью объекта Shadow:

Shadow(color: Color, offset: Offset, blurRadius: Float)

Первый параметр - color устанавливает цвет тени.

Второй параметр - offset смещение тени в виде объекта Offset.

Третий параметр - blurRadius задает радиус размытия.

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.text.TextStyle

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello Metanit.com",
                fontSize = 30.sp,
                style = TextStyle(shadow = Shadow(Color.LightGray , Offset(10.0f, 16.5f), 1.0f)))
        }
    }
}

Направление текста

Параметр textDirection устанавливает направление текста и может принимать следующие значения:

• TextDirection.Content: направление текста зависит от первого направляющего символа в соответствии с алгоритмом Unicode Bidirectional Algorithm

• TextDirection.ContentOrLtr: направление текста зависит от первого направляющего символа в соответствии с алгоритмом Unicode Bidirectional Algorithm, либо представляет направление слева направо

• TextDirection.ContentOrRtl: направление текста зависит от первого направляющего символа в соответствии с алгоритмом Unicode Bidirectional Algorithm, либо представляет направление справа налево

• TextDirection.Ltr: текс направлен слева направо

• TextDirection.Rtl: текст направлен справо налево

Например:

import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextDirection
//............
Text(
	"Все мы сейчас желаем кушать, потому что утомились",
	fontSize=22.sp,
	style = TextStyle(textDirection = TextDirection.Rtl)
)

TextIndent

Параметр textIndent позволяет установить отступ от первого символа в тексте и от остального текста. Этот параметр представляет класс TextIndent, конструктор которого принимает два значения. Первое значение указывает на отступ от первого символа. Второе значение применяется, если текст многострочный и устанавливает отступ от остальных символов на второй и последующих строках. Для установки отступа применяются единицы sp. Например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.ui.unit.sp
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextIndent

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                text = "Все мы сейчас желаем кушать, потому что утомились и уже четвертый час",
                fontSize = 22.sp,
                style = TextStyle(textIndent = TextIndent(50.sp, 25.sp))
            )
        }
    }
}