Jetpack Compose布局(一) - 布局基础知识
在上篇《Jetpack Compose技术快速上手》一文中简单介绍了Compose，那么这边我们就来学习下Compose的布局。由于布局这块涉及内容较多，会分开写。
布局主要包括：布局基础知识、Material组件和布局、自定义布局、Compose中使用ConstraintLayout。
image.png
本文重点讲解布局基础知识。
主要涉及：可组合函数、标准布局元素、基本组件、布局模型、修饰符、槽位布局。如下图：
本文涉及主要知识点
可组合函数
可组合函数是 Compose 的基本构建块，返回值是 Unit 的函数，用于描述界面中的某一部分，该函数可接收参数。
组合函数中可包含多个界面元素。
其基本格式为：
@Composable
fun xxx():Unit{
....
}
标准布局元素
在Compose中标准的布局元素有三个：Box、Column、Row。
标准布局元素特性示意图
Box
重叠布局，类似Android View系统中的FramLayout布局，元素会重叠显示，其原型定义如下：
@Composable
inline fun Box(
modifier: Modifier = Modifier, //修饰符
contentAlignment: Alignment = Alignment.TopStart,//内容的位置
propagateMinConstraints: Boolean = false, //是否应将传入的最小约束传递给内容
content: @Composable BoxScope.() -> Unit //内容，即界面元素
) {
......
}
例子
/**
* 标准布局 - Box
*/
@Composable
fun BoxExample(){
Box (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
contentAlignment = Alignment.Center
){ //对应content参数 lambda表达上
Text(text = "Text 1")
Text(text = "Text 2")
}
}
预览结果
Column
垂直布局，在界面元素垂直方向依次排列。源码中定义如下：
@Composable
inline fun Column(
modifier: Modifier = Modifier, //修饰符
verticalArrangement: Arrangement.Vertical = Arrangement.Top, //内容元素垂直方向分布方式
horizontalAlignment: Alignment.Horizontal = Alignment.Start, //内容元素水平方向分布方式
content: @Composable ColumnScope.() -> Unit //内部元素
) {
......
}
实例
/**
* 标准布局 - Column
*/
@Composable
fun ColumnExample(){
Column (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
verticalArrangement = Arrangement.Center,//垂直方向居中
horizontalAlignment = Alignment.End //水平方向靠右
){ //对应content参数 lambda表达上
Text(text = "Text 111")
Text(text = "Text 666666")
}
}
Column示例预览结果
Row
元素水平方向分布，源码中定义：
@Composable
inline fun Row(
modifier: Modifier = Modifier, //修饰符
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,//水平方向排列方式
verticalAlignment: Alignment.Vertical = Alignment.Top, //垂直方向元素排列方式
content: @Composable RowScope.() -> Unit //内部子元素
) {
......
}
示例
/**
* 标准布局 - Row
*/
@Composable
fun RowExample(){
Row (
modifier = Modifier.size(width = 230.dp,height = 100.dp),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.Bottom
){ //对应content参数 lambda表达上
Text(text = "Text 111")
Text(text = "Text 666666")
}
}
Row示例预览
基本组件
Jetpack Compose中组件库包括：compose-ui和material。很多常用基本组件都是在material库中，Compose-ui中组件很少：Image、BasicTextField（输入框）。
示例：
//添加一个图片
Image(
//填充内容
painter = painterResource(id = message.iconId),
contentDescription = "logo",
//尺寸及形状
modifier= Modifier
.padding(top = 2.dp)
.size(40.dp) //图像尺寸
.clip(CircleShape) //形状
.border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)//边框样式
)
布局模型
在对标准布局元素和组件有了一定了解后，我们来看下Compose的布局流程。
首先Compose布局是一个界面树，从树的根节点开始依次要求其子节点对自身进行测量，然后递归完成所有子节点的测量，并将约束条件沿着树向下传递给子节点，并将测量的尺寸和放置指令依次向根节点传递。
以下面可组合函数为示例：
@Composable
fun SearchResult(...) {
Row(...) {
Image(...)
Column(...) {
Text(...)
Text(..)
}
}
}
其布局过程如下图示：
image.png
修饰符
在Compose布局中修饰符至关重要，您可以使用修饰符来修饰或扩充可组合项。常用的修饰符如下：
-
background可组合元素的背景色； -
clickable使可组合项响应用户点击，并显示波纹效果； -
padding设置元素周围留出空间； -
size可组合元素的尺寸； -
clip可组合元素的形状； -
border可组合元素的边框及形状； -
fillMaxSize可组合元素尺寸按父布局的最大尺寸显示； -
fillMaxWidth可组合元素宽度按父布局的最大宽度显示； -
fillMaxHeight可组合元素高度按父布局的最大高度显示；
除以上外，还有width、height、wrapConentHeight等，用到的时候可以尝试看看效果。
下面展示一个圆形图像的示例
/**
* 修饰符使用示例
*/
@Composable
fun ModifierExample(){
//添加一个图片
Image(
//填充内容
painter = painterResource(id = R.mipmap.ic_girl),
contentDescription = "logo",
//尺寸及形状
modifier= Modifier
.padding(top = 2.dp)
.background(Color.Blue)//设置蓝色背景
.size(40.dp) //图像尺寸
.clip(CircleShape) //圆形形状
.border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)//边框样式
)
}
修饰符示例
修饰符扩展
除了使用Compose提供的修饰符外，我们也可以扩展函数自定义修饰符，具体方式可以参考Jetpack Compose布局（三）一文中讲的扩展布局修饰符。
强调：修饰符的使用是有顺序的
强调：修饰符的使用是有顺序的
强调：修饰符的使用是有顺序的
例如，将上例的background和padding顺序调换下，就会如下图效果，仔细看两图的顶部边距，会发现区别
调换background和padding顺序的效果图
槽位布局
Compose中提供了固定槽位的可组合项，以简化界面元素，这些主要在androidx.compose.material:material库中,如：Drawer、FloatingActionButton、TopAppBar等。
Material 组件大量使用槽位 API，这是 Compose 引入的一种模式，它在可组合项之上带来一层自定义设置。这种方法使组件变得更加灵活，因为它们接受可以自行配置的子元素，而不必公开子元素的每个配置参数。槽位会在界面中留出空白区域，让开发者按照自己的意愿来填充。如下图TopAppBar的槽位。
TopAppBar的槽位
关于槽位内容会在Jetpack Compose布局（二）中做详细讲解，本篇就不进行深入讨论了。
欢迎留言，一起学习，共同进步！
