約束布局的用法

ConStraintlayout是android.view.ViewGroup牙寞，允許我們靈活的定位和調(diào)整窗口小部件的大小其屏。

當(dāng)前可以使用多種約束：

Relative positioning(相對(duì)定位)
Margins(相對(duì)定位余量)
Centering positioning(居中定位)
Circular positioning(圓形定位)
Visblity behavior(可見性行為)
Dimension constrains(尺寸限制)
Chains(鏈條)
Virtual Helpers objects(虛擬助手對(duì)象)
Optimizer(優(yōu)化器)

相對(duì)定位

可以在水平和垂直軸上約束小部件亚铁。

水平軸：左棚愤、右骏庸、起點(diǎn)和終點(diǎn)
垂直軸：頂部髓涯、底部和文本基線

下圖是將按鈕B定位在按鈕A的右側(cè)(采用官網(wǎng)圖片)：

相對(duì)定位

<Button 
android:id="@+id/buttonA" 
... />

<Button 
android:id="@+id/buttonB" 
...
app:layout_constraintLeft_toRightOf="@+id/buttonA"/>

這種方式告訴系統(tǒng)我們希望將按鈕B的左側(cè)限制為按鈕A的右側(cè)袒啼，這種位置限制意味著系統(tǒng)將嘗試使兩側(cè)共享同一位置。

image

可用約束列表如下：

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(父容器纬纪，即ConstraintLayout)

Margins

image

如果設(shè)置了邊距蚓再，則會(huì)將他們應(yīng)用于相應(yīng)的約束，從而將邊距強(qiáng)制為目標(biāo)端與源端之間的空間包各≌觯可以使用通常的布局邊距屬性來達(dá)到此效果：

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

連接到GONE小部件時(shí)的邊距

當(dāng)位置限制目標(biāo)的可見性為View.GONE,可以使用下面屬性設(shè)置其他邊距值：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginRight
layout_goneMarginTop
layout_goneMarginBottom

居中定位和偏向

有以下代碼：

<android.support.constraintlayout.widget.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</android.support.constraint.ConstraintLayout>

除非ConStraintLayout碰巧大小和Button完全相同，否則無法同時(shí)滿足兩個(gè)約束问畅。

image

這種情況下娃属，約束的作用就像反向作用力一樣將小部件平均拉開六荒。這樣小部件將最終位于父容器的中心。類似的應(yīng)用于垂直約束膳犹。

偏壓

上面是居中定位恬吕，如果想讓小部件偏到另一側(cè)签则，可以使用bias屬性調(diào)整位置须床。

layout_constrainHorizontal
layout_constrainVertical_bias

image

如下代碼，使左側(cè)具有30%的偏差渐裂，而不是默認(rèn)的50%豺旬，這樣左側(cè)將更短，小部件更偏向左側(cè)柒凉。

<androidx.constraintlayout.widget.ConstraintLayout ...>
 <Button android:id="@+id/button" ...
     app:layout_constraintHorizontal_bias="0.3"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent/>
</>

通過使用偏見族阅，可以更好的適應(yīng)屏幕尺寸變化的用戶界面。

圓形定位

可以以一定角度和距離相對(duì)于另一個(gè)窗口小部件中心限制窗口小部件中心膝捞，這可以使小部件放在圓上坦刀，使用如下屬性：

layout_constraintCircle:引用另一個(gè)小部件
layout_constraintCircleRadius:到另一個(gè)小部件中心的距離
layout_constraintCircleAngle:小部件應(yīng)處于哪個(gè)角度

image

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
  app:layout_constraintCircle="@+id/buttonA"
  app:layout_constraintCircleRadius="100dp"
  app:layout_constraintCircleAngle="45" />

可見性行為

ConstraintLayout中標(biāo)記的小部件處理為View.GONE時(shí)，此部件通常不會(huì)顯示蔬咬，也不是布局本身的一部分鲤遥。但作為布局計(jì)算而言，GONE小部件仍然是其中的一部分林艘，但是有一個(gè)重要的區(qū)別：

對(duì)于布局傳遞盖奈，其尺寸將被視為0(基本上會(huì)被解析為一個(gè)點(diǎn))
如果他們對(duì)其他小部件有約束，則他們?nèi)匀粫?huì)受到尊重狐援，但是任何邊距都等于0钢坦。

