概述
Compose 中的线性布局对应的是Android传统视图中的LinearLayout,不一样的地方是，Compose根据Orientation的不同又将布局分为Column和Row, Column对应传统视图LinearLayout中orientation = “vertical”的情况，Row对应传统视图LinearLayout中orientation = “horizontal”的情况.由于两者内部元素在父容器中的布局和对其方式不同，分成两个组件有助于提供类型安全的Modifier修饰符。而Compose中的帧布局对应的是Android传统View中的FrameLayout,它可以让自己的子组件依次按照顺序推叠。
实例解析
1.线性布局
在Compose中，线性布局根据使用场景的不同，分为Column和Row,Column 是垂直线性布局组件，Row是水平线性布局组件
1.1 Column组件
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
)
上面是Column的参数列表，其中verticalArrangement和horizontalAlignment参数分别可以帮助我们安排子项的垂直/水平位置，在默认情况下，子项会以垂直方向靠上（Arrangment.Top）、水平方向靠左来布置子项的摆放
我们可以以一个例子看下Column的使用
@Composable
fun LinearLayoutDemo() {
Column(
modifier = Modifier
.border(1.dp, color = Color.Red)
.size(150.dp),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Hello World",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "JetPack",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "zhongxj",
style = MaterialTheme.typography.h6,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
运行结果：
在上面的代码中，我们通过verticalArrangement参数，将Column中的Text摆放到了组件的中间，然后使用Modifier.align修饰符来独立设置子项的对齐规则
这里可能有人会问，不是有horizontalAlignment参数吗，水平方向为啥还要用Modifier.align呢？因为对于垂直布局中的子项，Modifier.align只能设置自己在水平方向的位置，反之水平布局的子项，只能设置自己在垂直方向的位置，就比如我们正在介绍的Column组件，当Column组件中有多个子项时，他们在垂直方向永远是线性排列的，如果允许子项被单独设置，就会出现不好的情况，比如Column中有A,B,C三项，如果配置A的对齐方向是Aligment.Bottom,B为Aligment.Top，这显然是无法实现的，所以Column的子项在垂直方向布局只能通过verticalArragnment进行整体设置。（注意：这里不是说Column只能使用verticalArragnment参数）
注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的
1.2 Row组件
Row组件可以将内部子项按照从左到右的方向水平排列，和Cloumn组件配合使用就可以构建出很丰富美观的界面。下面是一个使用Row组件和Column组件制作的文章卡片，代码如下：
@Composable
fun ArticleCard() {
Surface(
shape = RoundedCornerShape(8.dp),
modifier = Modifier
.padding(horizontal = 12.dp)
.fillMaxWidth(),
elevation = 10.dp,
) {
Surface(modifier = Modifier.padding(12.dp), color = Color(0xeeeeeeee)) {
Column(modifier = Modifier.padding(12.dp)) {
Text(
text = "JetPack Compose",
style = MaterialTheme.typography.h6
)
Spacer(modifier = Modifier.padding(vertical = 5.dp))
Text(
text = " Jetpack Compose是第一个使用Kotlin正在开发中的大型项目," +
"因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南," +
"该工作仍在进行中,仍然有很长的路要"
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
IconButton(onClick = {
/*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.comment),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
IconButton(onClick = {
/*TODO*/ }) {
Icon(
painterResource(id = R.drawable.share),
contentDescription = null, modifier = Modifier.size(16.dp)
)
}
}
}
}
}
}
运行结果：
从上面的代码中可知，Row的horizontalArrangement参数帮助我们合理配置了按钮的水平位置。可以看到，图标部分，喜欢和分享按钮呈左右两端对齐，Arrangement定义了很多子项对齐的方式，除了Center（居中），Start（水平靠左），End(水平靠右）等常见的对齐方式，还有一些特定场景下的对齐方式，如Space Between，Space Evenly等。
2.帧布局
2.1 Box组件
Box组件是一个能够将里面的子项依次按照顺序堆叠的布局组件，在使用上类似于传统布局的FrameLayout,这个很简单，我们看下一段代码了解下它的使用。
@Composable
fun BoxDemo(){
Box(modifier = Modifier
.size(150.dp)
.background(Color.Green))
Box(modifier = Modifier
.size(80.dp)
.background(Color.Red))
Text(text = "Hello World")
}
运行结果：
2.2 Surface组件
Surface从字面上理解是一个平面，在Material Design设计准则中也同样如此，我们可以将很多的组件摆放在这个平台之上，可以设置这个平面的边框，圆角，颜色等.例如，使用Surface实现一个卡片效果，代码如下：
@Composable
fun SurfaceDemo() {
Surface(
shape = RoundedCornerShape(8.dp),
elevation = 10.dp,
modifier = Modifier
.width(300.dp)
.height(100.dp),
color = Color.Gray
) {
Row(modifier = Modifier.clickable {
}) {
Image(
painter = painterResource(id = R.drawable.portrait),
contentDescription = null,
modifier = Modifier.size(100.dp),
contentScale = ContentScale.Crop
)
Spacer(modifier = Modifier.padding(horizontal = 12.dp))
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Text(text = "zhongxj", style = MaterialTheme.typography.h6)
Spacer(modifier = Modifier.padding(vertical = 8.dp))
Text(text = "海塔灯")
}
}
}
}
运行结果：
从上面的代码中我们可以看到，在Surface中我们主要编写UI代码，而Surface主要负责整个组件的形状，阴影，背景等，Surface可以帮助我们解耦一些代码，而不必在单个组件上添加很多的Modifier修饰符方法。
很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box
3.Spacer留白
在很多时候，我们需要让组件之间留有空白的间隙，这时候就可以使用Compose提供的Spacer组件，简单用一个demo展示Spacer的使用。
@Composable
fun SpacerDemo(){
Row {
Box(modifier = Modifier
.size(100.dp)
.background(Color.Green))
Spacer(modifier = Modifier.width(20.dp))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Yellow))
Spacer(modifier = Modifier.weight(1f))
Box(modifier = Modifier
.size(100.dp)
.background(Color.Magenta))
}
}
运行结果
从上面的代码中可以看出Spacer的另一种使用场景，那就是在代码中使用Box绘制占位的矩形块在没有内容的时候完成可以使用Spacer来替代。
总结
本文主要讲了线性布局和帧布局在Compose中如何使用，其实非常简单，就需要我们多加练习，没有啥技巧。等啥时候我们写Compose的UI和写XML的UI一样熟练的时候，我们的工作效率就会大大的提升，可以用更少的代码实现更炫的UI效果，而且Kotlin和Java还可以混合使用，现在我已经在用Compose写测试的界面了，非常方便，推荐读者也动起来，使用Java的小伙伴可以使用Compose写界面，Java写功能，而使用Kotlin的小伙伴，则可以更方便的使用Compose，一种语言，完成界面和功能，真的特别酷。