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

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 行布局中的对齐方式
    • 2.2 列布局中对齐方式
  • 3. 示例代码
  • 4. 内容总结

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

1. 概念介绍

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

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

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中组件在布局中的对齐方式就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,jetpack,compose,jetpack,布局对齐方式)