Reputation: 3063
I need to have a composition which dynamically adjusts child view width depending on available space.
Rules:
These are the different behaviour variants I need from the composition.
I have the following code, but dividers do not have the same size when text overflows its space:
@Preview
@Composable
fun MyComponent() {
val minLineWidth = 3.dp
val maxLineWidth = 16.dp
val idLeft = "line_left"
val idRight = "line_right"
val idText = "text"
val constraint = ConstraintSet {
val startLineRef = createRefFor(idLeft)
val endLineRef = createRefFor(idRight)
val textRef = createRefFor(idText)
constrain(startLineRef) {
start.linkTo(parent.start)
end.linkTo(textRef.start)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
width = Dimension.preferredWrapContent.atLeast(minLineWidth).atMost(maxLineWidth)
}
constrain(endLineRef) {
end.linkTo(parent.end)
start.linkTo(textRef.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
width = Dimension.preferredWrapContent.atLeast(minLineWidth).atMost(maxLineWidth)
}
constrain(textRef) {
start.linkTo(startLineRef.end)
end.linkTo(endLineRef.start)
width = Dimension.preferredWrapContent.atMostWrapContent
}
}
ConstraintLayout(
modifier = Modifier.requiredWidth(80.dp),
constraintSet = constraint,
) {
Divider(
modifier = Modifier
.layoutId(idLeft),
color = Color.Red
)
Divider(
modifier = Modifier
.layoutId(idRight),
color = Color.Blue
)
Text(
modifier = Modifier
.layoutId(idText),
text = "ABCDEFG",
textAlign = TextAlign.Center,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
Suggestions to have divider to always have the same size when shrinking due to text size?
Upvotes: 1
Views: 30