Android ConstraintLayout约束布局简单使用介绍

前言

什么是约束布局（ConstraintLayout）

我们可以理解为增强版/升级版的相对布局（RelativeLayout）。

Android Studio 从版本2.3开始创建xml默认的根布局就是约束布局，相信大家对相对布局已经是使用的非常6了，所有在使用约束布局的话就会比较轻松。
那么既然已经有相对布局了，为什么还要用约束布局呢？最核心就是：

让布局扁平化，减少布局嵌套的层次，提高渲染效率，提升应用性能。

所以说约束布局还是很有必要学一学的，最起码在性能优化方面是很有帮助的。
下面就一起开始学习吧！

ConstraintLayout 官方文档

废话不多说，直接进入主题。

举个最简单的栗子：
将一个在ConstraintLayout中居中，如下：

居中

代码很简单，就是给TextView添加上下左右边界的约束即可。所以写约束布局就是写控件的边界约束。

下面我们先介绍下约束属性的写法以及含义。

app:layout_constraintStart_toStartOf="parent"

我们来解释下属性：
第一个start代表的是控件自身的约束方向。
第二个start代表的目标控件的约束方向。
第三个parent代表的是和那个控件建立约束。如果是父控件，就填parent，如果是其他控件，就填写控件的id。

下面我们就以最实用的现实场景来简单学习下ConstraintLayout。

控件水平排列
代码如下：

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

<TextView
    android:id="@+id/common_textview"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/common_textview2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintStart_toEndOf="@+id/common_textview"
    app:layout_constraintTop_toTopOf="@+id/common_textview" />

<TextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintStart_toEndOf="@+id/common_textview2"
    app:layout_constraintTop_toTopOf="@+id/common_textview" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

水平排列

同理垂直方向上的排列就不多说了。

垂直方向居中
代码如下：

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

  <TextView
      android:id="@+id/common_textview"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_margin="50dp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/common_textview2"
      android:layout_width="100dp"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="@+id/common_textview"
      app:layout_constraintStart_toEndOf="@+id/common_textview"
      app:layout_constraintTop_toTopOf="@+id/common_textview" />
 </androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

垂直方向居中

重点：让控件自身的上边界和先边界分别和目标控件的上下边界进行对应约束即可。

垂直居中的同时，高度一致

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

  <TextView
      android:id="@+id/common_textview"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_margin="50dp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/common_textview2"
      android:layout_width="100dp"
      android:layout_height="0dp"
      android:layout_marginStart="70dp"
      app:layout_constraintBottom_toBottomOf="@+id/common_textview"
      app:layout_constraintStart_toEndOf="@+id/common_textview"
      app:layout_constraintTop_toTopOf="@+id/common_textview" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

垂直居中且高度相等

其实很简单，只需要将控件自身的高度设置为0dp即可，0dp的意思就是match constraint，就是充满约束。

基于某个控件的下边界线居中
代码如下：

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

  <TextView
      android:background="#FFD115"
      android:id="@+id/common_textview"
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:layout_margin="50dp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      app:layout_constraintStart_toStartOf="@id/common_textview"
      app:layout_constraintEnd_toEndOf="@id/common_textview"
      app:layout_constraintTop_toBottomOf="@id/common_textview"
      app:layout_constraintBottom_toBottomOf="@id/common_textview"
      android:background="@color/color_FFD115"
      android:id="@+id/common_textview2"
      android:layout_width="60dp"
      android:layout_height="50dp" />

</androidx.constraintlayout.widget.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">

  <View
      android:id="@+id/common_view"
      android:layout_width="100dp"
      android:layout_height="100dp"
      app:layout_constraintEnd_toStartOf="@id/common_view2"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <View
      android:id="@+id/common_view2"
      android:layout_width="100dp"
      android:layout_height="100dp"
      app:layout_constraintEnd_toStartOf="@id/common_view3"
      app:layout_constraintStart_toEndOf="@id/common_view"
      app:layout_constraintTop_toTopOf="parent" />

  <View
      android:id="@+id/common_view3"
      android:layout_width="100dp"
      android:layout_height="100dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/common_view2"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

同等宽度间距平分

控件宽度平分，只需要改变上述代码中的android:layout_width="0dp"即可实现。
代码如下：

