ConstraintLayout使用匯總

時間 2019-12-06

標籤 constraintlayout 使用彙總简体版

原文原文鏈接

前言

在這裏我要向你們介紹ConstraintLayout，它是一種佈局方法，能夠幫助咱們在對Android進行佈局時減小對佈局層次的嵌套，進而提升app的性能。android

接下來我會經過一些示例來全面介紹ConstraintLayout的使用方式與它的一些特性。但願可以幫助正在學習ConstraintLayout使用的同窗們。git

ConstraintLayout VS RelativeLayout

相信當咱們進行佈局的時候，使用最多的應該是LinearLayout與RelativeLayout。而對於複雜一點的佈局來講，他們之間的嵌套使用就最正常不過了。因此爲了減小沒必要要的嵌套佈局，Google特地開發的ConstraintLayout。它同時支持LinearLayout與RelativeLayout的所用特性。同時它徹底經過約束來減小布局的嵌套。意思就是基本上最外層只須要一個ConstraintLayout節點就能夠了。下面先從RelativeLayout開始，看它是如何來實現RelativeLayout的特性。github

這裏我列舉一些RelativeLayout的特性：api

android:layout_alignStart="@id/view"
android:layout_alignLeft="@id/view"
android:layout_alignEnd="@id/view"
android:layout_alignRight="@id/view"
android:layout_alignTop="@id/view"
android:layout_alignBaseline="@id/view"
android:layout_alignBottom="@id/view"
 
android:layout_toStartOf="@id/view"
android:layout_toLeftOf="@id/view"
android:layout_toEndOf="@id/view"
android:layout_toRightOf="@id/view"
android:layout_above="@id/view"
android:layout_below="@id/view"
 
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
 
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

相信上面的特性你們再熟悉不過了。對於layout_align*的屬性在ConstraintLayout中能夠經過如下方式替代。app

app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintLeft_toLeftOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
app:layout_constraintRight_toRightOf="@id/view"
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBaseline_toBaselineOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

而對於layout_to*的屬性ConstraintLayout也有與之完美替代的特性：ide

app:layout_constraintStart_toEndOf="@id/view"
app:layout_constraintLeft_toRightOf="@id/view"
app:layout_constraintEnd_toStartOf="@id/view"
app:layout_constraintRight_toLeftOf="@id/view"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/view"

接下來是layout_alignParent*的替代實現：佈局

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

這裏與以前的layout_align*基本相似，只不過它的因此約束的對象不一樣而已，爲了實現對父佈局的依賴，這裏統一都是parent。性能

最後是layout_center*屬性，本質與上面的基本相似。下面直接經過實例來展現學習

<Button
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

經過上面的代碼相信不難理解，要想實現水平居中只需設置left與right分別約束parent，而要想實現豎直居中則只需設置top與bottom分別約束parent。ui

爲了鞏固上面的特性，我這裏寫了一個示例代碼與效果圖，方便你們理解

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="left" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="right"
        app:layout_constraintRight_toRightOf="parent" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bottom"
        app:layout_constraintBottom_toBottomOf="parent" />
 
    <Button
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center top"
        app:layout_constraintBottom_toTopOf="@+id/center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center bottom"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center left"
        app:layout_constraintRight_toLeftOf="@+id/center"
        app:layout_constraintTop_toTopOf="@+id/center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center right"
        app:layout_constraintLeft_toRightOf="@+id/center"
        app:layout_constraintTop_toTopOf="@+id/center" />

</android.support.constraint.ConstraintLayout>

點擊查看源碼

在ConstraintLayout中沒有match_parent,而與之替代的是match_constraint，在使用中經過0dp來表明。一旦你使用了match_parent那麼它的約束將會失效。

ConstraintLayout VS LinearLayout

爲了可以達到LinearLayout的效果，ConstraintLayout引入了Chain Style.經過如下代碼來設置：

app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

它主要有三個屬性分別爲：

spread_inside:兩邊不留空間，中間間距平分
spread:徹底均分
packed:徹底不留間距

解釋的有點生硬，下面經過一張官方圖來更直觀的瞭解

須要注意的是：要達到上的的chain效果，他們之間必須徹底相互約束，同時chain style的設置都是以第一個view爲基點。同時默認chain style爲spread。

一樣的下面是一個示例代碼與效果圖

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/second" />
 
    <Button
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toLeftOf="@+id/third"
        app:layout_constraintTop_toTopOf="@+id/first" />
 
    <Button
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/first" />
 
    <Button
        android:id="@+id/match_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/match_second"
        app:layout_constraintTop_toBottomOf="@+id/first" />
 
    <Button
        android:id="@+id/match_second"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toRightOf="@+id/match_first"
        app:layout_constraintRight_toLeftOf="@+id/match_third"
        app:layout_constraintTop_toTopOf="@+id/match_first" />
 
    <Button
        android:id="@+id/match_third"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintHorizontal_weight="4"
        app:layout_constraintLeft_toRightOf="@+id/match_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/match_first" />
 
    <Button
        android:id="@+id/spread_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/spread_second"
        app:layout_constraintTop_toBottomOf="@+id/match_first" />
 
    <Button
        android:id="@+id/spread_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/spread_first"
        app:layout_constraintRight_toLeftOf="@+id/spread_third"
        app:layout_constraintTop_toTopOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/spread_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/spread_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/packed_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/packed_second"
        app:layout_constraintTop_toBottomOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/packed_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/packed_first"
        app:layout_constraintRight_toLeftOf="@+id/packed_third"
        app:layout_constraintTop_toTopOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/packed_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/packed_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/bias_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/bias_second"
        app:layout_constraintTop_toBottomOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/bias_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/bias_first"
        app:layout_constraintRight_toLeftOf="@+id/bias_third"
        app:layout_constraintTop_toTopOf="@+id/bias_first" />
 
    <Button
        android:id="@+id/bias_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/bias_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/bias_first" />
 
</android.support.constraint.ConstraintLayout>

點擊查看源碼

經過效果圖，咱們會發現第二行他們佔的比例不一樣，返回看代碼發現其實與LinearLayout相似,使用了app:layout_constraintHorizontal_weight=""權重屬性。固然要使得其生效必須layout_width與layout_height其中一個爲0dp。
咱們再來看第四、5行，若是chain style的值爲packed，那麼它默認是居中排列的，若是想改變的話能夠經過設置app:layout_constraintHorizontal_bias="0.2"與app:layout_constraintVertical_bias="0.2"。

margin & goneMargin

margin

ConstraintLayout的margin與原來的使用區別主要爲兩點：其一android:layout_margin*效果不變，但它的值不能爲負值；其二相應方向的margin設置必需要有約束，不然不生效。

<TextView
        android:id="@+id/tv1"
        ...
        android:layout_marginRight="100dp"        
        app:layout_constraintLeft_toLeftOf="parent"/>
 
    <TextView
        android:layout_marginLeft="10dp"
        ...       
        app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />

首先咱們來看第二個TextView，它的marginLeft會生效，由於它有left方向的約束：app:layout_constraintLeft_toRightOf="@+id/tv1"；而對於第一個TextView，它的marginRight不會生效，由於它的right方向上沒有約束，因此若是要生效能夠加入:app:layout_constraintRight_toRightOf="parent約束。

這些都是相對於原來佈局margin使用的區別，若是你以爲不習慣可使用padding代替，這也是ConstraintLayout所推薦的方式。

goneMargin

在ConstraintLayout中還增長了另一種goneMargin，它的做用主要是：一旦某個方向上的約束view不能夠見，這時若是設置了該屬性，該方向將自動增長margin值。即目標必須不可見。

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

    <TextView
        android:id="@+id/tv1"
        android:layout_marginTop="100dp"
        android:text="tv1"
        ...
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
 
    <TextView
        android:layout_marginLeft="10dp"
        android:text="tv2"
        ....
        app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />
 
    <TextView
        android:id="@+id/tv3"
        ...
        android:text="tv3"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:id="@+id/tv4"
        android:layout_marginLeft="10dp"
        android:text="tv4"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginLeft="100dp" />
 
    <TextView
        android:id="@+id/tv5"
        ...
        android:layout_marginBottom="10dp"
        android:text="tv5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.33" />
 
</android.support.constraint.ConstraintLayout>

點擊查看源碼

Circle

在ConstraintLayout中你不只能夠對任意view進行水平與豎直方向的約束，同時你還能夠居於約束view的中心點進行不一樣角度方向的約束。主要屬性有以下三種：

layout_constraintCircle: 表明約束的view的id
layout_constraintCircleAngle: 表明約束的角度
layout_constraintCircleRadius: 表明約束的半徑大小

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
 ...
 >
 
    <TextView
        android:id="@+id/tv1"
        android:text="tv1"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:text="tv2"
        ...
        app:layout_constraintCircle="@id/tv1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />
 
</android.support.constraint.ConstraintLayout>

點擊查看源碼

GuideLine

GuideLine也是ConstraintLayout特有的屬性，它至關於一個參考線，且它的佈局中不會展現。

GuidLine有水平與豎直方法的設置：

android:orientation="horizontal|vertical"

主要設置屬性爲：

