Android---Jetpack Compose学习002

Compose 布局。Compose 布局的目标：1）实现高性能；2）让开发者能够轻松编写自定义布局；3）在 Compose 中，通过避免多次测量布局子级可实现高性能。如果需要进行多次测量，Compose 具有一个特殊系统，即固有特性测量。

标准布局组件

$\bullet$ 使用 Column 可将多个像垂直地放置在屏幕上；

$\bullet$ 使用 Row 可将多个项水平地放置在屏幕上；

$\bullet$ 使用 Box 可将一个元素放在另一个元素上。类似于 FrameLayout 布局。

修饰符

修饰符的作用类似于xml 布局中的布局参数。借助修饰符，可以修饰或扩充可组合项。我们可以使用修饰符来执行以下操作：

$\bullet$ 更改可组合项的大小、布局、行为和外观；

$\bullet$ 添加信息，如无障碍标签；

$\bullet$ 处理用户输入；

$\bullet$ 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放。

示例：通过标准布局组件与修饰符实现如下布局效果

1. 新建一个 PhotoGrapherCard.kt 文件，进行布局

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

/**
 * @Author HL
 * @Date 2023/12/26 20:21
 * @Version 1.0
 */
@Composable
fun PhotographerCard(modifier: Modifier = Modifier){
    // TODO 水平放置，从左到右
    Row(
        modifier = Modifier
            .clip(RoundedCornerShape(4.dp)) // 设置圆角
            .background(color = MaterialTheme.colors.surface) // surface 是白色
            .clickable(onClick = {})
            .padding(all = 16.dp) // 设置点击时，水波纹效果

    ) {

        Surface (
            modifier = Modifier.size(50.dp),//设置图片大小
            shape = CircleShape, // 设置圆形形状
            // onSurface 是黑色
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f) // 设置颜色。copy()把这个颜色复杂过来，然后设置一个透明度
        ) {
            Image(
                painter = painterResource(id = R.drawable.beauty), // 设置图片加载位置
                contentDescription = null
            )
        }

        // TODO 垂直放置，从上到下
        Column (
            modifier = Modifier
                .padding(start = 8.dp) // 左边设置填充 8dp
                .align(Alignment.CenterVertically) // 让文字垂直居中
        ) {
            Text(
                text = "Alfred Sisley",
                fontWeight = FontWeight.Bold // 设置字体，bold: 粗体
            )
            //LocalContentAlpha provides ContentAlpha.medium == LocalContentAlpha.provides(ContentAlpha.medium)
            // provides 是一个被 infix 修饰的函数。可以省略链式调用的“." 以及一对圆括号"()"
            // 隐式传参
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text(
                    text = "3 minutes ago",
                    style = MaterialTheme.typography.body2 // 设置字体
                )
            }

        }
    }
}

2. 在 MainActivity.kt 里调用 PhotoGrapherCard

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeLayoutsTheme {
                PhotographerCard()
            }
        }
    }
}

修饰符的顺序

由于每个函数都会对上一个函数返回的 Modifier 进行更改，因此顺序会影响最终结果。

Slots API

Material 组件大量使用槽位 API，这是 Compose 引入的一种模式，它在可组合项之上带来一层自定义设置。这种方法使组件变得更灵活，因为它们接受可以自行配置的子元素，而不必公开子元素的每个配置参数。槽位会在界面中留出空白区域，让开发者按照自己的意愿来填充。

TopAppBar

scaffold

Scaffold 可以让我们实现具有基本 Material Design 布局结构的界面。Scaffold 可以为最常见的顶级 Material 组件（如 TopAppBar、BottomAppBar、FloatingActionButton 和 Drawer）提供槽位。通过使用 Scaffold，可轻松确保这些组件得到适当放置且正确地协同工作。

示例：

创建 LayoutStudy.kt，完成布局

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

/**
 * @Author HL
 * @Date 2023/12/26 21:15
 * @Version 1.0
 */
