is there a way to know the maximum height and maxi...
# compose
c
is there a way to know the maximum height and maximum width of a Column or (Row)? I just know about BoxWithConstraints
a
what do you want to do with the information?
c
I want to animate an object from the beginning to the end of the column, for example
the maximum width would be the end point of the offset 🤔
is this a bad approach?
a
if you're referring specifically to
Modifier.offset
I might avoid that, since its modifications don't participate in the parent layout; it's easy to make a parent layout confused when those offsets are large and usually an indication that you want to involve the parent more in some way
do you want the animation to cause the container to grow as it plays, or should the container be the final/max size at all times?
c
the second case
a
if you want it not to change the size of the parent container, maybe something like:
Copy code
Modifier.weight(1f)
  .wrapContentWidth(align = Alignment { size, space, layoutDirection -> /* TODO: return a value based on the animation */ })
you can use
Alignment.Horizontal
instead of
Alignment
if you only care about the one dimension
but it gives you the size of the modified element and the space it's being aligned within to work with
c
I'm going to try your example, to see if it's what I'm looking for hehe
sometimes I feel lost because it seems that there are many ways to do the same, but each has its nuances
a
yeah. Under the hood there are only a few major concepts, but lots of purpose-built helpers on top of those for different situations. To give the advice above I started from which of those low-level concepts should be responsible and then looked for an existing helper that does that thing.
Compose's major output phases are composition, layout, and drawing.
Composition is for making structural changes to the UI; we didn't need that here, we just wanted to move something around.
Drawing is just for painting whatever has already been positioned, not really for positioning those things
which leaves layout as the step to explore
That leaves two main tools: the
Layout
composable for coordinating multiple elements together and the
Modifier.layout {}
modifier for altering the sizing and positioning of single elements in isolation. We only needed to manipulate one thing, so the modifier is the easier way to work with it. The
Layout
composable always has to deal with the possibility of zero or more than one child element, which always adds some complexity. Better to skip that when you can.
The behavior we wanted could be done with `Modifier.layout`; it gets the min/max sizes requested, and we can measure the child in any way we need. Then we can report a size for the modified element and position the measured child within that space.
Modifier.wrapContentSize
already implements most of that for us and by writing a custom
Alignment
we can worry only about that last part - the positioning within the space occupied.
and then we can simplify even further to
Modifier.wrapContentWidth
or
Height
if all we need is either vertical or horizontal alignment, but not both.
c
thanks for explaining the reasoning behind your answer, it is super useful, as always it´s a pleasure to read your answers 🔝
❤️ 1
k
Adam, have you thought about making a blog post about it? I feel this could help a lot with a mental model for advanced layouts
6
a
Yes, I'd very much like to. Hopefully I'll have some time to work with our devrel team on something like this in the next quarter or so
👍 1
❤️ 2
we definitely have a gap in, "here is how the layout system works from first principles, here is what everything else is based on" docs
k
That’d be awesome
3
a
separately, it'd also be fun to do something sort of informal and ongoing like the old new thing is for windows stuff like this: https://devblogs.microsoft.com/oldnewthing/
👀 1
Raymond Chen has been a longtime career inspiration 🙂
k
That kind of blog post series would definitely help connecting the dots regarding internal working of compose, like “it works this way, here’s why”
would definitely subscribe!