layout_constraintGuide_begin: 表明距離GuideLine左邊或者底部的距離
layout_constraintGuide_end: 表明距離GuideLine右邊或者底部的距離
layout_constraintGuide_percent：表明GuideLine相對於parent的位置百分比

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto"
   ...
    >
 
    <android.support.constraint.Guideline
        android:id="@+id/vertical_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="150dp" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/vertical_guide_line"
        app:layout_constraintTop_toTopOf="parent" />
 
    <android.support.constraint.Guideline
        android:id="@+id/horizontal_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="150dp" />
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintRight_toLeftOf="@+id/vertical_guide_line"
        app:layout_constraintTop_toTopOf="@+id/horizontal_guide_line" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="@+id/horizontal_guide_line"
        app:layout_constraintLeft_toRightOf="@+id/vertical_guide_line" />
 
    <android.support.constraint.Guideline
        android:id="@+id/percent_guide_Line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="margin top of parent 30%"
        app:layout_constraintTop_toBottomOf="@+id/percent_guide_Line" />
 
</android.support.constraint.ConstraintLayout>

點擊查看源碼

Barrier & Group

Barrier

Barrier與GuideLine有點相似，也是佈局不可見的，不一樣的是它就約束對象的，看以下圖：

若是有這麼一種需求：tv3始終在tv1與tv2的最近右邊，但tv1與tv2的寬度的不看預期的，便可能tv1更長或者tv2更長。這時Barrier就能很好的解決這問題。

<!--barrier-->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv1，固定寬度"
        android:textColor="@android:color/white" />
 
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv2，寬度不固定"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@+id/tv1" />
 
    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv1,tv2" />
 
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="@string/barrier_tv3"
        android:textColor="@android:color/white"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent" />

在Barrier中有兩個屬性，分別爲:

barrierDirection：控制其方向
constraint_referenced_ids：約束的view的參考id

Group

細心的你可能會發現，既然ConstraintLayout中能減小布局的嵌套，那麼對於同一模塊的UI對其進行總體操做，是否只能逐一進行操做（顯隱操做）？ConstraintLayout給出了它的答案，就是Group。它的做用就是對多個view進行分組操做，固然在佈局中也是不可見的。主要屬性是：

constraint_referenced_ids: 約束的view的參考id

就拿上面Barrier的示例來講。

<!--group 經過設置關聯id來控制它們的顯隱-->
    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tv1,tv2" />

若是加了如上代碼，那麼對group進行VISIBLE操做時，對同時做用於tv1與tv2。

點擊查看源碼

other

下面來講一下使用ConstraintLayout時，一些須要注意的點。這樣能夠幫助你在使用作少走彎路。

wrap_content

若是你的View中對寬高使用了wrap_content，那麼你要時刻注意，它的約束可能並不會很好的生效。例如以下實例：

<!--當爲wrap_content對其進行強制約束-->
    <!--app:layout_constrainedWidth=」true|false」-->
    <!--app:layout_constrainedHeight=」true|false」-->
    <!--android:minWidth-->
    <!--android:minHeight-->
    <!--android:maxWidth-->
    <!--android:maxHeight-->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv1"
        android:textColor="@android:color/white" />
 
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="@string/other_tv2"
        android:textColor="@android:color/white"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintRight_toRightOf="parent" />

若是將app:layout_constrainedWidth="true"這行代碼刪除，那麼你將會看到以下效果

在代碼註釋中已經說明，在使用wrap_content時，還可使用minWith等屬性。它們之間的優先級爲 min/max > constraintWith/Height

MATCH_CONSTRAIN

當使用了MATCH_CONSTRAIN，即0dp來展現寬高時，能夠經過以下方式來進行約束相應寬高值。

<!--當爲MATCH_CONSTRAINT 能夠經過如下設置來約束寬高-->
    <!--layout_constraintWidth_min and layout_constraintHeight_min-->
    <!--layout_constraintWidth_max and layout_constraintHeight_max-->
    <!--layout_constraintWidth_percent and layout_constraintHeight_percent-->
    <!--android:minWidth-->
    <!--android:minHeight-->
    <!--android:maxWidth-->
    <!--android:maxHeight-->
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv3"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        app:layout_constraintWidth_percent="0.5" />

若是將app:layout_constraintWidth_percent="0.5"去掉的話，你將看到以下效果：

注意它們之間的優先級爲parent > min/max > constraint_min/max

Ratio

若是你的須要是對View進行固定寬高比展現時，那麼Ratio的這個特性將很是適合你。你只需設置它的layout_constraintDimensionRatio屬性便可。

若是layout_width與layout_height其中一個爲MATCH_CONSTRAIN（0dp）, MATCH_CONSTRAIN（0dp）的值將根據layout_constraintDimensionRatio所設的值來計算（w:h）

<TextView
        android:id="@+id/tv4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv4"
        android:textColor="@android:color/white"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintTop_toBottomOf="@+id/tv3" />

若是layout_width與layout_height都爲MATCH_CONSTRAIN（0dp）, 那麼能夠對layout_constraintDimensionRatio添加前綴W/H（H，w:h，來對其進行寬高方向的約束，從而造成比例。

<TextView
        android:id="@+id/tv5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv5"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,3:1"
        app:layout_constraintTop_toBottomOf="@+id/tv4" />

根據效果圖展現的寬高比爲1:3。即對應了H,3:1。

點擊查看源碼