@Composable
fun LayoutStudy(){
    Scaffold (
        // topBar 布局顶部
        topBar = {
            TopAppBar(
                // 设置标题
                title = {
                    Text(text = "LayoutStudy")
                },
                // 设置图标
                actions = {
                    IconButton(onClick = {}) {
                        Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)
                    }
                }
            )
        }
    ) { innerPadding ->
        // 布局 body 部分
        BodyContent(Modifier.padding(innerPadding))
    }
}

@Composable
fun BodyContent(modifier : Modifier = Modifier){
    Column(modifier = Modifier.padding(8.dp)) {
        Text(text = "Hi there!")
        Text(text = "Thanks for going through the LayoutStudy")
    }
}

在 MainActivity.kt 里调用

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeLayoutsTheme {
                //PhotographerCard()
                LayoutStudy()
            }
        }
    }
}

使用列表

如果我们知道用例不需要任何滚动，可以使用简单的 Column 或 Row。如果需要显示大量列表项（或长度未知的列表），可以使用 LazyColumn 或 LazyRow。

示例：设置一个可滚动的列表。可以通过 LayColumn 实现上下滚动的列表。

1. Lists.kt

@Composable
fun ScrollingList(){
    val listSize = 100
    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    // 放一个包含2个按钮的顶部布局，再放一个 List，从上到下
    Column() {
        //TODO 放两个按钮，从左到右
        Row {
            // 第一个按钮
            Button(
                modifier = Modifier.weight(1f), // 设置权重
                onClick = {
                    //Kotlin 携程
                    coroutineScope.launch {
                        // 滚到最顶部
                        scrollState.animateScrollToItem(0)
                    }

                }
            ) {
                Text(text = "Scroll to the top")
            }
            // 第二个按钮
            Button(
                modifier = Modifier.weight(1f),
                onClick = {
                    coroutineScope.launch {
                        // 滚动最底部
                        scrollState.animateScrollToItem(listSize - 1)
                    }
                }
            ) {
                Text(text = "Scroll to the end")
            }
        }

        //TODO 放列表项
        LazyColumn(state = scrollState){
           items(listSize){
               // 列表项
               ImageListItem(index = it)
           }
        }
    }
}

@Composable
fun ImageListItem(index : Int){
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = R.drawable.beauty),
            contentDescription = null,
            modifier = Modifier.size(40.dp)
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "Item $index", style = MaterialTheme.typography.subtitle1)
    }
}

2. MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeLayoutsTheme {
                
                ScrollingList()
            }
        }
    }
}

自定义布局

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

使用布局修饰符

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

示例：我们有如下一个需求：有一个文本 “Hi threr!”，它有一个 firstbaseline（图中红框），正常情况下，firstbaseline 是到图中 1 处的距离。现在的需求是 firstbaseline 是和父元素的距离，也就是下图中 2 处的距离。

FirstBaselineToTop.kt

// firstBaselineToTop 为 Modifier 的扩展函数
fun Modifier.firstBaselineToTop(firstBaselineToTop : Dp) = this.then(// this.then() 的 放回值就是一个 Modifier

    // TODO 用 layout 修饰符来修改元素的测量和布局位置
    // measurable 测量元素；constraints 约束条件
    layout { measurable, constraints ->
        // 测量元素
        val placeable = measurable.measure(constraints)
        // 测量之后，获取元素的基线值，即 firsrBaseline 到元素顶部的值
        val firstBaseline = placeable[FirstBaseline]
        // 元素左上角新的 Y 坐标值 = 新基线值 - 旧基线值;firstBaselineToTop 方法传进来的值
        // roundToPx() 转为像素
        val Y = firstBaselineToTop.roundToPx() - firstBaseline

        // 设置元素的宽和高。元素的高是指，元素底部到父容器顶部的位置
        val height = placeable.height + Y
        layout(placeable.width, height){
            //设置元素的新位置
            placeable.placeRelative(0, Y)
        }
    }
)
@Composable
fun TextWithPaddingToBaseline(){
    JetpackComposeLayoutsTheme {

        // 这里我们要 firstBaselineToTop 设置值为 baseline 到 父容器顶部为 24dp，
        // TODO 这个值由我们自己设定
        Text(text = "Hi There!",
            Modifier
                    // 指定 firstBaselineToTop 的值
                .firstBaselineToTop(24.dp) // 这里需要返回一个 Modifier 才能继续下面的链式调用
                .background(Color.Red))
    }
}

