帶你瞭解 Android 約束佈局 ConstraintLayout
ConstraintLayout是Android新推出的一個佈局，其性能更好，連官方的hello world都用ConstraintLayout來寫了。所以極力推薦使用ConstraintLayout來編寫佈局。
本文主要介紹一下如何使用代碼來編寫ConstraintLayout佈局。
好了，開始我們的征程。
ConstraintLayout簡介
ConstraintLayout，可以翻譯為約束佈局，在2016年Google I/O 大會上發布。我們知道，當佈局嵌套過多時會出現一些性能問題。之前我們可以去通過RelativeLayout或者GridLayout來減少這種佈局嵌套的問題。現在，我們可以改用ConstraintLayout來減少佈局的層級結構。ConstraintLayout相比RelativeLayout，其性能更好，也更容易使用，結合Android Studio的佈局編輯器可以實現拖拽控制項來編寫佈局等等。
如果我們是新建工程，則Android Studio會默認幫我們加入ConstraintLayout的依賴了。如果我們是改造舊項目，可以在build.gradle中添加以下依賴：
"com.android.support.constraint:constraint-layout:1.1.2" implementation
然後就可以使用ConstraintLayout了。
相對位置
要在ConstraintLayout中確定view的位置,必須至少添加一個水平和垂直的約束。每一個約束表示到另一個view，父佈局，或者不可見的參考線的連接或者對齊。如果水平或者垂直方向上沒有約束，那麼其位置就是0。
我們先來看個例子：
< 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
="左對齊"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintTop_toTopOf
="parent"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="右對齊"
app:layout_constraintRight_toRightOf
="parent"
app:layout_constraintTop_toTopOf
="parent"
/>
<
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="水平居中"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="垂直居中"
app:layout_constraintBottom_toBottomOf
="parent"
app:layout_constraintTop_toTopOf
="parent"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="底部對齊"
app:layout_constraintBottom_toBottomOf
="parent"
app:layout_constraintLeft_toLeftOf
="parent"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="水平居中+垂直居中"
app:layout_constraintBottom_toBottomOf
="parent"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
app:layout_constraintTop_toTopOf
="parent"
/><
android.support.constraint.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"
><
Button
android:id
="@+id/btn_center"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#00f"
android:text
="水平參照物"
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:background
="#f00"
android:text
="Left_toLeftOf"
app:layout_constraintBottom_toTopOf
="@id/btn_center"
app:layout_constraintLeft_toLeftOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#0f0"
android:text
="Right_toLeftOf"
app:layout_constraintBottom_toTopOf
="@id/btn_center"
app:layout_constraintRight_toLeftOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#0f0"
android:text
="Right_toRightOf"
app:layout_constraintRight_toRightOf
="@id/btn_center"
app:layout_constraintTop_toBottomOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#f00"
android:text
="Left_toRightOf"
app:layout_constraintLeft_toRightOf
="@id/btn_center"
app:layout_constraintTop_toBottomOf
="@id/btn_center"
/><
android.support.constraint.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"
><
Button
android:id
="@+id/btn_center"
android:layout_width
="wrap_content"
android:layout_height
="100dp"
android:background
="#00f"
android:text
="豎直參照物"
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:background
="#f00"
android:text
="Top_toTopOf"
app:layout_constraintTop_toTopOf
="@id/btn_center"
app:layout_constraintRight_toLeftOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#0f0"
android:text
="Bottom_toTopOf"
app:layout_constraintBottom_toTopOf
="@id/btn_center"
app:layout_constraintRight_toLeftOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#0f0"
android:text
="Top_toBottomOf"
app:layout_constraintLeft_toRightOf
="@id/btn_center"
app:layout_constraintTop_toBottomOf
="@id/btn_center"
/><
Button
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:background
="#f00"
android:text
="Bottom_toBottomOf"
app:layout_constraintLeft_toRightOf
="@id/btn_center"
app:layout_constraintBottom_toBottomOf
="@id/btn_center"
/><
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/btn_center"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="wrap_content"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
app:layout_constraintTop_toTopOf
="parent"
/><
Button
android:id
="@+id/btn_1"
android:layout_width
="200dp"
android:layout_height
="wrap_content"
android:text
="具體數值：200dp"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
app:layout_constraintTop_toBottomOf
="@id/btn_center"
/><
Button
android:layout_width
="0dp"
android:layout_height
="wrap_content"
android:text
="0dp(MATCH_CONSTRAINT)"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
app:layout_constraintTop_toBottomOf
="@id/btn_1"
/><
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
="0dp"
android:text
="-------------------寬高比2：1-------------------"
app:layout_constraintDimensionRatio
="2:1"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
/><
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
="0dp"
android:layout_height
="wrap_content"
android:text
="寬50%"
app:layout_constraintHeight_default
="percent"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintWidth_percent
="0.5"
/><
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
="左邊偏向30%"
app:layout_constraintHorizontal_bias
="0.3"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toRightOf
="parent"
/><
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/btn_1"
android:layout_width
="0dp"
android:layout_height
="wrap_content"
android:text
="權重為1"
app:layout_constraintHorizontal_weight
="1"
app:layout_constraintLeft_toLeftOf
="parent"
app:layout_constraintRight_toLeftOf
="@id/btn_2"
/><
Button
android:id
="@+id/btn_2"
android:layout_width
="0dp"
android:layout_height
="wrap_content"
android:text
="權重為2"
app:layout_constraintHorizontal_weight
="2"
app:layout_constraintLeft_toRightOf
="@id/btn_1"
app:layout_constraintRight_toLeftOf
="@id/btn_3"
/><
Button
android:id
="@+id/btn_3"
android:layout_width
="0dp"
android:layout_height
="wrap_content"
app:layout_constraintHorizontal_weight
="2"
android:text
="權重為2"
app:layout_constraintLeft_toRightOf
="@id/btn_2"
app:layout_constraintRight_toRightOf
="parent"
/><
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"
><
android.support.constraint.Guideline
android:id
="@+id/guideline_h"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:orientation
="horizontal"
app:layout_constraintGuide_percent
="0.5"
/><
android.support.constraint.Guideline
android:id
="@+id/guideline_v"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:orientation
="vertical"
app:layout_constraintGuide_percent
="0.5"
/><
Button
app:layout_constraintLeft_toLeftOf
="@id/guideline_v"
app:layout_constraintTop_toTopOf
="@id/guideline_h"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:text
="輔助線定位"
/>
