sindrenm
10/08/2020, 7:11 AMJamie Craane
10/08/2020, 7:23 AMsindrenm
10/08/2020, 8:33 AMonSizeChanged
modifier. No need for a ConstraintLayout
, though, just adding a top padding on a box is enough. simple smileZach Klippenstein (he/him) [MOD]
10/08/2020, 10:42 AMsindrenm
10/08/2020, 11:02 AMtop.linkTo(otherComposable.verticalCenter)
, then that would be best. But AFAIK there is no such thing in ConstraintLayout.java
either, and the Compose stuff probably just mirrors/delegates to that.@Composable
@Preview
fun Test() {
Box(Modifier.fillMaxSize()) {
ConstraintLayout(Modifier.align(Alignment.Center)) {
val (redBoxInTheBack, gradientBoxOnTop) = createRefs()
Box(modifier = Modifier
.height(200.dp)
.width(200.dp)
.background(Color.Red)
.constrainAs(redBoxInTheBack) {
top.linkTo(<http://parent.top|parent.top>)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
)
Box(modifier = Modifier
.height(50.dp)
.width(100.dp)
.background(VerticalGradient(listOf(Color.Green, Color.Blue), startY = 0f, endY = 100f))
.constrainAs(gradientBoxOnTop) {
centerAround(<http://parent.top|parent.top>)
start.linkTo(redBoxInTheBack.start)
}
)
}
}
}
The problem I'm having is that I can constrain the center of a composable to the top of somewhere, but I can't constrain the top of something to the center of something else, if that makes sense. And so that means that if I don't have any padding around my composable, then it clips the gradient box on the top, like in the second screenshot. It clipping the top there makes sense, I guess, because the red box is supposed to be at the parent's top, but I don't see how I can put the gradient box on top and then place the red box' top on the gradient box' center. Any ideas? 🤔Zach Klippenstein (he/him) [MOD]
10/08/2020, 11:56 AMsindrenm
10/08/2020, 12:05 PMConstraintLayout
(because it's centered in the outer Box
). Second example is essentially the same thing, but where the outermost Box
has no Modifier.fillMaxSize()Modifier.fillMaxSize()
.Jamie Craane
10/08/2020, 12:33 PMsetContent {
MyApplicationTheme {
Box(modifier = Modifier.height(200.dp).width(200.dp).background(Color.Gray)) {
Layout(children = {
Box(modifier = Modifier.height(150.dp).width(150.dp).background(Color.Red))
Box(modifier = Modifier.height(50.dp).width(100.dp).background(Color.Green))
}) { measurables, constraints ->
val placeables = measurables.map { measurable ->
measurable.measure(constraints)
}
layout(constraints.maxWidth, constraints.maxHeight) {
val second = placeables[1]
val first = placeables.first()
first.placeRelative(0, second.height / 2)
second.placeRelative(0, 0)
}
}
}
}
}
produces the result as in the attached screenshot. You might need to tune the code because it always assumed two composables exists.Zach Klippenstein (he/him) [MOD]
10/08/2020, 12:38 PMJamie Craane
10/08/2020, 12:49 PMZach Klippenstein (he/him) [MOD]
10/08/2020, 12:52 PMlayout()
should be the actual dimensions after measuring. E.g.:Jamie Craane
10/08/2020, 12:55 PMZach Klippenstein (he/him) [MOD]
10/08/2020, 12:55 PMJamie Craane
10/08/2020, 12:58 PMsindrenm
10/08/2020, 1:17 PMLayout
, but that's definitely the way to go in this case. Also, thanks for pointing out the needed size adjustments. Makes sense. 👏 ❤️Zach Klippenstein (he/him) [MOD]
10/08/2020, 1:59 PMJamie Craane
10/08/2020, 2:00 PM