ContraintLayout（約束布局）

（約束布局）ConstraintLayout 類似于 （相對布局）RelativeLayout，但約束布局比相對布局更靈活，性能更出色。

1、添加依賴

需要在app/build.gradle文件中添加ContraintLayout的依賴

implementation ‘com.android.support.constraint:constraint-layout:1.1.3’

2、相對定位

常用屬性

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_constraintStart_toStartOf 控件的開始位置（左）和指定控件的開始位置處于同一垂直線（即左邊對其）

layout_constraintStart_toEndOf 控件的開始位置（左）和指定控件的結束為止（右）處于同一垂直線（即指定控件的右邊）

layout_constraintEnd_toStartOf 控件的結束為止（右）和指定控件的開始位置（左）處于同一垂直線（即指定控件的左邊）

layout_constraintEnd_toEndOf 控件的結束為止（右）和指定控件的結束為止（右）處于同一垂直線（即右邊對其）

舉例：

texy1在左上角，text2在text1的右邊，text3在text1的下邊

<TextView app:layout_constraintStart_toStartOf="parent" //靠左 app:layout_constraintTop_toTopOf="parent" //考上 android:id="@ id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text1" /> <TextView android:id="@id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text2" app:layout_constraintTop_toTopOf="@id/text1" //和text1頂部對齊 app:layout_constraintLeft_toRightOf="@ id/text1" /> //處于text1的右邊 <TextView android:id="@ id/text3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text3" app:layout_constraintStart_toStartOf="@ id/text1" //和text1的左邊對齊 app:layout_constraintTop_toBottomOf="@ id/text1" /> //在text的下邊

特殊屬性layout_constraintBaseline_toBaselineOf

文字底部對齊

如圖，text1和text2的文字不對齊，可以通過該屬性将文字對齊

舉例

<TextView android:textSize="20sp" android:background="@color/grey" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:id="@ id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text1" /> <TextView app:layout_constraintBaseline_toBaselineOf="@id/text1" //text2的文字底部與text1的文字底部對齊 android:textColor="@color/colorPrimaryDark" android:id="@id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text2" app:layout_constraintTop_toTopOf="@id/text1" app:layout_constraintLeft_toRightOf="@ id/text1" />

效果如下：

3、角度定位

角度定位是指 用一個角度和一個距離來約束兩個空間的中心，舉例：

<TextView app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:id="@ id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text1" /> <TextView app:layout_constraintCircle="@id/text1" app:layout_constraintCircleAngle="120" //角度 app:layout_constraintCircleRadius="150dp"//距離 android:id="@id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text2" />

是指 text2的中心在text1的中心的120度，距離150dp的位置

4、邊距

android:layout_marginStart

android:layout_marginEnd

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom

以上屬性必須在控件被約束（确定相對位置）的情況下才能生效，且margin隻能大于等于0.

goneMargin 用于約束的控件可見性被設置為gone的時候使用的margin值，屬性如下：

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

舉例：假設text2約束到text的右邊，并給text2設一個‘layout_goneMarginLeft="10dp’

<TextView android:id="@ id/TextView1" .../> <TextView android:id="@ id/TextView2" ... app:layout_constraintLeft_toRightOf="@ id/TextView1" app:layout_goneMarginLeft="10dp" />

效果如下，TextView2在TextView1的右邊，且沒有邊距

如果把TextView1的可見性設置為gone，效果如下：

TextView1消失後，TextView2有一個距離左右10dp的邊距。

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"

意思是将控件的上下左右約束在布局的上下左右，就相當于放在中央了。由于ConstraintLayout中的局中已經為控件約束了一個相對位置，所以可以使用margin，如下：

<TextView android:id="@ id/TextView1" ... android:layout_marginLeft="100dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />

除了這種偏移外，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" />

水平和垂直偏移是給屬性賦值一個範圍 0-1的值，假如賦值為0，則extView1在最左側，假如賦值為1，則TextView1在布局的最右側。

6、尺寸約束

控件的尺寸可以通過四種不同的方式制指定：

• 使用指定的尺寸
• 使用wrap_content ，讓控件自己計算大小當控件的高度或者寬度為wrap_content 時，可以使用下列屬性來控制最大、最小值：android:minWidth 最小的寬度android:minHeight 最小的高度android:maxWidth 最大的寬度android:maxHeight 最大的高度
• 使用0dp（match_constraint）官方不推薦在ContraintLayout中使用match_parent，可以設置0dp（match_constraint）配合約束代替match_patent
• 寬度比當寬或高至少有一個尺寸被設置為0dp時，可以通過layout_constraintDimensionRadio 設置寬高比除此之外，在設置寬高比的值的時候，還可以在前面加W或H，分别指定寬度或高度限制。例如：layout_constraintDimensionRatio="H,2;3 指的是 高度被約束layout_constraintDimensionRatio="W,2: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" />

三個TextView相互約束，兩端兩個TextView分别與parent約束，稱為一條鍊，效果如下：

一條鍊的第一個控件是這條鍊的鍊頭，我們可以在鍊頭中設置layout_contraintHorizontal_chainStyle 來改變整條鍊的樣式.chains提供了3中樣式，分别是：chains_spread --展開元素(默認）chains_spread_inside–展開元素，但鍊的兩端貼近parentchains_packed–鍊的元素被打包在一起效果如下：

上面的例子創建了樣式鍊，除了樣式鍊外，還可以創建一個權重鍊。上面的鍊的控件寬度都是warp_content，如果我們把寬度都設為0，這個時候可以在每個控件中設置橫向權重layout_constraintHorizontal_weight 來創建一個權重鍊，如下所示：

<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" />

8、輔助工具

1、Guideline

Guideline像輔助線一樣，在預覽的時候幫助你完成布局（不會顯示在界面上）Guideline的主要屬性：android:orientation 垂直vertical,水平horizontallayout_constraintGuide_begin開始位置layout_contraintGuide_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（中間位置），效果如下：

2、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，這時textiew會跑到屏幕的左上角，效果：

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" />

現在有三個并排的控件，用Group控件把TextView1和TextView3歸為一組，再設置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" />

這樣TextView1和TextView3 同時不可見，效果如下：

4、Barrier

假設有三個控件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:barrierDirection為屏障所在的位置，可設置的值有：bottom、end、left、right、start、topapp:contraint_referenced_ids為屏障引用的控件，可設置多個（用“，”隔開）

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部