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

nuhkoca

06/14/2022, 10:58 AM
Hello, is it possible to limit width of
placeables
using custom layout? In my case, button overlaps other items but I would expect other components to get smaller as much as button gets wider. Code in the 🧵
Copy code
layout(constraints.maxWidth, height) {
    titlePlaceable.placeRelative(x = 0, y = iconPlaceable.height / 2 - titlePlaceable.height / 2)
    iconPlaceable.placeRelative(x = titlePlaceable.width, y = 0)
    performancePlaceable.placeRelative(
        x = 0,
        y = iconPlaceable.height / 2 + titlePlaceable.height / 2 + titleBottomSpacing
    )
    followButtonPlaceable.placeRelative(
        x = constraints.maxWidth - followButtonPlaceable.width,
        y = (contentHeight - followButtonPlaceable.height) / 2
    )
}
f

Filip Wiesner

06/14/2022, 11:00 AM
is it possible to limit width of
placeables
Not of placeables but
mearurable
s. You have to constraint them in measure phase
n

nuhkoca

06/14/2022, 11:02 AM
thanks Filip, awesome! so could you please tell me how can I achieve having the same effect of
Button(Modifier.weight(1f))
so button will take precedence this is my code for `mearurable`s
Copy code
val placeables = measurables.map {
    it.measure(constraints)
}
f

Filip Wiesner

06/14/2022, 11:04 AM
Here you are measuring all measurables with the same constraints. You will have to first measure the measurables that have priority and than constraint the other measurables to take only the rest of the space.
n

nuhkoca

06/14/2022, 11:08 AM
I see, awesome let me try it out
but why then the components on the left hand side didn’t take precedence by default and squeezed under the button, is that expected? I guess by default any of them takes the same prio so this is the reason right? 🙂
f

Filip Wiesner

06/14/2022, 11:13 AM
Yes beacause you measured all of them with the same constraints. You have to tell the components how much space they can take. There is no "default" priority. Everything is up to you
If the button should take the rest of the space after the other components, you will have to measure the other components first and than measure the button with constraints that reflect this remaining space. Something like this
Copy code
val remainingWidth = constraints.maxWidth - spaceTakenByOtherComponents
buttonMeasurable.measure(
    Constraints(maxWidth = remainingWidth)
)
n

nuhkoca

06/14/2022, 11:53 AM
Thanks. In fact, vice versa, the other ones will take the rest of the space after the button. I couldn’t manage to measure the others. Isn’t this the approach I need to take?
Copy code
measurables.first().measure(constraints.copy(maxWidth = 150))
so how to pass the correct constraints for those which need to be measured first? Sorry I am pretty dumb at this things 🙂
f

Filip Wiesner

06/14/2022, 12:10 PM
Ok, let's look at it from different angle.
measurables
is list of components that you are passing to the
content
lambda of your layout. They are in the same order as called in the
content
. In the first step you get those that are prioritized over others and measure them with all of the available space (e.g.
Constraints(maxWidth = constraints.maxWidth, maxHeight = constraints.maxheight)
). It's not the best practice to copy the constraints that are given to you in measure policy scope. You might copy min constraints as well and you rarely want that. When you have the priority measurables measeured, you can determine how much space you have left and constraint the remaining measurables to this space. In other words, you measure the measurables one by one, creating custom
Constraints
for each of them to match the actual remaining space. I was looking for some good example in google compose samples but couldn't find any layout where one measurable would constraint some other.
n

nuhkoca

06/14/2022, 1:28 PM
Thanks man for the detail explanation Filip. Okay I got that I can create a prioritized component with
Constraints(maxWidth = constraints.maxWidth, maxHeight = constraints.maxheight)
and can slice the remaining space for the rest. So I have 3 components in a row,
Text
,
Icon
and
Button
. So
Button
would already have been laid out. Might be a stupid question but how could I determine the correct width for the rest. For instance,
Text
will more space from the remaining space than the
Icon
does. How can I figure out the best width
f

Filip Wiesner

06/14/2022, 1:33 PM
You know the max width from the layout constraints you received so in this case you just subtract the width of the button and you get the remaining available space.
n

nuhkoca

06/14/2022, 3:42 PM
Thanks Filip, will look into this considering your advices. Appreciate your help here!
🦜
🎉 1
f

Filip Wiesner

06/14/2022, 4:25 PM
Nice, I'm glad I could help
🙏 1
2 Views