KotlinLeaner
05/02/2023, 4:50 PMcanvas
. I don't know height of canvas
. So I learnt basic how to measure text using rememberTextMeasurer
with TextLayoutResult
for single item and provide height on canvas
. If I mock 5 item in the list, then how can we measure all text height at a time and provide in canvas
? I am trying to put my rememberTextMeasurer
and TextLayoutResult
inside movieList
of forEach
it complains about.@OptIn(ExperimentalTextApi::class)
@Composable
fun TimeLineComposable() {
Column(modifier = Modifier.fillMaxSize()) {
val movieList = getMovieList()
val heading = AnnotatedString("Welcome to heading")
val titleTextMeasurer = rememberTextMeasurer()
val titleTextLayoutResult = remember {
titleTextMeasurer.measure(heading, TextStyle(fontSize = 16.sp, color = Color.White))
}
val canvasHeight = with(LocalDensity.current) {
titleTextLayoutResult.size.height.toDp()
}
Canvas(
modifier = Modifier
.fillMaxWidth()
.background(Color.Black)
.height(canvasHeight)
) {
drawText(
textLayoutResult = titleTextLayoutResult,
topLeft = Offset(
x = center.x - titleTextLayoutResult.size.width / 2,
y = center.y - titleTextLayoutResult.size.height / 2,
)
)
}
}
}
@OptIn(ExperimentalTextApi::class)
@Composable
fun TimeLineComposable() {
Column(modifier = Modifier.fillMaxSize()) {
val movieList = getMovieList()
val heading = AnnotatedString("Welcome to heading")
Canvas(
modifier = Modifier
.fillMaxWidth()
.background(Color.Black)
.height(canvasHeight)
) {
movieList.forEach {
val titleTextMeasurer = rememberTextMeasurer()
val titleTextLayoutResult = remember {
titleTextMeasurer.measure(heading, TextStyle(fontSize = 16.sp, color = Color.White))
}
val canvasHeight = with(LocalDensity.current) {
titleTextLayoutResult.size.height.toDp()
}
drawText(
textLayoutResult = titleTextLayoutResult,
topLeft = Offset(
x = center.x - titleTextLayoutResult.size.width / 2,
y = center.y - titleTextLayoutResult.size.height / 2,
)
)
}
}
}
}
Zach Klippenstein (he/him) [MOD]
05/02/2023, 5:02 PMmeasure
on it as many times as you need from in your canvasdrawWithCache
)KotlinLeaner
05/02/2023, 5:05 PMrememberTextMeasurer
outside of canvas blockZach Klippenstein (he/him) [MOD]
05/02/2023, 5:07 PMKotlinLeaner
05/02/2023, 5:11 PM@OptIn(ExperimentalTextApi::class)
@Composable
fun TimeLineComposable() {
Column(modifier = Modifier.fillMaxSize()) {
val movieList = getMovieList()
val titleTextMeasurer = rememberTextMeasurer()
var canvasHeight by remember { mutableStateOf(0.dp) }
Canvas(
modifier = Modifier
.fillMaxWidth()
.background(Color.Black)
.height(canvasHeight)
) {
movieList.forEach {
val titleTextLayoutResult = titleTextMeasurer.measure(
AnnotatedString(it.showDay),
TextStyle(fontSize = 16.sp, color = Color.White)
)
canvasHeight = titleTextLayoutResult.size.height.toDp()
drawText(
textLayoutResult = titleTextLayoutResult,
topLeft = Offset(
x = center.x - titleTextLayoutResult.size.width / 2,
y = center.y - titleTextLayoutResult.size.height / 2,
)
)
}
}
}
}
This is not working, because height didn't get it by canvasHeight
Canvas(
modifier = Modifier
.fillMaxWidth()
.background(Color.Black)
.height(canvasHeight)
) {
Zach Klippenstein (he/him) [MOD]
05/02/2023, 5:13 PMKotlinLeaner
05/02/2023, 5:15 PMval titleTextLayoutResult = titleTextMeasurer.measure(
AnnotatedString(it.showDay),
TextStyle(fontSize = 16.sp, color = Color.White)
)
canvasHeight += titleTextLayoutResult.size.height.toDp()
Zach Klippenstein (he/him) [MOD]
05/02/2023, 5:20 PMModifier.layout { measurable, constraints ->
// 1. Measure all your texts using textMeasurer.measure(…)
// 2. Calculate height, width based on constraints and text measurement results
// e.g. val height = textBounds.sumOf { it.height }.coerceAtMost(constraints.maxHeight)
// 3. Determine child constraints using that height and whatever you want for width.
// e.g. val childConstraints = constraints.copy(minHeight = height, maxHeight = height)
val placeable = measurable.measure(childConstraints)
layout(placeable.width, placeable.height) {
placeable.place(0, 0)
}
}
Column
with a bunch of child `BasicText`s, so why not just do that?KotlinLeaner
05/02/2023, 5:22 PMHalil Ozercan
05/02/2023, 5:42 PMKotlinLeaner
05/02/2023, 5:44 PMArjan van Wieringen
05/02/2023, 5:50 PMKotlinLeaner
05/02/2023, 5:51 PMArjan van Wieringen
05/02/2023, 6:31 PMKotlinLeaner
05/02/2023, 6:34 PMArjan van Wieringen
05/02/2023, 6:35 PMKotlinLeaner
05/02/2023, 6:36 PMArjan van Wieringen
05/02/2023, 6:36 PMcanvas
."KotlinLeaner
05/02/2023, 6:38 PM