firstBaselineToTop

右边的布局中， firstBaselineToTop 值是到父容器顶部的距离，是我们上面代码中设定的 24dp, 然后 measure 可以帮我们测出 Text 的基线高度(firstBaseline)，那么 Text 左上角黑点的位置坐标为（0， firstBaselineToTop - firstBaseline)

MyOwnColumn

完成如下布局，模仿 Column 布局，给了4个文本，一列4行的方式排列。

示例代码：

@Composable
fun MyOwnColumn(
    modifier: Modifier = Modifier,
    content : @Composable ()-> Unit){
    // 有多个元素，所以用 Layout()
    Layout(
        modifier = modifier,
        content = content){ measurables, constraints ->
        // 测量多个元素
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        var positionY = 0
        // 元素布局的大小，设置为父容器的最大高度和宽度
        layout(constraints.maxWidth, constraints.maxHeight){
            placeables.forEach { placeable ->
                //placeable 就是我们测量的每一个子容器
                placeable.placeRelative(x = 0, y = positionY)
                // positionY 更新高度，第一个元素的顶部到父容器顶部的距离为0；
                // 第二个元素顶部到父容器顶部的距离为 第一个元素的高度
                // 第三个元素顶部到父容器顶部的距离为 第一个元素的高度 + 第二个元的的高度
                positionY += placeable.height
            }
        }
    }
}

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

StaggeredGrid

通过 StaggeredGrid 自定义如下布局

StaggeredGrid.kt

// 话题列表
val topics = listOf(
    "Arts & Crafts",
    "Beauty",
    "Books",
    "Business",
    "Comics",
    "Culinary",
    "Design",
    "Fashion",
    "Film",
    "History",
    "maths"
)

@Composable
fun StaggeredGrid(
    modifier: Modifier = Modifier,
    rows : Int = 3, //指定元素最终传进来，显示多少行。默认3行
    content : @Composable () -> Unit
){

    Layout(
        modifier = modifier,
        content = content
    ){ measurables, constraints ->
        // rowWidths 用于保存每行的宽度值
        val rowWidths = IntArray(rows){ 0 }
        // rowHeights 用于保存每行的高度值
        val rowHeights = IntArray(rows){ 0 }

        // 测量元素，带索引
        val placeables = measurables.mapIndexed{index, measurable ->
            // 得到每一个元素
            val placeable = measurable.measure(constraints)
            // 计算当前元素该去到数组的那个位置，row = 0, 1, 2
            var row = index % rows
            // 每一行的宽度由每一个元素的宽度累加
            rowWidths[row] += placeable.width
            // 每一行的高度由每一行中最高的元素代表
            rowHeights[row] = max(rowHeights[row], placeable.height)
            placeable
        }
        // 计算表格的宽度，即为 rowWidth 中最宽的那一行
        // 计算表格的高度，即为 rowHeight 中元素之和。也就是rows列之和
        val gridWidth = rowWidths.maxOrNull() ?: constraints.minWidth
        val gridHeight = rowHeights.sumOf { it } // rowHeights 里所有元素相加

        // 设置每一行的 Y 坐标，每一行中的每一个元素的 Y 坐标是一样的
        val rowY = IntArray(rows){ 0 }
        // 第一列元素的 Y 坐标都0，第i行（i > 0）元素的 Y 坐标为前面 i - 1 行的高度之和
        for(i in 1 until rows){
            rowY[i] = rowY[i - 1] + rowHeights[i - 1]
        }
        // TODO 设置表格的宽高
        layout(gridWidth, gridHeight){
            //TODO 布局每一个元素，那么就要计算每一个元素的（x, y）坐标
            // 上面我们已经计算了每个元素的 Y坐标，TODO 这里还需计算每个元素的 X 坐标
            val rowX = IntArray(rows){ 0 }
            // 遍历每一个元素
            placeables.forEachIndexed{ index, placeable ->
                val row = index % rows
                // 每一列的第一个元素的 X 值都是0，所以直接先放置，然后再修改 rowX[row]
                placeable.placeRelative(
                    x = rowX[row],
                    y = rowY[row]
                )

                // 修改 rowX[row]位置的值，为同一列中下一个元素计算 X 值,即前面元素的 宽度之和
                rowX[row] += placeable.width
            }
        }
    }

}