<?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">

   <View
       android:id="@+id/common_view"
       android:layout_width="0dp"
       android:layout_height="100dp"
       app:layout_constraintEnd_toStartOf="@id/common_view2"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <View
       android:id="@+id/common_view2"
       android:layout_width="0dp"
       android:layout_height="100dp"
       app:layout_constraintEnd_toStartOf="@id/common_view3"
       app:layout_constraintStart_toEndOf="@id/common_view"
       app:layout_constraintTop_toTopOf="parent" />

   <View
       android:id="@+id/common_view3"
       android:layout_width="0dp"
       android:layout_height="100dp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="@id/common_view2"
       app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

效果图如下：

平分空间

重点：让宽度为0dp，充满约束即可。

根据不同的权重实现不同比例的平分，这里的权重的使用必须是充满约束才会生效，即宽度为0dp，而且约束布局的权重分为垂直和水平两个方向。
代码如下：

<?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">

  <View
      android:id="@+id/common_view"
      android:layout_width="0dp"
      android:layout_height="100dp"
      app:layout_constraintHorizontal_weight="3"
      app:layout_constraintEnd_toStartOf="@id/common_view2"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <View
      app:layout_constraintHorizontal_weight="2"
      android:id="@+id/common_view2"
      android:layout_width="0dp"
      android:layout_height="100dp"
      app:layout_constraintEnd_toStartOf="@id/common_view3"
      app:layout_constraintStart_toEndOf="@id/common_view"
      app:layout_constraintTop_toTopOf="parent" />

  <View
      app:layout_constraintHorizontal_weight="1"
      android:id="@+id/common_view3"
      android:layout_width="0dp"
      android:layout_height="100dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/common_view2"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.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">

  <TextView
      android:id="@+id/view1"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      android:text="78"
      android:textSize="128sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <TextView
      app:layout_constraintStart_toEndOf="@+id/view1"
      app:layout_constraintBaseline_toBaselineOf="@+id/view1"
      android:text="%"
      android:textSize="40sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <TextView
      android:id="@+id/view2"
      android:layout_marginTop="260dp"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      android:text="78"
      android:textSize="128sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <TextView
      app:layout_constraintStart_toEndOf="@+id/view2"
      app:layout_constraintBottom_toBottomOf="@+id/view2"
      android:text="%"
      android:textSize="40sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

 </androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

文字基准线对齐

角度定位
使用角度定位需要3个条件：1.圆心 2.半径 3.角度。其中角度是从正上方顺时针开始的。
代码如下：

<?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">

  <ImageView
      android:id="@+id/view_sun"
      android:layout_width="80dp"
      android:layout_height="80dp"
      android:src="@drawable/sun"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <ImageView
      android:id="@+id/view_earth"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:src="@drawable/earth"
      app:layout_constraintCircle="@+id/view_sun"
      app:layout_constraintCircleAngle="45"
      app:layout_constraintCircleRadius="150dp" />

  <ImageView
      android:id="@+id/view_moon"
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:src="@drawable/moon"
      app:layout_constraintCircle="@+id/view_earth"
      app:layout_constraintCircleAngle="130"
      app:layout_constraintCircleRadius="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

说明：

layout_constraintCircle 以哪个view为圆心
layout_constraintCircleRadius 圆的半径
layout_constraintCircleAngle 旋转角度，以第一象限顺时针开始。

效果如下：

角度定位

约束宽度
一个文本的长度不能超过图片的宽度。
代码如下：

<?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:background="@android:color/black"
  android:layout_height="match_parent">

  <ImageView
      android:src="@drawable/sun"
      android:scaleType="fitXY"
      android:id="@+id/view1"
      android:layout_width="260dp"
      android:layout_height="80dp"
      android:layout_marginTop="50dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:layout_marginTop="10dp"
      android:textColor="@android:color/white"
      app:layout_constrainedWidth="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="文本很长很长文本很长很长文本很长很长文本很长很长文本很长很长文本很长很长"
      android:textSize="12sp"
      app:layout_constraintEnd_toEndOf="@+id/view1"
      app:layout_constraintStart_toStartOf="@+id/view1"
      app:layout_constraintTop_toBottomOf="@+id/view1" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

约束宽度

可以看到文本的整体的宽度被约束为和上面的图片等宽，高度的约束也是同理。

bias，约束倾向，取值范围：0.0-1.0。 0.0最左侧，1.0最右侧。一般配合约束宽度来使用。
看下聊天的UI效果如下：

聊天