image

尺寸限制

最小尺寸

使用wrap_content的時(shí)候，可以使用如下來限制控件大小啥酱。

android:minWidth 設(shè)置布局的最小寬度
android:minHeight 設(shè)置布局的最小高度
android:maxWidth 設(shè)置布局的最大寬度
android:maxHeigth 設(shè)置布局的最大高度

小部件尺寸約束

可以通過3種不同的方式設(shè)置android:layout_widht和android:layout_height屬性來指定小部件的尺寸：

使用特定尺寸
使用wrap_content爹凹，這要求小部件計(jì)算自己的大小
使用0dp,等同于match_constraint

不建議ConstraintLayout布局中包含的小部件用match_partent,可通過match_constraint將相應(yīng)的左/右或上/下約束設(shè)置來實(shí)現(xiàn)類似parent的行為。

match_constraint

將尺寸設(shè)置為match_constraint镶殷，默認(rèn)是占用所有可用空間禾酱，可使用其他幾個(gè)修飾符：

layout_constraintWidth_min和layout_constraintHeight_min：將為此尺寸設(shè)置最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max：將為此尺寸設(shè)置最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent：將此尺寸的尺寸設(shè)置為父尺寸的百分比

尺寸百分比

使用方法：

尺寸應(yīng)設(shè)置為MATCH_CONSTRAINT（0dp）
默認(rèn)值應(yīng)設(shè)置為百分比app:layout_constraintWidth_default="percent" 或app:layout_constraintHeight_default="percent"
然后將layout_constraintWidth_percent or layout_constraintHeight_percent屬性設(shè)置為介于0和1之間的值

寬高比

可以將小部件的一個(gè)尺寸定義為另一個(gè)尺寸的比例，所以至少將一個(gè)約束尺寸設(shè)置為0dp,通過屬性layout_constraintDimensionRation設(shè)置為給定的比率批钠。例如：

<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"/>

將按鈕的高度設(shè)置為與按鈕的寬度相同宇植。
該比率可以表示為：

浮點(diǎn)值，表示寬度和高度之間的比率
形式為“寬度：高度”的比率

如果兩個(gè)尺寸都為match_constraint,系統(tǒng)將設(shè)置滿足所有約束并維持指定長寬比的最大尺寸埋心。

假設(shè)控件A在水平的左右方向都存在約束指郁，垂直方向只有一條約束。相對(duì)于垂直方向拷呆，A在水平方向上的寬度比較固定(等于屏幕寬度)闲坎，所以高度會(huì)根據(jù)比例跟著變化疫粥。

假設(shè)控件A在水平方向以及垂直方向都有存在約束，那就可以通添加w或h來指定約束方向腰懂。

app:layout_constraintDimensionRatio="w,1:2"  //或  "h,1:2"
"w,1:2"表示 寬度根據(jù)高度變化而變化梗逮，且寬高比依舊是1:2
"h,1:2"表示 高度根據(jù)寬度變化而變化，且寬高比依舊是1:2
W/H 是用于指定約束方向

Chain

鏈?zhǔn)奖硎痉绞骄皖愃朴谒椒较蛐辶铩⒋怪狈较蛏闲〔考幢戎胤峙淇臻g慷彤，具體類型可見下圖：

image

通過layout_constraintHorizontal_weight屬性來達(dá)到不同的效果。

layout_constraintVertical_chainStyle = "spread_inside|spread|packed"

實(shí)現(xiàn)spread效果代碼如下：

    <Button
        android:id="@+id/buttonA"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="buttonA"
        app:layout_constraintEnd_toStartOf="@+id/buttonB"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintEnd_toStartOf="@+id/buttonC"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/buttonA"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/buttonC"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

可以用chain工具自動(dòng)生成布局代碼怖喻。剛開始手動(dòng)寫的時(shí)候沒有加bias屬性布局沒有反應(yīng)底哗。

參考文章

官方文檔

constraintlayout學(xué)起來!

constraintlayout使用總結(jié)

constraintlayout使用總結(jié)

約束布局的用法

相對(duì)定位

Margins

圓形定位

可見性行為

尺寸限制

最小尺寸

小部件尺寸約束

match_constraint

尺寸百分比

寬高比

Chain

參考文章