https://kotlinlang.org logo
#compose
Title
# compose
m

mgrazianodecastro

03/06/2023, 5:09 PM
easiest way of doing something like this in a row?
Copy code
----------------------------------------------------
| A |                 | C |                        |
----------------------------------------------------
the cleanest solution I have is to use a Box instead and align based on it
CenterStart
for A, and
Center
for C
e

ephemient

03/06/2023, 5:17 PM
Copy code
Row {
    A()
    Spacer(modifier = Modifier.weight(1f))
    C()
    Spacer(modifier = Modifier.weight(1f)
}
(C will be centered between the end of A and the end of the row, which is a bit different than being centered in the row; not sure if that's what you want)
m

mgrazianodecastro

03/06/2023, 5:18 PM
it would be centered on the whole row
m

Marco Pierucci

03/06/2023, 5:18 PM
Cant you use
horizontalArrangement = Arrangement.SpaceBetween
and add a third empty composable ( like a box or something)?
e

ephemient

03/06/2023, 5:18 PM
even if it overlaps with A? then your current Box solution is fine
m

mgrazianodecastro

03/06/2023, 5:19 PM
good catch. Because of the screen size constraint, I think it would never happen
@Marco Pierucci lemme try it
e

ephemient

03/06/2023, 5:22 PM
that would have the same effect as the two spacers
m

mgrazianodecastro

03/06/2023, 5:24 PM
yeah, it doesn't achieve that. Oh well, I think the design of Row is intended to be like that, because of the catch @ephemient commented
f

Francesc

03/06/2023, 6:46 PM
you can always create a custom layout, they're very easy to implement on compose
m

mgrazianodecastro

03/06/2023, 7:00 PM
Yeah, they do seem to be the most general solution, but I always fell like avoiding custom layouts since they add a lot of code. But, I'm sure I eventually will not be able to escape the route 😅
e

ephemient

03/06/2023, 8:05 PM
custom layouts aren't that much code
for example, this will behave like
Box(modifier = Modifier.fillMaxWidth()) { A(modifier = Modifier.align(Alignment.CenterStart)); B(modifier = Modifier.align(Alignment.Center)) }
, but also prevent them from overlapping:
Copy code
Layout(
    content = {
        A()
        B()
    },
    modifier = Modifier.fillMaxWidth(),
    measurePolicy = { measureables, constraints ->
        check(measureables.size == 2)
        val placeableA = measureables[0].measure(constraints.copy(minWidth = 0))
        val placeableB = measureables[1].measure(constraints.copy(minWidth = 0).offset(horizontal = -placeableA.width))
        val width = constraints.constrainWidth(placeableA.width + placeableB.width)
        val height = constraints.constrainHeight(maxOf(placeableA.height, placeableB.height))
        layout(width, height) {
            placeableA.placeRelative(0, (height - placeableA.height) / 2)
            placeableB.placeRelative(((width - placeableB.width) / 2).coerceAtLeast(placeableA.width), (height - placeableB.height) / 2)
        }
    }
)
m

mgrazianodecastro

03/07/2023, 2:33 PM
yeah, I think I'm just lazy. It's probably because I'm already dealing with so many things in the work, so my instincts get scared to dive into custom layouts. Thanks for the example, I'm gonna use it as a starting point
5 Views