文字短的时候包裹内容，超过最大宽度换行展示。
代码如下：

<?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"
  android:background="@android:color/black">

  <ImageView
      android:id="@+id/view1"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_marginTop="50dp"
      android:scaleType="fitXY"
      android:layout_marginStart="15dp"
      android:src="@drawable/sun"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:paddingTop="3dp"
      android:paddingBottom="3dp"
      android:paddingStart="2dp"
      android:paddingEnd="2dp"
      android:background="@android:color/holo_red_dark"
      android:layout_marginEnd="15dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constrainedWidth="true"
      app:layout_constraintStart_toEndOf="@+id/view1"
      app:layout_constraintTop_toTopOf="@+id/view1"
      android:layout_marginStart="8dp"
      android:text="君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。"
      android:textColor="@android:color/white"
      android:textSize="16sp" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

短文字效果

短文字长度效果
中等文字效果

中等文字长度效果
超长文字效果

超长文字长度效果

水平方向上的约束倾向如上，垂直方向上的约束倾向同理。

GoneMargin。当约束目标控件隐藏时，控件自身可以保留一定的间距。
代码如下：

<?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"
  android:background="@android:color/black">

  <ImageView
      android:visibility="gone"
      android:id="@+id/view1"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_marginTop="50dp"
      android:scaleType="fitXY"
      android:layout_marginStart="15dp"
      android:src="@drawable/sun"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      app:layout_goneMarginStart="30dp"
      android:paddingTop="3dp"
      android:paddingBottom="3dp"
      android:paddingStart="2dp"
      android:paddingEnd="2dp"
      android:background="@android:color/holo_red_dark"
      android:layout_marginEnd="15dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constrainedWidth="true"
      app:layout_constraintStart_toEndOf="@+id/view1"
      app:layout_constraintTop_toTopOf="@+id/view1"
      android:layout_marginStart="8dp"
      android:text="君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。"
      android:textColor="@android:color/white"
      android:textSize="16sp" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

正常情况

GoneMargin1
当约束控件隐藏，但是不加GoneMargin属性。

GoneMargin2
当约束控件隐藏，加上GoneMargin属性。

GoneMargin3

可以看出来GoneMargin的作用了吧。

约束链风格 ChainStyle
风格：packed（打包，组合），spread（扩散，默认），spread_inside（内部扩散）。而且约束链风格必须写在第一个控件上才有效。

组件组合后居中
代码如下：

<?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"
  android:background="@android:color/black">

  <ImageView
      android:id="@+id/view1"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:scaleType="fitXY"
      android:src="@drawable/sun"
      app:layout_constraintVertical_chainStyle="packed"
      app:layout_constraintBottom_toTopOf="@+id/view2"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/view2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_red_dark"
      android:paddingStart="2dp"
      android:paddingTop="3dp"
      android:paddingEnd="2dp"
      android:paddingBottom="3dp"
      android:text="君不见，黄河之水天上来，奔流到海不复回。"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/view1" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

垂直方向约束链风格

而且还支持约束倾向bias.水平方向同理。

组件内部扩散
代码如下：

 <?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"
  android:background="@android:color/black">

  <View
      app:layout_constraintHorizontal_chainStyle="spread_inside"
      android:id="@+id/view1"
      android:layout_width="100dp"
      android:layout_height="200dp"
      android:background="@android:color/holo_red_dark"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/view2"
      app:layout_constraintStart_toStartOf="parent" />

  <View
      android:id="@+id/view2"
      android:layout_width="100dp"
      android:layout_height="200dp"
      android:background="@android:color/holo_red_dark"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/view3"
      app:layout_constraintStart_toEndOf="@+id/view1" />

  <View
      android:id="@+id/view3"
      android:layout_width="100dp"
      android:layout_height="200dp"
      android:background="@android:color/holo_red_dark"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@+id/view2" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

spread_inside

垂直方向同理。

控件宽高比例保持一致， DimensionRatio
使用这个属性的前提是，控件的宽或者高至少有一个是充满约束的，即为0dp。
代码如下：

<?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"
  android:background="@android:color/black">

  <ImageView
      android:id="@+id/view1"
      android:layout_width="200dp"
      android:layout_height="0dp"
      app:layout_constraintDimensionRatio="2:1"
      android:background="@drawable/sun"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

宽高比：2:1
效果如下：

DimensionRatio

