TextMeasurer: шта је то и како функционише мерење текста у Compose-у

Шта је TextMeasurer у Jetpack Compose-у?

TextMeasurer — то је функционални интерфејс из пакета androidx.compose.ui.text који омогућава мерење текста у Compose-у без директног приказивања на екрану. Он је део текстуалног погона Compose-а и ради на нивоу Paragraph API-ја који користи Skia за рендеровање.

Основна намена TextMeasurer-а је претходно мерење. У Compose-у, величина текста се обично одређује након што је Composable већ постављен у Layout. Али постоје сценарији где је потребно знати ширину текста пре композиције: на пример, да би се одлучило да ли ред стаје у контејнер, или да би се израчунала величина дугмета на основу дужине текста.

TextMeasurer решава овај проблем пружајући метод measure(), који прима TextMeasureRequest (текст, стил, ограничења) и враћа TextLayoutResult (метрике, редови, знакови). Ово омогућава програмеру да добије све податке о тексту синхроно, без кашњења од једног кадра.

Користите TextMeasurer када величина текста утиче на величину родитељске компоненте, при креирању анимираних текст-прелаза или при имплементацији прилагођених Layout-ова где текст граничи са другим елементима.

Како функционише TextMeasurer

API TextMeasurer-а се састоји од два кључна ентитета: rememberTextMeasurer() (креирање инстанце) и measure() (покретање мерења). Инстанца се креира једном за цео животни циклус компоненте и поново се користи за сва мерења.

val textMeasurer = rememberTextMeasurer()

val result = textMeasurer.measure(
    text = "Hello, Compose!",
    style = MaterialTheme.typography.bodyLarge,
    constraints = Constraints(maxWidth = 200, maxHeight = 50)
)

// ширина резултата, висина резултата, број редова

Параметар constraints одређује максималну ширину и висину у оквиру којих текст треба да стане. Ако текст не стаје по ширини, пребацује се у следећи ред. Резултат мерења садржи TextLayoutResult, у коме се могу добити број редова, позиција сваког знака, ширина сваког реда и укупна величина текста.

TextMeasurer ради синхроно у UI нити и не изазива поновну композицију. Међутим, често мерење текста са различитим стиловима може стварати оптерећење — зато се инстанца креира кроз remember и поново користи.

Мерење једног реда текста

Најједноставнији сценарио — измерити ширину једноредног текста да би се одредила величина родитељског контејнера. На пример, за дугме чија ширина зависи од дужине натписа.

val textMeasurer = rememberTextMeasurer()
var label by remember { mutableStateOf("Submit") }

val textResult = remember(label) {
    textMeasurer.measure(
        text = label,
        style = MaterialTheme.typography.labelLarge,
        constraints = Constraints(maxWidth = 1000, maxHeight = 100)
    )
}

Box(
    modifier = Modifier
        .width(textResult.size.width.dp)
        .height(40.dp)
        .background(Color.Blue)
        .clickable { onClick() }
) {
    Text(text = label, style = MaterialTheme.typography.labelLarge)
}

У овом примеру, remember(label) гарантује да се мерење поново покреће само при промени текста. Constraints су постављени са великим maxWidth (1000) да би се спречило пребацивање реда — стварно ограничење ће бити једнако ширини текста. Ширина Box-а се поставља на измерену ширину текста, што даје ефекат „дугме по величини текста".

Напомена: ширину из резултата треба конвертовати у dp кроз .dp, јер TextMeasurer враћа димензије у пикселима, а Modifier.width очекује Dp. За прецизност користите density и LocalDensity.current.

Мерење вишередног текста

За вишередни текст, TextMeasurer омогућава одређивање не само укупне висине, већ и броја редова и положаја сваког знака унутар пасуса. Ово је неопходно при креирању прилагођених текст-поља, четова или уређивача.

Главна својства TextLayoutResult-а за вишередни текст: lineCount (број редова), getLineTop(index) (Y-координата почетка реда), getLineBottom(index) (Y-координата краја), getLineWidth(index) (ширина реда). Комбинујући их, можете прецизно позиционирати елементе интерфејса у односу на редове текста.

val textMeasurer = rememberTextMeasurer()
val result = textMeasurer.measure(
    text = "Long multiline text that needs to be measured before layout",
    style = MaterialTheme.typography.bodyMedium,
    constraints = Constraints(maxWidth = 150, maxHeight = 300)
)

val linesCount = result.lineCount
val firstLineWidth = result.getLineWidth(0)
val totalHeight = result.size.height

Метод getLineWidth(lineIndex) враћа ширину наведеног реда у пикселима. Може бити мања од maxWidth ако ред не досеже до границе контејнера. Знајући ширину сваког реда, можете ручно имплементирати ефекат поравнања или поставити инлине елементе поред кратких редова.

Да бисте добили позицију одређеног знака, користите getBoundingBox(offset), који враћа Rect са координатама left, top, right, bottom. Ово је корисно за позиционирање курсора у прилагођеним текст-пољима или за истицање опсега текста анимацијом.

TextMeasurer у прилагођеним компонентама

Најмоћнији сценарио примене TextMeasurer-а — прилагођене Layout компоненте, где текст граничи са другим елементима и њихове величине су међусобно зависне. На пример, виџет „Иконица + текст", где иконица треба да буде центрирана у односу на први ред текста, а не на цео блок.

У стандардном Row-у, иконица се центрира по висини целог Row-а, што изгледа неприродно када текст заузима 3 реда, а иконица — један. Са TextMeasurer-ом можете измерити први ред и поравнати иконицу управо у односу на њега.

val textMeasurer = rememberTextMeasurer()

Layout(
    content = {
        Icon(imageVector = Icons.Default.Star, contentDescription = null)
        Text(text = "Вишередни текст овде")
    },
    measurePolicy = { measurables, constraints ->
        val textMeasurable = measurables[1]
        val textPlaceable = textMeasurable.measure(constraints)
        val iconPlaceable = measurables[0].measure(constraints)

        val firstLineHeight = textMeasurer.measure(
            text = "Sample",
            style = MaterialTheme.typography.bodyMedium,
            constraints = Constraints(maxWidth = 2000, maxHeight = 100)
        ).size.height

        layout(width = textPlaceable.width + iconPlaceable.width,
               height = maxOf(textPlaceable.height, iconPlaceable.height)) {
            iconPlaceable.placeRelative(0, (firstLineHeight - iconPlaceable.height) / 2)
            textPlaceable.placeRelative(iconPlaceable.width, 0)
        }
    }
)

У овом примеру, мерење првог реда кроз TextMeasurer одређује положај иконице. Без TextMeasurer-а, иконица би се центрирала по целој висини вишередног текста, што је визуелно нетачно. Овај образац се широко користи у четовима, листама контаката и информационим картицама.

Савети за перформансе

TextMeasurer — синхрони API који ради у UI нити. При прекомерној употреби може изазвати испуштање кадрова, посебно при мерењу великих количина текста на слабијим уређајима.

Прво правило — кеширајте резултат. Увек омотавајте позив measure() у remember са зависностима од текста и стила. Никада не позивајте measure() унутар CompositionLocal-а или на врућим путањама рекомпозиције.

Друго правило — ограничите maxWidth и maxHeight. Ако поставите maxWidth = Constraints.Infinity, TextMeasurer неће моћи да пребацује редове и текст ће изаћи ван екрана. Увек прослеђујте реална ограничења, посебно за вишередни текст.

Треће — избегавајте поновно мерење са истим параметрима. Ако се текст и стил нису променили, резултат measure() ће бити исти. Комбинујте мерење са Deferred или LaunchedEffect за асинхроне сценарије.