ConstraintLayout约束布局详解

ConstraintLayout可以翻译为约束布局，它是Jetpack的一部分，使用ConstraintLayout需要添加Jetpack依赖。ConstraintLayout约束布局可以无嵌套的创建复杂的大型布局，它与RelativeLayou 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。

使用ConstraintLayout

我们创建一个新的Android项目，MainActivity默认使用的就是ConstraintLayout，新项目已经添加了ConstraintLayout依赖，我们直接在布局中使用即可。

如果需要手动添加依赖，则需要做下面两步操作：

1. 在项目根目录的build.gradle文件中添加以下代码：

allprojects {
     repositories {
         google()
     }
}

2. 在app目录下的build.gradle文件中添加以下代码：

dependencies {
     implementation "androidx.constraintlayout:constraintlayout:2.0.4"
     // To use constraintlayout in compose
     implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01"
    }

上面第一步是添加Jetpack的依赖，第二步添加的才是ConstraintLayout，后面就可以直接使用了。

因为没有子组件，所以布局里面一片空白，下面我们了解一下ConstraintLayout的常用属性。

约束于父容器

和RelativeLayout一样，ConstraintLayout可以相对于父容器定位，也可以相对于兄弟组件定位。

• app:layout_constraintBottom_toBottomOf="parent" ：底部约束于父组件

• app:layout_constraintEnd_toEndOf="parent" ：右侧约束于父组件

• app:layout_constraintStart_toStartOf="parent" ：左侧约束于父组件

• app:layout_constraintTop_toTopOf="parent" ：顶部约束于父组件

效果预览图：

TextView居中

上面的示例中间是一个完全居中的TextView，它四边距离父容器边缘都是0dp，如果需要设置组件到父容器某边的距离或者删除某边的依赖，可以通过操作Attributes视图实现，而不再操作xml文件。

attributes属性

其它约束条件

子组件除了约束于父容器，还可以添加其它条件的约束，比如兄弟组件之间的约束，引导线约束，基线对齐等。

和上面约束于父容器的属性一样，约束于兄弟组件也用到以上属性，只不过把parent改为兄弟组件的id而已。

• app:layout_constraintEnd_toStartOf="@+id/center" ：右侧约束于id为center组件的左侧

• app:layout_constraintStart_toEndOf="@+id/center" ：左侧约束于id为center组件的右侧

• app:layout_constraintHorizontal_bias="0.5" ：水平两个约束之间空隙占比为0.5，即水平居中

比较的抽象，还是得从代码和图片上发现规律：

效果预览图：

ImageView

上图示例中三个ImageView组件同在一排，而且都是在居中位置。左右两个受到中间的约束，如果不想要中间的组件，但要保持左右两个组件的相对位置不变，可以使用引导线Guidelines来约束。

• app:layout_constraintGuide_percent="0.5" ：引导线两边空隙占的比例

guidelines

对于文本而言，还可以使用基线baseline对齐来约束组件位置。我们把上面两个示例的ImageView换成TextView，左边的组件约束条件不变，右边组件删除纵向方向的约束，使用baseline来代替。

• app:layout_constraintBaseline_toBaselineOf="@+id/textView" ： 组件的baseline约束于id为textview组件的baseline

效果预览图：

baseline

右边的TextView纵向没有设置约束，但依然保持纵向居中，因为受约束于左边TextView的baseline。

ConstraintLayout比较适合拖拽编写布局，它还有许多其它特性，文字描述显然不好表达，还是建议多尝试编写更好了解。