如果宽和高都是0dp，DimensionRatio需要加上“H,2:1”，这个H说明高度是计算出来的，也就是说宽度充满约束，这里就不再演示了。

百分比布局，宽度或者高度占parent的百分比
这个百分比始终是针对parent的百分比，而且使用百分比的前提是宽度或者高度必须充满约束，即0dp。
代码如下：

 <?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"
  android:background="@android:color/black">

  <View
      android:background="@android:color/holo_red_dark"
      android:layout_width="0dp"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintWidth_percent="0.3"
      android:layout_height="320dp"/>

  <View
      android:background="@android:color/holo_green_dark"
      android:layout_width="0dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent="0.5"
      android:layout_height="320dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

百分比

第一个View 宽度占parent 的30%，第二个View宽度占parent的50%，垂直方向上的百分比同理。

GuideLine（基准线/辅助线）
这个是辅助控件，辅助控件之间的约束，而不是一个真正的控件。
下面举一个简单的UI栗子，比如登录页面。
代码如下：

<?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"
  android:background="@android:color/black">

  <androidx.constraintlayout.widget.Guideline
      android:id="@+id/guide_line"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuide_percent="0.2" />

  <TextView
      android:id="@+id/tv_username"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="70dp"
      android:paddingTop="20dp"
      android:paddingBottom="20dp"
      android:text="用户名"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintEnd_toStartOf="@+id/guide_line"
      app:layout_constraintTop_toTopOf="parent" />

  <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="8dp"
      android:background="@android:color/white"
      android:hint="输入用户名"
      android:textColorHint="@android:color/black"
      app:layout_constraintBaseline_toBaselineOf="@id/tv_username"
      app:layout_constraintStart_toEndOf="@+id/guide_line" />

  <TextView
      android:id="@+id/tv_password"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:paddingTop="20dp"
      android:paddingBottom="20dp"
      android:text="密码"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintEnd_toStartOf="@+id/guide_line"
      app:layout_constraintTop_toBottomOf="@+id/tv_username" />

  <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="8dp"
      android:background="@android:color/white"
      android:hint="输入密码"
      android:textColor="@android:color/black"
      android:textColorHint="@android:color/black"
      app:layout_constraintBaseline_toBaselineOf="@+id/tv_password"
      app:layout_constraintStart_toEndOf="@+id/guide_line" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

GuidLine

Group
当某一种状态下需要多好多控件进行隐藏和显示时，可以使用Group，来统一显示和隐藏。
代码如下:

<?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"
  android:background="@android:color/black">

  <androidx.constraintlayout.widget.Group
      android:id="@+id/group1"
      android:layout_width="wrap_content"
      android:visibility="gone"
      android:layout_height="wrap_content"
      app:constraint_referenced_ids="tv1,tv2" />

  <androidx.constraintlayout.widget.Group
      android:id="@+id/group2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:constraint_referenced_ids="tv3,tv4" />

  <TextView
      android:id="@+id/tv1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dp"
      android:padding="15dp"
      android:text="group1"
      android:textColor="@android:color/white"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/tv2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:padding="15dp"
      android:text="group1-2"
      android:textColor="@android:color/white"
      app:layout_constraintStart_toEndOf="@+id/tv1"
      app:layout_constraintTop_toTopOf="@+id/tv1" />

  <TextView
      android:id="@+id/tv3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="30dp"
      android:layout_marginTop="80dp"
      android:padding="15dp"
      android:text="group2"
      android:textColor="@android:color/white"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/tv4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:padding="15dp"
      android:text="group2-1"
      android:textColor="@android:color/white"
      app:layout_constraintStart_toEndOf="@+id/tv3"
      app:layout_constraintTop_toTopOf="@+id/tv3" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：
设置Group1的visibility=visible时，效果如下：

Visible

设置Group1的visibility=gone时，效果如下：

Gone

Layer
也是一个约束辅助，它的使用和Group类似，只不过layer可以对整体进行旋转，平移等常用的操作。
代码如下：

public class CommonTest extends FragmentActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.common_constraint_layout_demo);
      findViewById(R.id.layer).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              //旋转45d°
              findViewById(R.id.layer).setRotation(45);
              //X轴向右平移100px
              findViewById(R.id.layer).setTranslationX(100);
              //Y轴向下平移100px
              findViewById(R.id.layer).setTranslationY(100);
          }
      });
  }
}