// TODO 每一个条目
@Composable
fun Chip(
    modifier: Modifier = Modifier,
    text : String
){
    // 一个卡片，圆角。里面包含一个 Row，第一列是 Box，第二列是 Text
    Card (
        modifier = modifier,
        border = BorderStroke(color = Color.Black, width = Dp.Hairline),// 设置边框线，Hairline默认1dp
        shape = RoundedCornerShape(8.dp) // 设置4个圆角
    ) {
        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, 16.dp)
                    .background(color = MaterialTheme.colors.secondary)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = text)
        }
    }
}

@Composable
fun StaggeredGridBodyContent(){
    Row(
        modifier = Modifier
            .background(color = Color.LightGray)
            .padding(16.dp)
            .horizontalScroll(rememberScrollState()), // 可以水平滚动
        content = {
            StaggeredGrid(modifier = Modifier) {
                // 放元素
                for(topic in topics){
                   Chip(modifier = Modifier.padding(8.dp), text = topic)
                }
            }
        }
    )
}

Activity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeLayoutsTheme {
                //PhotographerCard()
                //LayoutStudy()
                //SampleList()
                //LazyList()
                //ScrollingList()
                //TextWithPaddingToBaseline()
                //MyOwnColumnSample()
                //StaggeredGrid()
                StaggeredGridBodyContent()
            }
        }
    }
}

约束布局

在实现对齐要求比较复杂的较大布局时，ConstraintLayout 很有用。

引用

引用是使用 createRefs() 或 createRefFor() 创建的，ConstraintLayout 中的每个可组合项都需要有与之关联的引用。

约束条件

约束条件是使用 constrainAs() 修饰符提供的，该修饰符将引用作为参数，可让你在主体 lambda 中指定其约束条件。

约束条件是使用 linkTo() 或其它有用的方法指定的。parent 是一个现有的引用，可用于指定对 ConstraintLayout 可组合项本身的约束条件。

案例1：用 ConstraintLayout 布局出如下效果。

1. 导入 ConstraintLayout 的依赖

implementation 'androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08'

2. ConstraintLayout.kt

@Composable
fun ConstraintLayoutContent(){
    // TODO 需要在 build.gradle 中引入依赖
    ConstraintLayout {
        //TODO 1. 通过 createRefs 创建引用，ConstraintLayout 中的每个元素都需要关联一个引用
        val (button, text) = createRefs()

        Button(
            onClick = { /*TODO*/ },
            //TODO 2.使用 Modifier.constrainAs 来提供约束，引用作为它的第一个参数
            // 在 lambda 表达式中指定约束规则
            modifier = Modifier.constrainAs(button){
                // TODO 3.约束条件是使用 linkTo(), parent.top表示在父容器顶部，有一个外边距 margin
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "Button")
        }
        
        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            // 约束条件是使用 linkTo(), button.bottom表示位于button 的底部，有一个外边距 margin
            top.linkTo(button.bottom, margin = 16.dp)
            // 在 ConstraintLayout 中水平居中
            centerHorizontallyTo(parent)
        })
    }
}

案例2：

