Compose常用布局

Compose布局基础知识
上一节对Compose做了简单的介绍，本章节主要介绍Compose中常用的布局，其中包括三个基础布局（Colmun、Row、Box）；以及其他常用布局（ConstraintLayout 、BoxWithConstraints、HorizontalPager、VerticalPager、LazyColumn、 LazyRow ） 等，学习了本章您将会可以自己写出各种炫酷的布局。完成Compose中各种UI开发。

Jetpack Compose可以让您更轻松地设计和构建应用的界面。Compose通过以下方法将状态转换为界面元素：

1、元素的组合

2、元素的布局

3、元素的绘制

Compose中布局的目标

布局系统的Jetpack Compose实现有二个主要目标：

（1）实行高性能

（2）让开发者能够轻松编写自定义布局

注意：使用Android View系统时，在嵌套某些View（如RelativeLayout）时，可能会出现一些性能问题。由于Compose可以避免多次测量，因为可以根据需要进行深层次的嵌套，而不会影响性能。

这里留下疑问请问为什么呢？为什么Compose不会引起性能问题？带着这些疑问我们进入这篇文章。

可组合函数的基础知识

可组合函数是Compose的基础构建块。可组合函数是一种发出Unit的函数，用于描述界面中的某一部分。该函数接受一些输入并生成屏幕上显示的内容。

一个可组合函数可能会发出多个界面元素。不过，如果您没有提供有关如何排列这些元素的指导，Compose可能会以您不喜欢的方式进行拍了他们。例如，一下代码会生成二个文本元素：

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}

如果您未提供有关如何排列这个两个文本元素的指导，Compose会将它们堆叠在一起，使其无法阅读：

我们可以看到是混排在一起的。而Compose提供了一些系列现成可用的布局来帮助我们排列界面元素，并可以让您轻松定义自己的更专业的布局。

标准布局组件

在许多情况下，我们只需要使用Compose的标准布局元素即可。

1、Colmun布局

使用Column可将多个项垂直地放在屏幕上。这个布局类似安卓View中的LinearLayout布局设android:orientation=“vertical” 时候的场景，纵向排布。

@Composable
fun ArtistCard() {
    Column {
        Text("姓名:LSL")
        Text("性别：男")
    }
}

2、Row布局

同样，使用Row可以将多个项水平放置在屏幕上。Column和Row都支持配置它们的所含元素的对齐方式。Row这个布局类似与安卓view中的LineraLayout中android:orientation="horizontal"设置横向排布。

@Composable
fun ArtistCard() {
    Row {
        Text("姓名:LSL")
        Text("年龄：25")
    }
}

Column和Row包含的在屏幕上的纵向排布和横向排布。上边已经了解了Column和Row的基本使用。

3、Box布局

使用Box可以将元素放在其他元素上。Box还支持为其包含的元素配置特定的对齐方式。此处的modifier不做详细讲解，后边章节会详细描述。

@Composable
fun ArtistCard() {
    Box(
        modifier = Modifier
            .size(44.dp)
    ) {
        Image(
            painter = painterResource(id = R.mipmap.head),
            contentDescription = "11",
            modifier = Modifier
                .size(44.dp)
                .clip(CircleShape)
        )
        Image(
            painter = painterResource(id = R.mipmap.icon),
            contentDescription = "22",
            modifier = Modifier
                .align(Alignment.BottomEnd)
        )

    }
}

Box布局类似安卓View中的FrameLayout布局，可以重叠布局。

通常、我们只需要这些构函数。我们自行编写可组合函数，将这些布局组合成更精美的布局，让其适合我们的应用。

注意：Compose可以有效地处理嵌套布局，堪称设计复杂界面的绝佳工具。这与Android View相比是一个进步；在Android View 中，出于性能方面的原因，您避免使用嵌套布局。

其他常用布局

1、ConstraintLayout约束布局

原来ConstraintLayout 平铺约束布局，为了解决View嵌套的问题。

（1）先引入constraintlayout包

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

（2）ConstraintLayout 在Compose中的使用

可以相对父布局、其他函数布局进行相对约束，这个布局比较自由。每个布局都可以相对于其他布局设置位置。下面是一个简单的ConstraintLayout 的使用。

