一、ConstraintLayout 佈局優勢：
1、解決佈局嵌套過多的問題，以靈活的方式定位和調整小部件。
2、ConstraintLayout可以按照比例約束控件位置和尺寸，能夠更好地適配屏幕大小不同的機型。
二、基本使用方式：
1、相對定位（A的左邊是B的右邊）
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
2、邊距設置（A離上面多遠）
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
3、尺寸
android:minWidth 最小的寬度
android:minHeight 最小的高度
android:maxWidth 最大的寬度
android:maxHeight 最大的高度
4、寬高比（下面就是1比1的正方形）
app:layout_constraintDimensionRatio="1:1"
5、鏈
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_weight="2"
/>
<TextView
android:id="@+id/TextView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="3"
/>
<TextView
android:id="@+id/TextView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="4"
/>
效果：
layout_constraintHorizontal_weight：設置權重比
6、樣式
layout_constraintHorizontal_chainStyle：
來改變整條鏈的樣式
7、設置組（Group）
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="id1,id2"
/>
在group中設定相應的控件id進行統一屬性設置
8、按百分比設置控件尺寸
app:layout_constraintHeight_percent="0.1"
app:layout_constraintHeight_percent="0.5"
三、DEMO
<?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="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="@+id/clear_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="C"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintRight_toLeftOf="@id/back_btn"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toTopOf="@id/seven_btn"
/>
<Button
android:id="@+id/back_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="←"
app:layout_constraintLeft_toRightOf="@+id/clear_btn"
app:layout_constraintRight_toLeftOf="@id/percentage_btn"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintHorizontal_weight="1"
/>
<Button
android:id="@+id/percentage_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="%"
app:layout_constraintRight_toLeftOf="@id/division_btn"
app:layout_constraintLeft_toRightOf="@+id/back_btn"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintHorizontal_weight="1"
/>
<Button
android:id="@+id/division_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="÷"
app:layout_constraintLeft_toRightOf="@+id/percentage_btn"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintHorizontal_weight="1"
/>
<Button
android:id="@+id/seven_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="7"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/clear_btn"
app:layout_constraintRight_toRightOf="@id/clear_btn"
app:layout_constraintVertical_chainStyle="spread"
/>
<Button
android:id="@+id/eight_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="8"
app:layout_constraintTop_toBottomOf="@+id/back_btn"
app:layout_constraintLeft_toRightOf="@id/seven_btn"
app:layout_constraintRight_toRightOf="@id/back_btn"
/>
<Button
android:id="@+id/nine_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="9"
app:layout_constraintLeft_toRightOf="@id/eight_btn"
app:layout_constraintTop_toBottomOf="@+id/percentage_btn"
app:layout_constraintRight_toRightOf="@id/percentage_btn"
/>
<Button
android:id="@+id/multiplication_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="×"
app:layout_constraintLeft_toRightOf="@id/nine_btn"
app:layout_constraintTop_toBottomOf="@+id/division_btn"
app:layout_constraintRight_toRightOf="parent"
/>
<Button
android:id="@+id/four_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/seven_btn"
app:layout_constraintRight_toRightOf="@id/seven_btn"
app:layout_constraintVertical_chainStyle="spread"
/>
<Button
android:id="@+id/five_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="5"
app:layout_constraintLeft_toRightOf="@id/four_btn"
app:layout_constraintTop_toBottomOf="@+id/eight_btn"
app:layout_constraintRight_toRightOf="@id/eight_btn"
/>
<Button
android:id="@+id/six_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="6"
app:layout_constraintLeft_toRightOf="@id/five_btn"
app:layout_constraintTop_toBottomOf="@+id/nine_btn"
app:layout_constraintRight_toRightOf="@id/nine_btn"
/>
<Button
android:id="@+id/minus_btn"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="－"
app:layout_constraintLeft_toRightOf="@id/six_btn"
app:layout_constraintTop_toBottomOf="@+id/multiplication_btn"
app:layout_constraintRight_toRightOf="@id/multiplication_btn"
/>
<Button
android:id="@+id/one_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="1"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/four_btn"
app:layout_constraintRight_toRightOf="@id/four_btn"
app:layout_constraintVertical_chainStyle="spread"
/>
<Button
android:id="@+id/two_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="2"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toRightOf="@id/one_btn"
app:layout_constraintTop_toBottomOf="@+id/five_btn"
app:layout_constraintRight_toRightOf="@id/five_btn"
/>
<Button
android:id="@+id/three_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="3"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toRightOf="@id/two_btn"
app:layout_constraintTop_toBottomOf="@+id/six_btn"
app:layout_constraintRight_toRightOf="@id/six_btn"
/>
<Button
android:id="@+id/sub_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="＋"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toRightOf="@id/three_btn"
app:layout_constraintTop_toBottomOf="@+id/minus_btn"
app:layout_constraintRight_toRightOf="@id/minus_btn"
/>
<Button
android:id="@+id/change_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/one_btn"
app:layout_constraintRight_toRightOf="@id/one_btn"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread"
/>
<Button
android:id="@+id/zero_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="0"
app:layout_constraintLeft_toRightOf="@id/change_btn"
app:layout_constraintTop_toBottomOf="@+id/two_btn"
app:layout_constraintRight_toRightOf="@id/two_btn"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="@+id/point_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="."
app:layout_constraintLeft_toRightOf="@id/zero_btn"
app:layout_constraintTop_toBottomOf="@+id/three_btn"
app:layout_constraintRight_toRightOf="@id/three_btn"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="@+id/equal_btn"
android:layout_height="0dp"
android:layout_width="0dp"
android:text="＝"
app:layout_constraintLeft_toRightOf="@id/point_btn"
app:layout_constraintTop_toBottomOf="@+id/sub_btn"
app:layout_constraintRight_toRightOf="@id/sub_btn"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
四、效果：
五、結束