ConstraintLayout簡單學習與使用
“自從在去年的Google I/O 大會上發(fā)布 ConstraintLayout 以來偷卧，我們一直不斷改進該布局的穩(wěn)定性裆操，完善對布局編輯器的支持。我們還針對 ConstraintLayout 增加了一些新功能谬以，幫助您構(gòu)建不同類型的布局泛领，例如引入鏈和按比例設置大小拐揭。
除了這些功能之外，使用ConstraintLayout還可以獲得一項顯著的性能優(yōu)勢≌殷荩”Google 開發(fā)者計劃工程師 Takeshi Hagikura說蹈垢，這大概就是這個新布局的有點慷吊。
下面我們還是從最基礎(chǔ)的布局開始學習。
1.開始
開發(fā)工具：AndroidStudio3.0以上
為了要使用ConstraintLayout曹抬，我們需要在app/build.gradle文件中添加ConstraintLayout的依賴溉瓶，如下所示。
dependencies {
implementation?'com.android.support.constraint:constraint-layout:1.1.2'?}
2.布局
（1）來編寫一個Feed Item
看到這樣的布局谤民，大家條件反射應該就是使用RelativeLayout來做堰酿，當然了，本案例我們使用ConstraintLayout來寫：
? ? 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="aorise.com.constraintlayout.MainActivity">
? ? ? ? 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:id="@+id/activity_main"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent"
? ? ? ? android:background="#11ff0000"
? ? ? ? tools:context="com.zhy.constrantlayout_learn.MainActivity">
? ? ? ? ? ? android:id="@+id/tv1"
? ? ? ? ? ? android:layout_width="140dp"
? ? ? ? ? ? android:layout_height="86dp"
? ? ? ? ? ? android:layout_marginLeft="12dp"
? ? ? ? ? ? android:layout_marginTop="12dp"
? ? ? ? ? ? android:background="#fd3"
? ? ? ? ? ? app:layout_constraintLeft_toLeftOf="parent"
? ? ? ? ? ? app:layout_constraintTop_toTopOf="parent"
? ? ? ? ? ? />
? ? ? ? ? ? android:id="@+id/tv2"
? ? ? ? ? ? android:layout_width="0dp"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:layout_marginLeft="8dp"
? ? ? ? ? ? android:layout_marginRight="12dp"
? ? ? ? ? ? android:text="馬云:一年交稅170多億馬云:一年交稅170多億馬云:一年交稅170多億"
? ? ? ? ? ? android:textColor="#000000"
? ? ? ? ? ? android:textSize="16dp"
? ? ? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv1"
? ? ? ? ? ? app:layout_constraintRight_toRightOf="parent"
? ? ? ? ? ? app:layout_constraintTop_toTopOf="@id/tv1" />
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:layout_marginLeft="8dp"
? ? ? ? ? ? android:layout_marginTop="12dp"
? ? ? ? ? ? android:text="8分鐘前"
? ? ? ? ? ? android:textColor="#333"
? ? ? ? ? ? android:textSize="12dp"
? ? ? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv1"
? ? ? ? ? ? app:layout_constraintBottom_toBottomOf="@id/tv1" />
看上面的布局张足，我們好像看到了幾個模式的屬性：
首先是tv1触创，有兩個沒見過的屬性：
app:layout_constraintLeft_toLeftOf="parent"
從字面上看，指的是讓該控件的左側(cè)與父布局對齊为牍，當我們希望控件A與控件B左側(cè)對齊時哼绑，就可以使用該屬性。
app:layout_constraintLeft_toLeftOf="@id/viewB"
類似的還有個相似的屬性為：
app:layout_constraintLeft_toRightOf
很好理解碉咆，即當前屬性的左側(cè)在誰的右側(cè)抖韩，當我們希望控件A在控件B的右側(cè)時，可以設置：
app:layout_constraintLeft_toRightOf="@id/viewB"
與之類似的還有幾個屬性：
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
屬性都形如layout_constraintXXX_toYYYOf,
這里我的理解疫铜，constraintXXX里的XXX代表是這個子控件自身的哪條邊(Left茂浮、Right、Top壳咕、Bottom席揽、Baseline)，
而toYYYOf里的YYY代表的是和約束控件的哪條邊 發(fā)生約束 (取值同樣是 Left谓厘、Right幌羞、Top、Bottom庞呕、Baseline)新翎。
當XXX和YYY相反時，表示控件自身的XXX在約束控件的YYY的一側(cè)住练，
例如app:layout_constraintLeft_toRightOf="@id/button1" 地啰，表示的是控件自身的左側(cè)在button1的右側(cè)
從這里看來，功能和RL布局差不多讲逛，那為什么還要出這樣的布局呢亏吝？
3.添加一個Banner
我們現(xiàn)在以往在這個feed item頂部添加一個banner，寬度為占據(jù)整個屏幕盏混，寬高比為16：6蔚鸥。
這里尷尬了惜论，在之前的做法，很難在布局中設置寬高比止喷，一般我們都需要在代碼中顯示的去操作馆类，那么如果你用了ConstraintLayout，它就支持弹谁。
<TextView
? ? android:id="@+id/banner"
? ? android:layout_width="0dp"
? ? android:layout_height="0dp"
? ? android:background="#765"
? ? android:gravity="center"
? ? android:text="Banner"
? ? app:layout_constraintDimensionRatio="H,16:6"
? ? app:layout_constraintLeft_toLeftOf="parent"
? ? app:layout_constraintRight_toRightOf="parent" />
我們添加了一個banner乾巧，還記得我們剛才所說的么，不要使用match_parent了预愤，而是設置match_contraint沟于，即0，讓約束來控制布局寬高植康。
所以我們設置了寬旷太、高都是match_contraint，然后這兩個屬性：
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
讓我們的寬度充滿整個父布局销睁，在添加一個：
app:layout_constraintDimensionRatio="16:6"
4.增加幾個Tab
?<TextView
?android:id="@+id/tab1"
? ? android:layout_width="0dp"
? ? android:layout_height="30dp"
? ? android:background="#f67"
? ? android:gravity="center"
? ? android:text="Tab1"
? ? app:layout_constraintBottom_toBottomOf="parent"
? ? app:layout_constraintLeft_toLeftOf="parent"
? ? app:layout_constraintRight_toLeftOf="@+id/tab2" />
<TextView
? ? android:id="@+id/tab2"
? ? android:layout_width="0dp"
? ? android:layout_height="30dp"
? ? android:background="#A67"
? ? android:gravity="center"
? ? android:text="Tab2"
? ? app:layout_constraintBottom_toBottomOf="parent"
? ? app:layout_constraintLeft_toRightOf="@id/tab1"
? ? app:layout_constraintRight_toLeftOf="@+id/tab3" />
<TextView
? ? android:id="@+id/tab3"
? ? android:layout_width="0dp"
? ? android:layout_height="30dp"
? ? android:background="#767"
? ? android:gravity="center"
? ? android:text="Tab3"
? ? app:layout_constraintBottom_toBottomOf="parent"
? ? app:layout_constraintLeft_toRightOf="@id/tab2"
? ? app:layout_constraintRight_toRightOf="parent" />
現(xiàn)在我們可以給每個tab設置一個屬性：
app:layout_constraintHorizontal_weight
看到這個名字供璧，應該就明白了吧，假設我們分別設置值為2榄攀，1嗜傅，1
目前差不多學到了這么多.