首先 val (button, text) = createRefs()，创建多个ConstraintLayoutReferences的方便方法，这些引用需要作为Modifier.constrainAs的一部分分配给ConstraintLayout内的布局。因为Compose中没有ID属性，所以这里设置Modifier.constrainAs(button) 相当于 Button按钮的唯一标识的属性了。其他布局可以根据这个唯一标识找到它，并根据这个布局进行布局。

Button按钮设置 top.linkTo(parent.top, margin = 16.dp) 相对于父布局顶部、距离付布局16dp； start.linkTo(parent.start)相对于父布局的开始位置， end.linkTo(parent.end)相对于父布局的结束位置。start和end的设置使得如下图Button位置就居中了。

Text文本的布局设置 top.linkTo(button.bottom, margin = 16.dp) 位于Button的底部，距离Button 16dp。

设置start.linkTo(button.start)时Text文本布局位于Button开始位置，设置 end.linkTo(button.end)时Text文本布局位于Button的结束位置。

通过上面例子可以看出，在ConstraintLayout布局中，可以任意设置相对于某个布局位置，布局相对灵活。给我们在界面布局中提供的了很大的方便的，使用也比较简单。

@Preview
@Composable
fun ConstraintLayoutCompose() {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(Color(0xff00ffff))
    ) {
        val (button, text) = createRefs()
        Button(onClick = {}, modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }) {
            Text("Button")
        }

        Text("Android", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
            start.linkTo(button.start)
            end.linkTo(button.end)
        })
    }
}

2、BoxWithConstraints 约束Box布局

BoxWithConstraints 带有约束布局的参数可以根据可用空间的大小来决定布局的内容。布局的尺寸信息是到布局阶段才可以使用的，也就是说这些布局在组合阶段无法确定显示的内容。

BoxWithConstraints 布局是相对于Box而言的。BoxWithConstraints 可以将内容组合推迟到布局阶段，此时布局信息已经确定，可以根据BoxWithConstraintsScope参数设置不同的布局。

interface BoxWithConstraintsScope : BoxScope {
    /**
     * The constraints given by the parent layout in pixels.
     *
     * Use [minWidth], [maxWidth], [minHeight] or [maxHeight] if you need value in [Dp].
     */
    val constraints: Constraints
    /**
     * The minimum width in [Dp].
     *
     * @see constraints for the values in pixels.
     */
    val minWidth: Dp
    /**
     * The maximum width in [Dp].
     *
     * @see constraints for the values in pixels.
     */
    val maxWidth: Dp
    /**
     * The minimum height in [Dp].
     *
     * @see constraints for the values in pixels.
     */
    val minHeight: Dp
    /**
     * The maximum height in [Dp].
     *
     * @see constraints for the values in pixels.
     */
    val maxHeight: Dp
}

根据布局的最大宽度展示，小、中、大四个布局了。这个可以更好适配不同的屏幕。

@Composable
fun BoxWithConstraintsLayout() {
    BoxWithConstraints(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(Color(0xffef5a54)),
        contentAlignment = Alignment.Center
    ) {
        when {
            maxWidth < 150.dp -> SmallLayout()
            maxWidth < 250.dp -> MediumLayout()
            else -> BigLayout()
        }
    }
}

3、HorizontalPager和VerticalPager 分页布局

HorizontalPager和VerticalPager 相对于安卓View组件来说，对应的是ViewPager。

HorizontalPager可以使界面左右滑动、VerticalPager 可以使界面上下滑动。

@OptIn(ExperimentalFoundationApi::class)
@Preview
@Composable
fun HorizontalPagerCompose() {
    val state = rememberPagerState(5)
    HorizontalPager(
        10,
        state = state,
        pageSize = PageSize.Fixed(100.dp),
        pageSpacing = 30.dp
    ) { page ->
        var scale by remember { mutableStateOf(0.5f) }
        if ((state.currentPage + 1) == page) {
            scale = 1f
        } else {
            scale = 0.75f
        }
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .graphicsLayer {
                    scaleX = scale
                    scaleY = scale
                }
        ) {
            Text(
                text = "HorizontalPager Page: $page",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(colorList[page])
                    .wrapContentSize(Alignment.Center)
                    .clickable {
                        ToastUtil.toastShort(AppUtils.getContext(), "page $page")
                    },
                color = Color(0xFFffffff)

            )
        }

    }
}

