Jetpack Compose Layouts

Иногда для вёрстки сложных экранов не хватает Row, Column, Box и других встроенных контейнеров, тогда нам приходится писать свои собственные. В этой статье мы напишем Row, который переносит дочерние элементы на следующую строку в случае недостатка места.

Эта статья поделена на 2 части: базовую и продвинутую.

Для создания собственных контейнеров в Compose используется элемент Layout:

@Composable
fun Layout(content: @Composable () -> Unit, modifier: Modifier = Modifier, measurePolicy: MeasurePolicy)

• content - тело контейнера, содержащее все дочерние элементы.

• measurePolicy - объект, отвечающий за расположение элементов внутри контейнера

Основной элемент будет выглядеть так:

@Composable
inline fun RowWithWrap(
    modifier: Modifier = Modifier,
    verticalSpacer: Dp = 0.dp,
    horizontalSpacer: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    Box(modifier) {
        Layout(
            content = content,
            measurePolicy = rowWithWrapMesaurePolicy(verticalSpacer, horizontalSpacer)
        )
    }
}

• verticalSpacer и horizontalSpacer - отступы между элементами по вертикали и горизонтали соответственно.

• Box(modifier) - это небольшой костыль. Заставить Layout корректно обработать Modifier на уровне базовой статьи мы не можем. Это мы решим в продвинутой статье.

• rowWithWrapMesaurePolicy создаёт политику расположения элементов исходя из отступов. Это так же понадобится в продвинутой статье

@Composable
fun rowWithWrapMesaurePolicy(
    verticalSpacer: Dp = 0.dp,
    horizontalSpacer: Dp = 0.dp
): MeasurePolicy = remember(verticalSpacer, horizontalSpacer) {
    MeasurePolicy { measurables: List<Measurable>, constraints: Constraints ->
        val positions = rowWithWrapRelativePositions(constraints, measurables, verticalSpacer, horizontalSpacer)
        val width = maxOf(positions.maxOf { it.maxXCoordinate }, constraints.minWidth)
        val height = minOf(maxOf(positions.maxOf { it.maxYCoordinate }, constraints.minHeight), constraints.maxHeight)
        layout(width, height) {
            for ((placeable, dx, dy) in positions) {
                placeable.placeRelative(dx, dy)
            }
        }
    }
}

• Нам необходимо использование remember, чтобы не создавать лишних объектов каждую рекомпозицию.

• MeasurePolicy - интерфейс с одним не реализованным, так что мы можем использовать лямбда выражение.

• measurables - все дочерние элементы контейнера.

• constraints - ограничения в размерах

• Метод rowWithWrapRelativePositions вычисляет расположение всех элементов относительно верхнего левого угла контейнера. Возвращает наш дата-класс, но об этом далее.

• layout(width, height) устанавливает размеры контейнера. Внутри него мы располагаем все элементы на вычисленных ранее местах.

private fun MeasureScope.rowWithWrapRelativePositions(
    constraints: Constraints,
    measurables: List<Measurable>,
    verticalSpacer: Dp,
    horizontalSpacer: Dp
): List<PlaceableRelativePosition> {
    val res = mutableListOf<PlaceableRelativePosition>()
    var x = 0
    var y = 0
    var maxHeight = -1

    for (measurable in measurables) {
        val placeable = measurable.measure(constraints)
        if (placeable.width + x > constraints.maxWidth) {
            y += maxHeight + verticalSpacer.roundToPx()
            x = 0
            maxHeight = -1
        }
        res += PlaceableRelativePosition(placeable, x, y)
        x += placeable.width + horizontalSpacer.roundToPx()
        maxHeight = maxOf(maxHeight, placeable.height)
    }

    return res
}

private data class PlaceableRelativePosition(val placable: Placeable, val dx: Int, val dy: Int)

private val PlaceableRelativePosition.maxXCoordinate: Int
    get() = dx + placable.width

private val PlaceableRelativePosition.maxYCoordinate: Int
    get() = dy + placable.height

• Measurable::measure вычисляет размеры дочернего элемента исходя из внешних ограничений.

• maxXCoordinate и maxYCoordinate - это самое правое и нижнее занятые места соответственно.

Результат: