基本用法

layout_constraintLeft_toLeftOf="parent" 控件的左方与父控件的左边对齐
layout_constraintLeft_toRightOf="@+id/tv1" 控件的左方与指定控件的右边对齐
layout_constraintRight_toRightOf：当前Viewr的右边在某个View的右边，可以是parent与某个View的ID
layout_constraintRight_toLeftOf：当前Viewr的右边在某个View的左边，可以是parent与某个View的ID
layout_constraintBottom_toBottomOf：当前Viewr的下边在某个View的下边，可以是parent与某个View的ID
layout_constraintBottom_toTopOf：当前Viewr的下边在某个View的上边，可以是parent与某个View的ID
layout_constraintTop_toTopOf：当前Viewr的上边在某个View的上边，可以是parent与某个View的ID
layout_constraintTop_toBottomOf：当前Viewr的上边在某个View的下边，可以是parent与某个View的ID

想要实现下面的效果如图

Screenshot_2020-08-13-17-09-08-238_com.change.the.jpg

代码如下

<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/tv1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:text="1"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"

      />
    <TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="@color/colorBlack"
    android:text="2"
    android:textSize="20sp"
    android:textColor="@color/colorPrimaryDark"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/tv1"
    app:layout_constraintRight_toLeftOf="@+id/tv3"
    />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPurple"
        android:text="3"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv2"
        app:layout_constraintRight_toLeftOf="@+id/tv4"
        />
    <TextView
        android:id="@+id/tv4"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:text="4"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv3"
        app:layout_constraintRight_toRightOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

添加Linearlayout元素后的代码

引用段落 app:layout_constraintHorizontal_weight="2"

<?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/tv1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:text="1"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        app:layout_constraintHorizontal_weight="1"
      />
    <TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="@color/colorBlack"
    android:text="2"
    android:textSize="20sp"
    android:textColor="@color/colorPrimaryDark"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/tv1"
    app:layout_constraintRight_toLeftOf="@+id/tv3"
    app:layout_constraintHorizontal_weight="1"
    />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPurple"
        android:text="3"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv2"
        app:layout_constraintRight_toLeftOf="@+id/tv4"
        app:layout_constraintHorizontal_weight="2"
        />
    <TextView
        android:id="@+id/tv4"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:text="4"
        android:textSize="20sp"
        android:textColor="@color/colorPrimaryDark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="2"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

• 效果如下

  
  Screenshot_2020-08-13-17-17-49-491_com.change.the.jpg

Constantlayout实现百分比布局

以前我们写圖片的时候能直观感受到适配带来的痛苦，同样的布局，有的手机长有的手机短，造成高度上的不一致，

20181107181545220.jpg

拿了可以用constant布局避免他 用到Ratio属性宽高比
属性很简单，app:layout_constraintDimensionRatio

下面是示范代码做一个宽高比720:280

20181108151336773.jpg

这样就好很多