VerticalPager上下滑动和HorizontalPager一样 只是滑动方向不同。

@Composable
fun VerticalPagerCompose() {
    VerticalPager(10, modifier = Modifier.height(100.dp)) { page ->
        Text(
            text = "VerticalPager Page: $page",
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .wrapContentSize(Alignment.Center)
        )
    }
}

4、LazyColumn和 LazyRow 之列表布局

LazyColumn和LazyRow布局相对于安卓View布局来说，类似ListView和GridView，和现在常用的RecyclerView都类似都是实现列表展示的功能，使用也非常简单。

传入dataList即可展示所有的列表，MessageItemCard可以自定义自己的列表样式。

LazyColumn {
    items(dataList){ item: MessageModel ->
        MessageItemCard(item)
    }
}

这里写MessageItemCard每个条目的布局根据条目展示类似聊天界面的数据。如下图所示。

@Composable
fun MessageItemCard(it: MessageModel) {
    if (it.index % 2 == 0) {
        Row {
            Image(
                painter = painterResource(id = R.mipmap.star),
                contentDescription = "1111111",
                modifier = Modifier
                    .size(44.dp)
                    .clip(CircleShape)
                    .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
            )
            Column(modifier = Modifier.padding(5.dp)) {
                Text(text = it.sender, fontSize = 18.sp)
                Text(text = it.content, fontSize = 13.sp)
            }
        }

    } else {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentSize(align = Alignment.CenterEnd)
        ) {
            Column(
                modifier = Modifier
                    .padding(5.dp)
            ) {
                Text(text = it.sender, fontSize = 18.sp)
                Text(text = it.content, fontSize = 13.sp)
            }
            Image(
                painter = painterResource(id = R.mipmap.star),
                contentDescription = "1111111",
                modifier = Modifier
                    .size(44.dp)
                    .clip(CircleShape)
            )
        }

    }
}

最终展示效果

LazyRow的使用和LazyColumn使用一样只是方向不同。

Compose布局中的固有特性测量

Compose有一项规则，即，子项只能测量一次，测量两次就会引发运行时异常。但是，有时需要先收集一些关于子项的信息，然后在测量子项。

借助固有特性，我们可以先查询子项，然后在进行实际测量。

对于可组合项，您可以查询其intrinsicWidth或intrinsicHight：

• (min|max)IntrinsicWidth：给定此高度，可以正确绘制内容的最小/最大宽度是多少？
• (min|max)IntrinsicHeight：给定此宽度，可以正确绘制内容的最小/最大高度是多少？

例如，如果您查询具有无限 width 的 Text 的 minIntrinsicHeight，它将返回 Text 的 height，就好像该文本是在单行中绘制的一样。

注意：请求固有特性测量不会两次测量子项。 系统在测量子项前会先查询其固有测量值，然后父项会根据这些信息计算测量其子项时使用的约束条件。

固有特性的实际运用

如果我们要实现如下图所效果，左边文字，右边文字，中间分割线效果。我们需要怎么做？

我可以可以将二个Text放在同一个Row中，并且最大程序扩展，另外在中间放置一个Divider。我们需要将分割线的高度设置为与最高的Text相同，粗细设置为1.dp

fun TwoTexts(
    text1: String,
    text2: String,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )

        Divider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

运行效果，我们发现分割线扩展到整个屏幕，这并不是我们想要的效果：

性能问题

Compose通过只测量一次子项来实现高性能。单遍测量对性能有利，使Compose能够高效地处理较深得界面树。
如果某个元素测量了它的子元素两次、而该子元素又测量了它的子元素两次、以此类推，那么一次尝试布置整个界面就不得不做大量工作，这将很难让应用保持良好的性能。
如果布局由于某种原因需要多次测量，compose会提供一个特殊的系统，即‘固有特性测量’。如需详细了解此功能，请参阅Compose布局中的固有特性测量。
由于测量和放置是布局传递的不通子阶段，因此任何仅影响项的放置而不影响测量的更新都可以单独执行。

本章内容已经基本结束，主要介绍各种布局的使用，学习Compose中的布局，帮助您构建出各种需求的UI。如果您阅读过程中遇到各种问题，请随时给您宝贵的建议。

上一章节内容 Compose入门