自去年Google I/O 大會發布ConstraintLayout至今,已有一年多的時間,但是並沒有普及開來,瞭解過ConstraintLayout佈局的人知道,它的性能的確提升了不少。在前不久,Google 開發者博客發佈了一篇文章[Understanding the performance benefits of ConstraintLayout](https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html)(中文地址)詳細分析ConstraintLayout性能的優勢,感興趣的朋友可以去看看。
當然自己之前也沒有認識到ConstraintLayout佈局的性能優勢,所以從這篇文章開始由淺入深詳細介紹ConstraintLayout的屬性及使用,也讓自己對ConstraintLayout也有一個更全面的認識,今天的這篇文章主要介紹佈局的一些屬性,學習地址是Google文檔。
配置
在使用ConstraintLayout之前我們需要在我們app下的gradle文件添加ConstraintLayout依賴,截止到目前ConstraintLayout的最新版本是1.0.2.
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
Relative positioning
相對定位的效果和RelativeLayout佈局有異曲同工之處,只不過要比RelativeLayout強大。約束能允許我們指定一個控件相對於另一個控件的位置,通過一些屬性我們可以對組件進行水平或者垂直排列。例如當我們使用含有Left, Right, Start 或者End關鍵詞詞屬性進行定位時即是對組件進行水平方向排列,同理 top, bottom 和 text baseline(文字的基線位置)就是垂直方向排列。具體相對定位的一些屬性組合如下
- 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
對於上面這些屬性的值有兩種,一種就是同層級組件ID,還有就是parent,當值爲parent時即是相對於父佈局進行定位。
<?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/textView1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="textView1" />
<TextView
android:id="@+id/textView2"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="textView2"
app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>
例如上面的佈局,我們使用app:layout_constraintLeft_toRightOf=”@+id/textView1”將textView2的左邊和textView1的右邊對齊,效果圖
那麼當textView2屬性設置爲
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toRightOf="@+id/textView1"
效果圖:
當textView1設置屬性 app:layout_constraintRight_toLeftOf=”parent”
textView2設置 app:layout_constraintLeft_toLeftOf=”parent”時,
效果圖:
Margins
對於margin值我們都不陌生,因爲我們經常使用,有以下幾種
- android:layout_marginStart
- android:layout_marginEnd
- android:layout_marginLeft
- android:layout_marginTop
- android:layout_marginRight
- android:layout_marginBottom
需要注意的是此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/textView1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
android:gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintLeft_toLeftOf="parent"
android:text="textView1" />
</android.support.constraint.ConstraintLayout>
我們只設置了TextView的左邊和父佈局左邊約束,當我們設置了左邊和上邊的margin值都爲10時,發現只有左邊的邊距生效,而上邊的變化沒有發生作用,這也就驗證了邊距只對有約束行爲的地方起作用。
除了我們常用的margin設置屬性外,ConstraintLayout 還提供了一些特有的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/textView1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="textView2"
app:layout_constraintLeft_toRightOf="@+id/textView1" />
</android.support.constraint.ConstraintLayout>
上面textview2在textview1的右邊,那麼當我們由於某種需求將textview1設置了 View.GONE隱藏該控件,那麼此時textview2將跑到位置將顯示在左上角,如果我們在隱藏textview時而保持textview2位置不變。在之前的應用中能稍微比較麻煩一點,但是ConstraintLayout 給我們提供了layout_goneMargin**類的屬性,該屬性是表示約束隱藏時的margin值。例如上面的textView2我們增加app:layout_goneMarginLeft=”100dp”屬性就可以保持當約束textView1隱藏時而保持textview2位置不變。
需要注意的一點是如果某個約束設置了View.GONE,相當於這個組件寬和高爲0,約束佈局中相當於一個點,其他設置的約束依然有效。
Centering positioning and bias
<TextView
android:id="@+id/textView1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
如果約束佈局中我們添加textview並設左邊和父佈局左邊,右邊和父佈局右邊對齊,並設置寬度100dp,那麼此時效果是怎樣的呢。我們發現textview居中顯示了,這就是約束佈局的居中定位。
其實我們可以理解爲父佈局對textview左邊和右邊都有一個拉力,由於默認這個力大小相同就到顯示到中間位置。
在上面由於兩個相反的約束,而使組件居中,在協同佈局中還提供了bias,通過屬性layout_constraintHorizontal_bias或者layout_constraintVertical_bias設置組件偏向水平或者垂直的某一測,,默認情況下該值是0.5(50%).例如我們設置textview屬性
app:layout_constraintHorizontal_bias="0.3"
此時組件偏向左邊
Dimensions constraints
當我們的協調佈局的子組件設置wrap_content時,我們可以通過android:minWidth或者android:minHeight 屬性設置最小寬度或者高度的約束。minWidth/minHeight只有寬度或者高度爲wrap_content纔有作用。
對於android:layout_height /android:layout_width屬性,它的值只有三種情況
- 使用指定的大小或者指定大小的引用,如100dp
- WRAP_CONTENT,此時根據內容自己計算大小
- 0dp,該值相當於MATCH_CONSTRAINT。
需要注意的是在約束佈局中MATCH_PARENT 屬性值不在支持,例如在上面的TextView我們設置layout_width分別是100dp,0dp,0dp(marginLeft :20dp)大致效果如圖a,b,c
Ratio
比例約束可以約束我們控件的寬高比,例如下面示例
<TextView
android:id="@+id/textView1"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="textView1"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
設置寬度爲100dp,高度爲0dp,此時設置了寬高比是2:1,則寬度會自動約束調整爲50dp。
如果我們將上面的寬和高度調換,寬爲0dp,高100dp,此時最終寬度爲200,高度100(寬:高=2:1)
在上面介紹的的寬高比約束是單維度的,那麼如果我們的寬和高都有約束,都設置爲0dp,在這種情況下,系統會使用滿足所有約束條件和比率的最大尺寸。當然我們也可以在比例值前面加 W 或者 H 來分別約束寬度或者高度,如H,2:1。
Chains
鏈是一種特殊的約束它能讓多個該鏈連接的 多個Views 平分剩餘空間位置
如下我們創建一個水平鏈
<?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/A"
android:layout_width="100dp"
android:layout_height="30dp"
android:background="@color/btnnormal"
android:gravity="center"
android:text="A"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/B" />
<TextView
android:id="@+id/B"
android:layout_width="100dp"
android:layout_height="30dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
app:layout_constraintLeft_toRightOf="@+id/A"
app:layout_constraintRight_toLeftOf="@+id/C" />
<TextView
android:id="@+id/C"
android:layout_width="100dp"
android:layout_height="30dp"
android:background="@color/btnnormal"
android:gravity="center"
android:text="C"
app:layout_constraintLeft_toRightOf="@+id/B"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
上面代碼的效果圖如下,A和C相對於父組件的左邊和右邊有一個約束,A和B,B和C之間兩兩相互約束,我們還需要知道的是對我們稱鏈的第一個元素組件爲鏈頭。如下圖A就是該鏈的鏈頭
鏈的模式
對於鏈頭我們可以通過屬性layout_constraintHorizontal_chainStyle(layout_constraintVertical_chainStyle)設置,該屬性有三個值,spread ,spread_inside ,packed
- CHAIN_SPREAD
默認情況下該屬性默認值是spread 。它的間隙將平分剩餘空間,如上圖所示
- CHAIN_SPREAD_INSIDE
spread_inside值會把兩邊最邊緣的兩個 View 靠邊顯示,然後讓剩餘的 Views 在剩餘的空間內平分間隙。當面設置spread_inside時效果圖如下
- CHAIN_PACKED
還有一種值是packed ,它表示將view之間緊挨着顯示,並且全體居中顯示,設置該模式後效果圖如下
除此之外,我們可以通過設置layout_constraintHorizontal_bias屬性來調整整體的位置。默認情況居中,也就是該值爲0.5,例如我們將該值設置0.3,則實現效果如下
- Weighted chain
在官方文檔中還介紹了一種模式是權重模式,在CHAIN_SPREAD 模式中,如果我們設置控件的寬或者高設置MATCH_CONSTRAINT即0dp,它們將按權重平分佔滿父控件的寬或者高,對於權重的設置是屬性和我們線性佈局設置權重達到一樣的效果,例如在上面的三個TextView,我們設置寬度都爲0dp,並設置鏈樣式爲spread(或spread_inside),此時效果 圖如下
如果我們給A和C設置下面屬性
app:layout_constraintHorizontal_weight="1"
給B設置屬性
app:layout_constraintHorizontal_weight="2"
那麼此時A,B,C的寬度爲1:2:1比例佔滿父組件寬度。設置權重時鏈樣式不能設置爲packed (設置後寬度會收縮爲0)
參照線Guideline
Guideline用於輔助我們對View進行定位,以及設置約束,它不會再真正的顯示,只是起到輔助作用,常用屬性如下
- android:orientation
該屬性可以指定輔助線是垂直還是水平線,它有兩個值即vertical,horizontal, - layout_constraintGuide_begin/layout_constraintGuide_end
用來設置對齊父組件的 start 或者end邊緣的距離, - layout_constraintGuide_percent
該值是0.0到1.0之間,用來設置輔助線在父佈局的位置,例如設置0.5,就相當於在父視圖寬度的中間50%。
<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" />
<TextView
android:id="@+id/tvguide"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/red"
android:gravity="center"
android:text="Guide"
app:layout_constraintBottom_toTopOf="@+id/guideline_h"
app:layout_constraintLeft_toLeftOf="@+id/guideline_v" />
在上面我們在約束佈局中創建兩個輔助線,分別是垂直和水平的輔助線,並將textView的下面和水平輔助線的上面對齊,將TextView的左邊和垂直輔助線左邊對齊。這樣我們可以使用輔助線任意控制View的約束位置。
好了今天ConstraintLayout的基礎知識就介紹到這裏了,下一篇文章將介紹ConstraintLayout佈局中Behavior的相關知識,如文中有錯誤歡迎指出。Hava a wonderful day。