<?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"
  android:background="@android:color/black">

  <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginTop="10dp"
      android:text="旋转"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <androidx.constraintlayout.helper.widget.Layer
      android:id="@+id/layer"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:constraint_referenced_ids="tv1,tv2,tv3,tv4"
      tools:ignore="MissingConstraints" />

  <TextView
      android:id="@+id/tv1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="15dp"
      android:layout_marginTop="10dp"
      android:background="@android:color/holo_blue_light"
      android:padding="10dp"
      android:text="text1"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/button" />

  <TextView
      android:id="@+id/tv2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_green_dark"
      android:padding="10dp"
      android:text="text2"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintStart_toEndOf="@+id/tv1"
      app:layout_constraintTop_toTopOf="@+id/tv1" />

  <TextView
      android:id="@+id/tv3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="30dp"
      android:layout_marginTop="40dp"
      android:background="@android:color/darker_gray"
      android:padding="10dp"
      android:text="text3"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintStart_toStartOf="@+id/tv1"
      app:layout_constraintTop_toBottomOf="@+id/tv1" />

  <TextView
      android:id="@+id/tv4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_purple"
      android:padding="10dp"
      android:text="text4"
      android:textColor="@android:color/white"
      android:textSize="16sp"
      app:layout_constraintStart_toEndOf="@+id/tv3"
      app:layout_constraintTop_toTopOf="@+id/tv3" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

Layer

Barrier
屏障,栅栏。给约束控件设置约束上的屏障，已达到约束位置的目的。
代码如下：

<?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"
  android:background="@android:color/black"
  tools:context=".ui.CommonTest">

  <androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="end"
      app:constraint_referenced_ids="tv1,tv2"
      tools:ignore="MissingConstraints" />

  <TextView
      android:id="@+id/tv1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="15dp"
      android:text="文本1文本1文本1文本1文本1"
      android:textColor="@android:color/white"
      android:textSize="15sp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/tv2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="30dp"
      android:text="文本2文本2"
      android:textColor="@android:color/white"
      android:textSize="15sp"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/tv1" />

  <ImageView
      android:id="@+id/iv1"
      android:layout_width="25dp"
      android:layout_height="25dp"
      android:src="@drawable/moon"
      app:layout_constraintStart_toEndOf="@+id/barrier"
      app:layout_constraintTop_toTopOf="@+id/tv1" />

  <ImageView
      android:id="@+id/iv2"
      android:layout_width="25dp"
      android:layout_height="25dp"
      android:src="@drawable/moon"
      app:layout_constraintStart_toEndOf="@+id/barrier"
      app:layout_constraintTop_toTopOf="@+id/tv2" />

 </androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

Barrier

像：Group，Layer，Barrier都是以ID的引用来实现的，所以如果使用了特殊的混淆工具，对id资源进行了混淆，这里就需要注意下，不然运行起来会找不到id的。

Placeholder
占位符。
代码如下：

 public class CommonTest extends FragmentActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.common_constraint_layout_demo);
  }

  public void onClick(View view) {
      findViewById(R.id.placeholder).setContentId(view.getId());
  }
}

<?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"
  android:background="@android:color/black"
  tools:context=".ui.CommonTest">

  <androidx.constraintlayout.widget.Placeholder
      android:id="@+id/placeholder"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:layout_marginTop="20dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <ImageView
      android:id="@+id/iv1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/sun"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/iv2"
      app:layout_constraintStart_toStartOf="parent" />

  <ImageView
      android:id="@+id/iv2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/earth"
      app:layout_constraintEnd_toStartOf="@+id/iv3"
      app:layout_constraintStart_toEndOf="@+id/iv1"
      app:layout_constraintTop_toTopOf="@+id/iv1" />

  <ImageView
      android:id="@+id/iv3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/moon"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@+id/iv2"
      app:layout_constraintTop_toTopOf="@+id/iv1" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

Placeholder

当点击下面3个view其中一个view的时候，被点击的view会被替换到上面的Placeholder所在的位置。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 220,492评论 6赞 513
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,048评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 166,927评论 0赞 358
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,293评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,309评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,024评论 1赞 308
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,638评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,546评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,073评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,188评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,321评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,998评论 5赞 347
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,678评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,186评论 0赞 23
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,303评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,663评论 3赞 375
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,330评论 2赞 358

Android ConstraintLayout约束布局简单使用介绍

前言

推荐阅读更多精彩内容