約束佈局ConstraintLayout看這一篇就夠了
目錄
- 1.介紹
- 2.為什麼要用ConstraintLayout
- 3.如何使用ConstraintLayout
3.1 新增依賴
3.2 相對定位
3.3 角度定位
3.4 邊距
3.5 居中和偏移
3.6 尺寸約束
3.7 鏈 - 4.輔助工具
4.1 Optimizer
4.2 Barrier
4.3 Group
4.4 Placeholder
4.5.Guideline - 5.總結
1.介紹
約束佈局ConstraintLayout是一個ViewGroup，可以在Api9以上的Android系統使用它，它的出現主要是為了解決佈局巢狀過多的問題，以靈活的方式定位和調整小部件。從 Android Studio 2.3 起，官方的模板預設使用 ConstraintLayout 。
ofollow,noindex">ConstraintLayout 官方文件
2.為什麼要用ConstraintLayout
在開發過程中經常能遇到一些複雜的UI，可能會出現佈局巢狀過多的問題，巢狀得越多，裝置繪製檢視所需的時間和計算功耗也就越多。簡單舉個例子：
假設現在要寫一個這樣的佈局，可能有人會這麼寫：
首先是一個垂直的LinearLayout，裡面放兩個水平的LinearLayout，然後在水平的LinearLayout裡面放TextView。這樣的寫法就嵌套了兩層LinearLayout。
有些人考慮到了巢狀佈局帶來的風險，所以用一個RelativeLayout來裝下所有的控制元件。那麼問題來了，既然用RelativeLayout可以解決問題，為什麼還要使用ConstraintLayout呢？因為ConstraintLayout使用起來比RelativeLayout更靈活，效能更出色！還有一點就是ConstraintLayout可以按照比例約束控制元件位置和尺寸，能夠更好地適配螢幕大小不同的機型。
3.如何使用ConstraintLayout
3.1 新增依賴
首先我們需要在app/build.gradle檔案中新增ConstraintLayout的依賴，如下所示。
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
3.2 相對定位
相對定位是部件對於另一個位置的約束，這麼說可能有點抽象，舉個例子：
如圖所示，TextView2在TextView1的右邊，TextView3在TextView1的下面，這個時候在佈局檔案裡面應該這樣寫：
<TextView android:id="@+id/TextView1" ... android:text="TextView1" /> <TextView android:id="@+id/TextView2" ... app:layout_constraintLeft_toRightOf="@+id/TextView1" /> <TextView android:id="@+id/TextView3" ... app:layout_constraintTop_toBottomOf="@+id/TextView1" />
上面程式碼中在TextView2裡用到了app:layout_constraintLeft_toRightOf="@+id/TextView1"這個屬性，他的意思是把TextView2的左邊約束到TextView1的右邊，如下圖所示：
同理TextView3在TextView1的下面，就需要用到app:layout_constraintTop_toBottomOf="@+id/TextView1"，即把TextView3的上面約束到TextView1的下面。
下面來看看相對定位的常用屬性：
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
上面屬性中有一個比較有趣的layout_constraintBaseline_toBaselineOf
Baseline指的是文字基線，舉個例子：
如圖所示，兩個TextView的高度不一致，但是又希望他們文字對齊，這個時候就可以使用layout_constraintBaseline_toBaselineOf，程式碼如下：
<TextView android:id="@+id/TextView1" .../> <TextView android:id="@+id/TextView2" ... app:layout_constraintLeft_toRightOf="@+id/TextView1" app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>
效果如下：
ConstraintLayout相對定位的用法跟RelativeLayout還是比較相似的，下面用一個圖來總結相對定位：
3.3 角度定位
角度定位指的是可以用一個角度和一個距離來約束兩個空間的中心。舉個例子：
<TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/TextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintCircle="@+id/TextView1" app:layout_constraintCircleAngle="120" app:layout_constraintCircleRadius="150dp" />
上面例子中的TextView2用到了3個屬性：
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距離）
指的是TextView2的中心在TextView1的中心的120度，距離為150dp，效果如下：
3.4 邊距
- 3.4.1 常用margin
ConstraintLayout的邊距常用屬性如下：
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
看起來跟別的佈局沒有什麼差別，但實際上控制元件在ConstraintLayout裡面要實現margin，必須先約束該控制元件在ConstraintLayout裡的位置，舉個例子：
<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" /> </android.support.constraint.ConstraintLayout>
如果在別的佈局裡，TextView1的位置應該是距離邊框的左邊和上面有一個10dp的邊距，但是在ConstraintLayout裡，是不生效的，因為沒有約束TextView1在佈局裡的位置。正確的寫法如下：
<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>
把TextView1的左邊和上邊約束到parent的左邊和上邊，這樣margin就會生效，效果如下：
在使用margin的時候要注意兩點：
控制元件必須在佈局里約束一個相對位置
margin只能大於等於0
- 3.4.2 goneMargin
goneMargin主要用於約束的控制元件可見性被設定為gone的時候使用的margin值，屬性如下：
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
舉個例子：
假設TextView2的左邊約束在TextView1的右邊，並給TextView2設一個app:layout_goneMarginLeft="10dp"，程式碼如下：
<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/TextView1" .../> <TextView android:id="@+id/TextView2" ... app:layout_constraintLeft_toRightOf="@+id/TextView1" app:layout_goneMarginLeft="10dp" /> </android.support.constraint.ConstraintLayout>
效果如下，TextView2在TextView1的右邊，且沒有邊距。
這個時候把TextView1的可見性設為gone，效果如下：
TextView1消失後，TextView2有一個距離左邊10dp的邊距。
3.5 居中和偏移
在RelativeLayout中，把控制元件放在佈局中間的方法是把layout_centerInParent設為true，而在ConstraintLayout中的寫法是：
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
意思是把控制元件的上下左右約束在佈局的上下左右，這樣就能把控制元件放在佈局的中間了。同理RelativeLayout中的水平居中layout_centerHorizontal相當於在ConstraintLayout約束控制元件的左右為parent的左右；RelativeLayout中的垂直居中layout_centerVertical相當於在ConstraintLayout約束控制元件的上下為parent的上下。
由於ConstraintLayout中的居中已經為控制元件約束了一個相對位置，所以可以使用margin，如下所示：
<TextView android:id="@+id/TextView1" ... android:layout_marginLeft="100dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
效果如下：
上面TextView1在水平居中後使用layout_marginLeft="100dp"向右偏移了100dp。除了這種偏移外，ConstraintLayout還提供了另外一種偏移的屬性：
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移
舉個例子：
<TextView android:id="@+id/TextView1" ... app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
效果如下：
假如現在要實現水平偏移，給TextView1的layout_constraintHorizontal_bias賦一個範圍為 0-1 的值，假如賦值為0，則TextView1在佈局的最左側，假如賦值為1，則TextView1在佈局的最右側，假如假如賦值為0.5，則水平居中，假如假如賦值為0.3，則更傾向於左側。
垂直偏移同理。
3.6 尺寸約束
控制元件的尺寸可以通過四種不同方式指定：
-
使用指定的尺寸
-
使用wrap_content，讓控制元件自己計算大小
當控制元件的高度或寬度為wrap_content時，可以使用下列屬性來控制最大、最小的高度或寬度：
android:minWidth 最小的寬度
android:minHeight 最小的高度
android:maxWidth 最大的寬度
android:maxHeight 最大的高度
注意！當ConstraintLayout為1.1版本以下時，使用這些屬性需要加上強制約束，如下所示：
app:constrainedWidth=”true”
app:constrainedHeight=”true”
-
使用 0dp (MATCH_CONSTRAINT)
官方不推薦在ConstraintLayout中使用match_parent，可以設定 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent，舉個例子：
<TextView android:id="@+id/TextView1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="50dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" android:visibility="visible" />
寬度設為0dp，左右兩邊約束parent的左右兩邊，並設定左邊邊距為50dp，效果如下：
-
寬高比
當寬或高至少有一個尺寸被設定為0dp時，可以通過屬性layout_constraintDimensionRatio設定寬高比，舉個例子：
<TextView android:id="@+id/TextView1" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintDimensionRatio="1:1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
寬設定為0dp，寬高比設定為1:1，這個時候TextView1是一個正方形，效果如下：
除此之外，在設定寬高比的值的時候，還可以在前面加W或H，分別指定寬度或高度限制。 例如：
app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3
3.7 鏈
如果兩個或以上控制元件通過下圖的方式約束在一起，就可以認為是他們是一條鏈（圖為橫向的鏈，縱向同理）。
用程式碼表示：
<TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/TextView2" /> <TextView android:id="@+id/TextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/TextView1" app:layout_constraintRight_toLeftOf="@+id/TextView3" app:layout_constraintRight_toRightOf="parent" /> <TextView android:id="@+id/TextView3" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/TextView2" app:layout_constraintRight_toRightOf="parent" />
3個TextView相互約束，兩端兩個TextView分別與parent約束，成為一條鏈，效果如下：
一條鏈的第一個控制元件是這條鏈的鏈頭，我們可以在鏈頭中設定 layout_constraintHorizontal_chainStyle來改變整條鏈的樣式。chains提供了3種樣式，分別是：
CHAIN_SPREAD —— 展開元素 (預設)；
CHAIN_SPREAD_INSIDE —— 展開元素，但鏈的兩端貼近parent；
CHAIN_PACKED —— 鏈的元素將被打包在一起。
如圖所示：
上面的例子建立了一個樣式鏈，除了樣式鏈外，還可以建立一個權重鏈。
可以留意到上面所用到的3個TextView寬度都為wrap_content，如果我們把寬度都設為0dp，這個時候可以在每個TextView中設定橫向權重layout_constraintHorizontal_weight(constraintVertical為縱向)來建立一個權重鏈，如下所示：
<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" />
效果如下：
4.輔助工具
4.1 Optimizer
當我們使用 MATCH_CONSTRAINT 時，ConstraintLayout 將對控制元件進行 2 次測量，ConstraintLayout在1.1中可以通過設定 layout_optimizationLevel 進行優化，可設定的值有：
none：無優化
standard：僅優化直接約束和屏障約束（預設）
direct：優化直接約束
barrier：優化屏障約束
chain：優化鏈約束
dimensions：優化尺寸測量
4.2 Barrier
假設有3個控制元件ABC，C在AB的右邊，但是AB的寬是不固定的，這個時候C無論約束在A的右邊或者B的右邊都不對。當出現這種情況可以用Barrier來解決。Barrier可以在多個控制元件的一側建立一個屏障，如下所示：
這個時候C只要約束在Barrier的右邊就可以了，程式碼如下：
<TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/TextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@+id/TextView1" /> <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" /> <TextView android:id="@+id/TextView3" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/barrier" />
app:barrierDirection為屏障所在的位置，可設定的值有：bottom、end、left、right、start、top
app:constraint_referenced_ids為屏障引用的控制元件，可設定多個(用“,”隔開)
4.3 Group
Group可以把多個控制元件歸為一組，方便隱藏或顯示一組控制元件，舉個例子：
<TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/TextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/TextView1" /> <TextView android:id="@+id/TextView3" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@id/TextView2" />
現在有3個並排的TextView，用Group把TextView1和TextView3歸為一組，再設定這組控制元件的可見性，如下所示：
<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" />
效果如下：
4.4 Placeholder
Placeholder指的是佔位符。在Placeholder中可使用setContent()設定另一個控制元件的id，使這個控制元件移動到佔位符的位置。舉個例子：
<android.support.constraint.Placeholder android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="wrap_content" app:content="@+id/textview" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#cccccc" android:padding="16dp" android:text="TextView" android:textColor="#000000" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
新建一個Placeholder約束在螢幕的左上角，新建一個TextView約束在螢幕的右上角，在Placeholder中設定 app:content="@+id/textview"，這時TextView會跑到螢幕的左上角。效果如下：
4.5 Guideline
Guildline像輔助線一樣，在預覽的時候幫助你完成佈局（不會顯示在介面上）。
Guildline的主要屬性：
android:orientation 水平vertical，垂直horizontal
layout_constraintGuide_begin 開始位置
layout_constraintGuide_end 結束位置
layout_constraintGuide_percent 距離頂部的百分比(orientation = horizontal時則為距離左邊)
舉個例子：
<android.support.constraint.Guideline android:id="@+id/guideline1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="50dp" /> <android.support.constraint.Guideline android:id="@+id/guideline2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" />
guideline1為水平輔助線，開始位置是距離頂部50dp，guideline2位垂直輔助線，開始位置為螢幕寬的0.5(中點位置)，效果如下：
5.總結
本篇文章主要介紹了ConstraintLayout和它在佈局檔案裡的用法，和一些輔助ConstraintLayout佈局的工具，跟著敲一遍就能學會ConstraintLayout。除此之外，ConstraintLayout還有一個獨立的編輯器，只需要托拉拽就可以完成整個佈局，但我個人比較喜歡直接用程式碼寫，就不介紹了，有興趣的可以參考 https://blog.csdn.net/guolin_blog/article/details/53122387
微信掃描下方二維碼關注微信公眾號" AndroidCzh "一起學習 ConstraintLayout 吧！這裡將長期為您分享原創文章、Android開發經驗等！
另外還有Android開發QQ交流群： 705929135