Abhinav Suthar
05/16/2022, 4:31 PM@Stable
@Composable
fun Arrangement.rememberOverlappingFormat(overlapSize: Int): Arrangement.HorizontalOrVertical = remember(overlapSize) {
OverlappingFormat(overlapSize)
}
class OverlappingFormat(private val overlapSize: Int) : Arrangement.HorizontalOrVertical {
override fun Density.arrange(totalSize: Int, sizes: IntArray, layoutDirection: LayoutDirection, outPositions: IntArray) {
arrange(totalSize, sizes, outPositions)
}
override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) {
sizes.forEachIndexed { index, _ ->
outPositions[index] = sizes.take(index).sum() - overlapSize * index
}
}
}
Row(
horizontalArrangement = Arrangement.rememberOverlappingFormat(overlapSize.toPx().roundToInt())
) {
itemsListOfThree.forEach {
Box(
modifier = Modifier
.size(32.dp)
.clip(CircleShape)
.border(
width = 2.dp,
color = Color(0xFF1A1A1A),
shape = CircleShape
)
.zIndex((reactionUrlsList.size - index).toFloat()),
)
}
}
Oleksandr Balan
05/16/2022, 5:13 PMLayout
instead of custom arrangement as Row measures it's size before applying arrangement to it's children..spacedBy(-4.dp)
Row
However you may tweak z-index so that items are laid out as in your case
Row(
horizontalArrangement = Arrangement.spacedBy(-50.dp),
modifier = Modifier.background(Color.White)
) {
repeat(4) {
Image(
painter = painterResource(R.drawable.android),
contentDescription = null,
modifier = Modifier
.size(100.dp)
.background(Color.White, CircleShape)
.padding(8.dp)
.background(Color.Black, CircleShape)
.padding(8.dp)
.zIndex(-it.toFloat())
)
}
}
Abhinav Suthar
05/16/2022, 5:54 PM