@Composable
fun ConstraintLayoutContent2(){
    ConstraintLayout {
        val (button1, button2, text) = createRefs()

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(button1){
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "Button1")
        }
        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            // 约束条件是使用 linkTo(), button.bottom表示位于button 的底部，有一个外边距 margin
            top.linkTo(button1.bottom, margin = 16.dp)
            //TODO 在 text 的中间位置位于 boton1 的 end 位置
            centerAround(button1.end)
        })

        // 将 button1 和 text 组合起来，建立一个屏障
        val barrier = createEndBarrier(button1, text)
        Button(
            onClick = {  },
            modifier = Modifier.constrainAs(button2){
                //TODO top： 给顶部设置约束，start: 给左边设置约束
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(barrier)
            }
        ) {
            Text(text = "Button1")
        }
    }
}

解耦 API

在某些情况下，最好将约束条件与应用它们的布局分离开来。例如，我们可能会希望根据屏幕配置来更改约束条件，或在两个约束条件集之间添加动画效果。

$\bullet$ 将 ConstraintSet 作为参数传递给 ConstraintLayout。

$\bullet$ 使用 layoutId 修饰符将在 ConstraintSet 中创建的引用分配给可组合项。

如下代码所示：我们系统代码中 margin 是根据屏幕旋转时，动态设置的值，这种就不好弄了。

我们可以通过解耦的方式，将 Button 和 Text 组件之间的约束关系在外部定义，然后传入到 ConstraintLayout 中。而 margin 作为一个其它约束，就作为参数传递。如下代码所示

@Composable
fun DecoupledConstraintLayout2(){
    // 打包
    BoxWithConstraints {
        // maxWidth 和 maxHeight 是 BoxWithConstraints 中的属性
        val constrains = if(maxWidth < maxHeight){
            //TODO 返回的是一个 ConstraintSet
            DecoupledConstraints(16.dp) // 竖屏情况下
        }else{
            DecoupledConstraints(64.dp)// 横屏情况下
        }
        ConstraintLayout (constrains) {
            Button(
                onClick = { },
                modifier = Modifier.layoutId("button")
            ) {
                Text(text = "Button")
            }

            Text(text = "Text", modifier = Modifier.layoutId("text"))
        }
    }
}

// TODO 将Button 和 Text 的约束抽离到外部,
private fun DecoupledConstraints(margin : Dp) : ConstraintSet{
    return ConstraintSet{
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button){
            top.linkTo(parent.top, margin)
        }
        constrain(text){
            top.linkTo(button.bottom, margin)
        }
    }
}

Intrinsics

$\bullet$ Compose 只测量子元素一次，测量两次会引发运行时异常。但是，有时在测量子元素之前，我们需要一些有关子元素的信息。

$\bullet$ Intrinsics 允许你在实际测量之前查询子项。1）（min|max）intrinsicWidth：鉴于此高度，你可以正确绘制内容的最小/最大宽度是多少。2）（min|max）intrinsicHeight：鉴于此宽度，你可以正确绘制内容的最小/最大高度是多少。

示例：如下布局。要在中间做一个分割线，它的高度与左右文本的高度一致

@Composable
fun TwoTexts(modifier: Modifier = Modifier){
    // 将 Row 的高度限制为文本的高度，通过 Intrinsic 在测量之前来获取文本的高度信息
    Row (modifier = Modifier.height(IntrinsicSize.Min)) {
        Text(
            text = "Hi",
            modifier = Modifier
                .padding(start = 4.dp)
                .weight(1f)
                .wrapContentWidth(Alignment.Start)
        )

        // 两个文本中间的线
        Divider(
            color = Color.Black,
            modifier = Modifier
                .fillMaxHeight() //fillMaxHeight()获取父容器最大高度
                .width(1.dp))

        Text(
            text = "There",
            modifier = Modifier
                .padding(start = 4.dp)
                .weight(1f)
                .wrapContentWidth(Alignment.End)
        )
    }
}