初探 Jetpack Compose 的布局奥秘：自定义布局篇（一）

2023-10-04 08:02:02

Jetpack Compose 布局秘笈：揭秘自定义布局的艺术

布局原理：组合与范围

Jetpack Compose 的布局是基于组合和范围的概念。组合是接收可组合项（如布局、修饰符和内容）并返回新可组合项的函数。范围定义了组合的执行上下文，允许访问 Compose 环境中的值和状态。

布局本质上就是一系列组合的嵌套。每个组合创建一个节点并将其添加到父节点。布局的结构由组合的嵌套顺序决定，类似于 XML 布局。

自定义布局：纵向布局（Column）

要了解自定义布局，我们从简单的纵向布局（Column）开始：

@Composable
fun MyColumn(
    modifier: Modifier = Modifier,
    children: @Composable () -> Unit
) {
    // 实现自定义测量策略
    val measurePolicy = remember {
        layout { measurable, constraints ->
            // 测量子项
            val placeables = measurable.map { it.measure(constraints) }

            // 计算布局大小
            var height = 0
            var width = 0
            placeables.forEach {
                height += it.height
                width = maxOf(width, it.width)
            }
            val size = Size(width, height)

            // 定位子项
            var y = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(0, y)
                y += placeable.height
            }

            size
        }
    }

    // 使用自定义测量策略进行布局
    Layout(
        modifier = modifier,
        measurePolicy = measurePolicy,
        content = children
    )
}

此自定义布局使用了 Layout 可组合项，并为其提供了我们自己的测量策略。测量策略负责计算布局大小和定位子项。通过测量子项、计算布局大小和按顺序定位子项，我们实现了纵向布局的自定义行为。

自定义布局：简易瀑布流布局

现在，让我们尝试实现一个更复杂的自定义布局——简易瀑布流布局：

@Composable
fun My瀑布流布局(
    modifier: Modifier = Modifier,
    children: @Composable () -> Unit
) {
    // 实现自定义测量策略
    val measurePolicy = remember {
        layout { measurable, constraints ->
            // 测量子项
            val placeables = measurable.map { it.measure(constraints) }

            // 计算布局大小
            val width = constraints.maxWidth
            val height = constraints.maxHeight

            // 初始化列列表和当前列高度
            val columns = mutableListOf<Column>()
            val columnHeights = mutableListOf<Int>()
            repeat(constraints.maxWidth / MIN_COLUMN_WIDTH) {
                columns.add(Column())
                columnHeights.add(0)
            }

            // 将子项分配到列中
            placeables.forEach { placeable ->
                val shortestColumn = columns.minByOrNull { it.height }!!
                shortestColumn.add(placeable)
                columnHeights[columns.indexOf(shortestColumn)] += placeable.height
            }

            // 计算布局大小
            var layoutWidth = 0
            var layoutHeight = 0
            columnHeights.forEach {
                layoutWidth = maxOf(layoutWidth, it)
                layoutHeight += it
            }
            val size = Size(layoutWidth, layoutHeight)

            // 定位子项
            var x = 0
            var y = 0
            columns.forEach { column ->
                column.placeables.forEach { placeable ->
                    placeable.placeRelative(x, y)
                    y += placeable.height
                }
                x += MIN_COLUMN_WIDTH
                y = 0
            }

            size
        }
    }

    // 使用自定义测量策略进行布局
    Layout(
        modifier = modifier,
        measurePolicy = measurePolicy,
        content = children
    )
}

private data class Column(
    val placeables: MutableList<Placeable> = mutableListOf(),
    var height: Int = 0
)