Android Material Design控制項使用——ConstraintLayout 約束布局
本章節將分為兩個模塊給大家推送，覺得不錯的可以關注下哦
介紹
Android ConstraintLayout是谷歌推出替代PrecentLayout的組件。
支持相對布局、線性布局、幀布局，看來更像是FrameLayout 、LinearLayout、`RelativeLayout·三者的結合體，並且比這三者更強大的是實現了百分比布局。
大家都知道安卓碎片嚴重，使用百分比適配，那麼將徹底解決適配問題
總結：我最近也是剛學，學完之後，發現這個布局已經將上述的所有布局的特點全部融合在一起了，使用起來簡單方便的不要不要的，就是學習的屬性有點多啊。
不過，多也是正常的，畢竟融合了五大布局的所有特點，學完這個布局，各種界面UI都難不倒我們了
添加依賴
implementation com.android.support.constraint:constraint-layout:1.1.3
我使用的是Android Studio3.0.1版本，已經自動導入了，默認使用的就是這個布局
屬性及對應的方法
我們先了解一下一些基本的概念
這裡提一下，start和left其實都是指控制項的左邊，end和right都事指控制項的右邊
基本屬性
注意，這裡的屬性都得使用命名空間來才能使用
寬高屬性與之前的layout相同，wrap_content和match_parent，但除此之外，還多出了一種，名為match contraint
實際上，這個多出來的相當於0dp，如果之前使用過LinearLayout的權重的話，應該對0dp有印象.
這裡，約束布局應該是繼承了Linearlayout的特性，之後我們設置權重與Linearlayout的操作也是類似，具體的請往後面看，這可是實現了百分比布局的強大布局。
屬性值為控制項id
layout_constraintLeft_toLeftOf當前控制項的左邊依賴於屬性控制項的左邊layout_constraintLeft_toRightOf當前控制項的左邊依賴於屬性控制項的右邊layout_constraintRight_toLeftOfayout_constraintRight_toRightOflayout_constraintTop_toTopOflayout_constraintTop_toBottomOflayout_constraintBottom_toTopOflayout_constraintBottom_toBottomOflayout_constraintBaseline_toBaselineOf當前的控制項基線與屬性控制項的基線對齊layout_constraintStart_toEndOflayout_constraintStart_toStartOflayout_constraintEnd_toStartOflayout_constraintEnd_toEndOf
示例：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width_="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
A左邊依賴總布局的左邊，頂部則是依賴總布局的頂部，B則是左邊依賴於A的右邊，頂部依賴父布局的頂部
其他的就不一一列舉了，舉一反三，挺容易的
mragin 邊距
只有在設置了依賴，之後設置邊距才會效果
這個屬性不需要使用app開頭，屬於原本的屬性
android:layout_marginStart設置左邊的邊距android:layout_marginEndandroid:layout_marginLeftandroid:layout_marginTopandroid:layout_marginRightandroid:layout_marginBottom
例如：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width_="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_marginLeft="30dp"
android:layout_marginTop="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:text="B"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
示例：
使控制項B與A垂直對齊
B的左邊依賴A的左邊，B的右邊依賴A的右邊即可
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width_="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="124dp"
android:layout_marginTop="16dp"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width_="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="B"
app:layout_constraintEnd_toEndOf="@+id/btnA"
app:layout_constraintStart_toStartOf="@+id/btnA"
app:layout_constraintTop_toBottomOf="@+id/btnA"/>
</android.support.constraint.ConstraintLayout>
輔助類或屬性使用
1. Barrier 屏障 控制項
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
app:barrierDirection為屏障所在的位置，可設置的值有：bottom、end、left、right、start、top
app:constraint_referenced_ids為屏障引用的控制項，可設置多個(用「,」隔開)
2. Gruop 組 控制項
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="TextView1,TextView3" />
3. Placeholder 佔位符 控制項
設置好佔位符控制項的位置，之後調用setContent，把指定id的控制項放在佔位符的位置
app:content=
4. Guideline 輔助線 控制項
可以使用這個控制項達到百分比布局的效果,或者是當前的控制項沒有符合條件的參照物的情況使用
Guideline還有三個重要的屬性，每個Guideline只能指定其中一個：
layout_constraintGuide_begin，指定左側或頂部的固定距離，如100dp，在距離左側或者頂部100dp的位置會出現一條輔助線layout_constraintGuide_end，指定右側或底部的固定距離，如30dp，在距離右側或底部30dp的位置會出現一條輔助線layout_constraintGuide_percent，指定在父控制項中的寬度或高度的百分比，如0.8，表示距離頂部或者左側的80%的距離。android:orientation設置垂直或者是水平
Guideline是隱藏的，不用我們進行多餘的設置，雖然外面在預覽面板可以死看到它的存在
例子：使一個按鈕的長度佔滿屏幕一半
<android.support.constraint.Guideline
android:layout_width_="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width_="0dp"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
app:layout_constraintTop_toTopOf="parent" />
Radio 比例 屬性
方便快捷調整控制項的寬高比，結合Guideline使用更佳
例子：
app:layout_constraintDimensionRatio
想要寬度與總布局一樣，但高度是寬度的三分之一
寬高比為3:1
<Button
android:layout_width_="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="3:1"/>
Chain 鏈 屬性
可以把這個當做成一個加強版的LinearLayout
由上圖，很好的知道了A與B的約束，A的左邊是父控制項的左邊，右邊則是B，B的左邊是A，B的右邊的是父控制項的右邊
chainstyle有三種屬性，分別是spread,spread_inside,pack，效果如下圖
spread元素將展開（默認）spread_inside元素展開，但鏈的端點不會展開pack鏈中的元素將包裹在一起。子控制項的水平或垂直方向的偏置bias屬性會影響包裹中元素的位置
剩下的兩種則是通過添加屬性實現的
weighted chain是在spread chain的基礎上，而packed chain with bias則是在weight chain的基礎上
style為spread的，使用layout_constraintHorizontal_weight或layout_constraintVertical_weight來設置weigh權重
style為pack的，使用layout_constraintHorizontal_bias或layout_constraintVertical_bias進行偏移設置，屬性值0-1，也是百分比，改第一個元素
這裡需要說明的是，除了水平，還可以是垂直排列，不過，不能通過屬性來更改，而是通過約束來更改,把左邊改為頂端，右邊改為底部
如果是水平的，使用屬性layout_constraintHorizontal_chainStyle進行chainstyle屬性的更改
垂直的則是使用layout_constraintVertical_chainStyle
例子：
三個按鈕平分寬度（只需要將寬度設置為0dp就可以達到目的）
<Button
android:id="@+id/btn"
android:layout_width_="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="@id/btn1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/btn1"
android:layout_width_="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn"
app:layout_constraintEnd_toStartOf="@id/btn2"/>
<Button
android:id="@+id/btn2"
android:layout_width_="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn1"
app:layout_constraintEnd_toEndOf="parent"/>
總結：大概就是這樣的，有問題歡迎留言討論；
推薦閱讀：
※安卓有什麼好的小說閱讀軟體？
※歐盟罰哭谷歌，安卓可能收費，國內手機廠商慌不？
※做安卓照樣能拿 50k offer，服不服？
※如何評價Google開發新系統Fuchsia？
※榮耀10青春版：有顏有料，以細節詮釋榮耀緊跟智能手機進化新方向