Colton Idle
11/17/2021, 8:03 PMjosefdolezal
11/17/2021, 9:30 PMonSizeChanged
), then I would use that size to compute size of GreenComposable (eg. subtract column paddings, ..), then I would derive RedComposable from that. If the performance is not good enough (there will be unnecessary layout passes due to laziness of this solution), I would try to create SubcomposeLayout
to see if can spare some layout passes.BoxWithConstraints
and compute sizes of column, red and green from thatChris Sinco [G]
11/17/2021, 11:50 PMLocalConfiguration.current.screenWidthDp
to get the device width, then do a calculation based on the horizontal padding you plan to have on the green Composables list. Save that as a variable hoisted to a place in your hierarchy that can control the top Red container and the green list, and go from thereAlbert Chang
11/17/2021, 11:53 PMModifier.fillParentMaxWidth(fraction = 0.4f)
in a LazyRow
.Chris Sinco [G]
11/18/2021, 12:29 AMAlbert Chang
11/18/2021, 12:36 AMLazyRow(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
items(10) { i ->
Text(
text = (i + 1).toString(),
modifier = Modifier
.fillParentMaxWidth(fraction = 0.4f)
.height(100.dp)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
}
}
Chris Sinco [G]
11/18/2021, 12:51 AMColton Idle
11/18/2021, 1:16 AMAlbert Chang
11/18/2021, 1:29 AMLazyRow(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 16.dp * 0.8f, vertical = 16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp * 0.6f)
) {
items(10) { i ->
Text(
text = (i + 1).toString(),
modifier = Modifier
.fillParentMaxWidth(fraction = 0.4f)
.height(100.dp)
.padding(horizontal = 16.dp * 0.2f)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
}
}
Colton Idle
11/18/2021, 1:35 AM16.dp * 0.2f
and
16.dp * 0.8f,
?Albert Chang
11/18/2021, 1:40 AMModifier.fillParentMaxWidth(fraction = 0.4f)
makes the width 40% of screen width, however you want it to be 40% of (screenWidth - 16dp), so you need to add a padding of (16dp * 20%) on both sides, and accordingly substract that from contentPadding and subtract 2 * that from spacing between items.Colton Idle
11/18/2021, 2:06 AMAlbert Chang
11/18/2021, 2:10 AMColton Idle
11/18/2021, 2:11 AMColumn {
LazyRow(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
items(10) { i ->
Text(
text = (i + 1).toString(),
modifier = Modifier
.fillParentMaxWidth(fraction = 0.4f)
.height(100.dp)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
}
}
repeat(3) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = ("left 40%").toString(),
modifier = Modifier
.weight(0.4f)
.height(100.dp)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
Text(
text = ("right 60%").toString(),
modifier = Modifier
.weight(0.6f)
.height(100.dp)
.background(color = Color.Green.copy(alpha = 0.2f))
.wrapContentSize()
)
}
}
}
Albert Chang
11/18/2021, 2:13 AMColton Idle
11/18/2021, 2:14 AM@Composable
fun RedComposable(text: String, modifier: Modifier) {
Text(
text = text,
modifier = modifier
.height(100.dp)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
}
Chris Sinco [G]
11/18/2021, 3:07 AMModifier.width(<usual size>)
Colton Idle
11/18/2021, 3:10 AMModifier.width(<usual size>)
"
Where would I put that? In the RedComposable?Chris Sinco [G]
11/18/2021, 3:12 AMColton Idle
11/18/2021, 3:16 AM@Composable
fun RedComposable(text: String, modifier: Modifier.width(200.dp)) {
Text(
text = text,
modifier = modifier
.height(100.dp)
.background(color = Color.Red.copy(alpha = 0.2f))
.wrapContentSize()
)
}
Albert Chang
11/18/2021, 3:50 AMwrapContentSize()
(with the align
parameter set to its default value Alignment.Center
) aligns the text at the center. Without that the text will be placed at the top start.
You can also use Text(textAlign = TextAlign.Center)
to align the text at the center horizontally but that doesn’t change vertical alignment.Colton Idle
11/18/2021, 5:15 AMLocalConfiguration.current.screenWidthDp
as I can calculate the value once and pass it in which makes the intent a bit easier to understand to me. Overall, I'm just happy that I didn't have to go with BoxWithConstraints 😄Chris Sinco [G]
11/18/2021, 5:32 AMAlex
11/18/2021, 8:09 AMColton Idle
11/18/2021, 8:44 AMZach Klippenstein (he/him) [MOD]
11/18/2021, 5:29 PMBoxWithConstraints
Tash
06/17/2022, 8:47 AMLazyColumn
) 🙏🏼Colton Idle
06/17/2022, 7:15 PMThen you can always override the width where you use the RedComposable based on the context / parent containerSo a technique I was mostly taking was that "hey wouldn't it be convenient if this composable always just knew it should be fill max width" and after chris' comments and the rest of the comments above I basically conceded to the fact that it's kinda like not doing dependency injection. Sure. Having a class where I don't have to pass in a bunch of services to make it work correctly is convenient, but its extremely limiting. So yeah. I basically typically have composables take up the least amount of space possible, and then have a modifier so it can be adjusted based on its context.