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，后面就可以直接使用了。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

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

约束于父容器

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity">
     <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="ConstraintLayout约束布局"
     android:textSize="18sp"
     android:textColor="@color/black"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

效果预览图：

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，即水平居中

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
 <ImageView
 android:id="@+id/center"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:src="@mipmap/ic_launcher"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.5"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />
 <ImageView
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:src="@mipmap/ic_launcher"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toStartOf="@+id/center"
 app:layout_constraintHorizontal_bias="0.5"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />
 <ImageView
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:src="@mipmap/ic_launcher"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.5"
 app:layout_constraintStart_toEndOf="@+id/center"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果预览图：

ImageView

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

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

<androidx.constraintlayout.widget.Guideline
 android:id="@+id/center"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintGuide_percent="0.5"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

guidelines

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

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="40dp"
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toStartOf="@+id/center"
 app:layout_constraintHorizontal_bias="0.5"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="40dp"
 android:text="this is TextView2"
 android:textColor="@color/black"
 android:textSize="18sp"
 app:layout_constraintBaseline_toBaselineOf="@+id/textView"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toEndOf="@+id/center" />
 <androidx.constraintlayout.widget.Guideline
 android:id="@+id/center"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintGuide_percent="0.5"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果预览图：

baseline

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

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