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入门