2022.9.8 Compose布局（二）

2022-09-08

Compose布局（二）

1.自定义布局

在Compose中,界面元素由可组合函数表示,此类函数在被调用后会发出一部分界面,这部分界面随后会被添加到呈现在屏幕上的界面树中。每个界面元素都有一个父元素,还可能由多个子元素。此外,每个元素在其父元素中都有一个位置,指定为(x,y)位置;也都有一个尺寸,指定为width和height

1.1 使用布局修饰符

可以使用layout修饰符来修改元素的测量和布局方式。Layout是一个lambda;它的参数包括可以测量的元素(以measurable的形式传递)以及该可组合项的传入约束条件(以constraints的形式传递)

padding

@Composable
fun TextWithPaddingToBaseline(){
    ComposeP97Theme{
        Text(text = "Hi there!",
            Modifier
                .padding(24.dp)
                .background(androidx.compose.ui.graphics.Color.Red))
    }
}

firstBaselineToTop

直接使用firstBaselineToTop返回的是void,就无法继续设置background,所以要写它的拓展函数

import androidx.compose.ui.unit.dp
import com.example.composep97.ui.theme.ComposeP97Theme

/**
 * then返回一个modifier对象
 */
fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = this.then(
    layout{ measurable, constraints ->
        //测量元素
        val placeable = measurable.measure(constraints)
        //测量之后,获取元素的基线值
        val firstBaseline = placeable[FirstBaseline]
        //元素新的Y坐标 = 新基线值 - 旧基线值
        val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
        val height = placeable.height + placeableY
        /*width和height是元素的宽和高*/
        layout(placeable.width,height){
            //设置元素的位置
            placeable.placeRelative(0,placeableY)
        }
    }
)

@Composable
fun TextWithPaddingToBaseline(){
    ComposeP97Theme{
        Text(text = "Hi there!",
            Modifier
                .firstBaselineToTop(24.dp)
                .background(androidx.compose.ui.graphics.Color.Red))
    }
}

MyOwnColumn

自定义布局实现Column的效果

首先测量,拿到每一个元素的高度,然后每一个元素的高度都等于前面所有元素的高度和

@Composable
fun MyOwnColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
    ){
    Layout(content = content, modifier = modifier){ measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        var yPosition = 0
        // 布局的大小
        layout(constraints.maxWidth,constraints.maxHeight){
            placeables.forEach{ placeable ->
                //设置元素的位置
                placeable.placeRelative(x = 0,y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

使用MyOwnColumn

@Composable
fun MyOwnColumnSample(){
    ComposeP97Theme{
        MyOwnColumn{
            Text(text = "MyOwnColumn")
            Text(text = "places items")
            Text(text = "vertically")
            Text(text = "We've done it by hand")
        }
    }
}

StaggeredGrid

准备一个圆角卡片,里面包含一个Box和Text

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    text: String
){
    //一个卡片,圆角,里面包含一个Row,第一列是Box,第二列是文本
    Card(
        modifier = modifier,
        border = BorderStroke(color = Color.Black,width = Dp.Hairline),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp),
            verticalAlignment = Alignment.CenterVertically
            ) {
                Box(modifier = Modifier
                    .size(16.dp)
                    .background(color = MaterialTheme.colors.secondary)
                )
            
                Spacer(modifier = Modifier.width(4.dp))

                Text(text = text)
        }
    }
}

准备一个测试列表

val topics = listOf<String>(
    "Arts & Crafts",
    "Beauty",
    "Books",
    "Business",
    "Comics",
    "Culinary",
    "Design",
    "Fashion",
    "Film",
    "History",
    "Maths"
)

首先要计算出来布局的宽高,计算出最宽的那一行就是布局的宽度,每一行高度最高之和就是布局的高度

简简单单写个自定义布局

@Composable
fun StaggeredGrid(
    modifier: Modifier = Modifier,
    rows: Int = 3,
    content: @Composable () -> Unit
){
    Layout(
        modifier = modifier,
        content = content
    ){ measurables,constraints ->
        //用于存储每行的宽度
        val rowWidths = IntArray(rows){ 0 }
        //用于存储每行的高度
        val rowHeights = IntArray(rows){ 0 }
        //测量所有的元素
        val placeables = measurables.mapIndexed { index,measurable ->
            //测量每一个元素
            val placeable = measurable.measure(constraints)
            /**
             * 计算每一行的宽度和高度
             * 元素下标:假设总共有11个元素
             * index:0,1,2,3,4,5,6,7,8,9,10
             * 行数:假设3行
             * rows:3
             * 保存行宽高数组的下标值:
             * row:0,1,2
             */
            val row = index % rows  //确保row下标一直小于3
            //一行的宽度等于这一行所有元素宽度之和
            rowWidths[row] += placeable.width
            //一行的高度,应该是这一行中高度最高的那个元素的高度
            rowHeights[row] = kotlin.math.max(rowHeights[row],placeable.height)

            placeable
        }

        //计算表格的宽高
        //表格的宽度,应该是所有行当中最宽的那一行的宽度
        val width = rowWidths.maxOrNull() ?: constraints.minWidth
        //表格的高度,应该是所有行高度之和
        val height = rowHeights.sumOf { it }

        //设置每一行的Y坐标
        val rowY = IntArray(rows) { 0 }
        //第一行y坐标是0,索引从1开始
        for (i in 1 until rows){
            //第i行的坐标等于第i-1行的坐标+第i-1行的高度
            rowY[i] = rowY[i-1] + rowHeights[i-1]
        }

        layout(width,height){
            val rowX = IntArray(rows){ 0 }
            //设置每一个元素的坐标
            placeables.forEachIndexed{ index,placeable ->
                val row = index % rows
                placeable.placeRelative(
                    x = rowX[row],
                    y = rowY[row]
                )

                rowX[row] += placeable.width
            }
        }
    }
}

再使用我们写好的这个布局容器,将测试列表填充进去

@Composable
fun StaggeredGridBodyContent(modifier: Modifier = Modifier){
    Row(
        modifier = modifier
            .background(color = Color.LightGray)
            .padding(16.dp)
            .horizontalScroll(rememberScrollState()),
        content = {
            StaggeredGrid(modifier = Modifier) {
                for (topic in topics){
                    Chip(text = topic, modifier = Modifier.padding(8.dp))
                }
            }
        }
    )
}