Is there an `Arrangement` that gives each item the same amount of “room” and then aligns within that...

# compose

[Alexander Maryanovsky]

Is there an Arrangement that gives each item the same amount of “room” and then aligns within that room. Like if I put each item in a box of the same weight and aligned within the box?

[Alex]

Do you mean Arrangement.SpaceEvenly?

[Alexander Maryanovsky]

Unfortunately no. SpaceEvenly creates even spaces between the items, which is not the same.

[Rafs]

Arrangement.spacedBy(dp, Alignment)

[cb]

Arrangement doesn’t affect the measurement of items, only placement.

[Alexander Maryanovsky]

I understand that. Anyway, there doesn’t seem to be an arrangement like I want, so I wrote my own.

[Alexander Maryanovsky]

private fun placeEqually(
    totalSize: Int,
    size: IntArray,
    outPosition: IntArray,
    reverseInput: Boolean
) {
    val itemRoom = totalSize / size.size
    var current = 0
    size.forEachIndexed(reverseInput) { index, it ->
        outPosition[index] = current + (itemRoom - it)/2
        current += itemRoom
    }
}

[Alexander Maryanovsky]

for centered alignment anyway

[cb]

Ah I misread and thought this was another ‘have all items match the max size item’ 🤦‍♂️

[cb]

Your code looks good. Could even pass in an alignment and use that to affect the item float

[Alexander Maryanovsky]

The problem with all the existing arrangements is that when the size of one of the items changes, they all move around. So it doesn’t work if I want to display a row of numbers that are changing.

[cb]

The movement isn’t necessarily a problem if you use animateContentSize

[Alexander Maryanovsky]

It is in my app 🙂

[cb]

Fair enough. At least Arrangement exists and is easy to use for custom behavior

[Alexander Maryanovsky]

Could be slightly easier if IntArray.forEachIndexed(reversed: Boolean, action: (Int, Int) -> Unit) wasn’t private