Jetpack：003-布局中组件的对齐方式

我们在上一章回中介绍了Jetpack中的页面和布局，本章回中将介绍 布局中组件的对齐方式。闲话休提，让我们一起Talk Android Jetpack吧

1. 概念介绍

我们在本章回中介绍的对齐方式是组件在布局中的排列方式，常见的是居中对齐，它表示组件位于布局的中间位置。

此外，我们介绍对齐主要是指在Column和Row这两个布局中的对齐方式。其它布局中的对齐与此类似，只是具体的细节不同而已。

2. 使用方法

我们使用的Column和Row布局都提供了相关的参数来设置位于它们中的组件对齐方式，接下来我们分别介绍这两种布局中对齐方式。

2.1 行布局中的对齐方式

• verticalAlignment参数：它表示组件在垂直方向的对齐方式.它的值都包含start,top,end,bottom和center这些关键字，分别表示起点，顶部，终点，底部和居中对齐。这些对齐方式容易理解，大家可以自行修改代码来体验一下。
• horizontalArrangement参数：它表示组件在水平方向的对齐方式；它的值比较特殊，不容易理解，大家可以参考官方给的图示，详细如下：
  

2.2 列布局中对齐方式

• horizontalAlignment参数：它表示组件在水平方向的对齐方式；它的值都包含start,top,end,bottom和center这些关键字，分别表示起点，顶部，终点，底部和居中对齐。这些对齐方式容易理解，大家可以自行修改代码来体验一下。
• verticalArrangement参数：它表示组件在垂直方向的对齐方式.它的值比较特殊，不容易理解，大家可以参考官方给的图示，详细如下：
  

3. 示例代码

Column(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally,
    //列中元素的对齐方式，需要设置fillMaxHeight，不然只有内容大小，无法调节元素对齐
    verticalArrangement = Arrangement.Center
) {
    for (item in list) {
        //控制每个list选项的边距，长宽度，边框和背景颜色
        Surface(
            modifier = Modifier
                .fillMaxWidth() //相当于match_parent,默认是wrap_content
                .height(48.dp)
                .padding(vertical = 8.dp, horizontal = 16.dp)
                .border(width = 3.dp, color = Color.Yellow,)
        ) {
            Row (
                verticalAlignment = Alignment.CenterVertically,
                //行中元素的对齐方式，需要设置fillMaxWidth，不然只有内容大小，无法调节元素对齐
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(start = 24.dp)
                    .align(alignment = Alignment.CenterHorizontally)
                    ){
                Text(text = item)
                Button(onClick = { Log.d("ex001","button is clicked")}) {
                    Text(text = "Button")
                }
            }
        }
    }
}

上面的示例代码中包含一个列和一个行，它的运行效果和上一章回的相同。我建议大家自己动手去修改一下行和列的对齐方式，这样可以亲自体验一下不同的对齐效果。

此外，还需要把行或者列的长度设置为最大值，不然没有对齐效果，详细内容可以参考代码中的注释。

4. 内容总结

最后，我们对本章回中的内容做一个总结：

• 对齐就是指布局中组件的排列方式；
• 行和列布局都支持对齐功能，它们提供水平和垂直两个方向的对齐功能；
• 对于xxxAlignment相关的对齐方式相对容易理解；
• 对于xxxArrangement相关的对齐方式不好理解，可以参考效果图；

看官们，关于Jetpack中组件在布局中的对齐方式就介绍到这里，欢迎大家在评论区交流与讨论！