概述

ConstraintLayout(約束布局)的出現是為了在Android應用布局中保持扁平的層次結構,減少布局的嵌套,為應用創建響應快速而靈敏的界面。ConstraintLayout可以替代其他布局。

導庫

implementation com.android.support.constraint:constraint-layout:1.1.2

ConstraintLayout的用法

Relative position

ConstraintLayout具有RelativeLayout的能力,可以將一個控制項置於相對於另一個控制項的位置。

示例:將B按鈕放在A按鈕的右邊

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

<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" /> <!--B控制項的左邊與A控制項右邊對齊-->

控制項的邊界名

其他相關屬性

  • 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)

<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />

Margins

在ConstraintLayout中,layout_margin及其子屬性的作用都被複寫,margin屬性只對其相約束的View起作用。

示例1:有約束屬性

示例2:沒有約束屬性,margin就會失效

GONE Margins

當被約束的目標對象的可見性為View.GONE,可以使用gone margin來設置,它只會在目標Target為GONE的時候生效。

相關屬性

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

示例1

示例2

Bias

在ConstraintLayout中沒有直接的屬性讓一個控制項水平居中,或者豎直居中,可以使用如下方式:

如果想要將控制項在水平方向偏向左、或者在豎直方向偏向一個方向,就可以配合使用bias屬性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

居中情況下,bias的默認值為0.5,取值範圍是0~1,是以left或top為始起邊界。

示例

Circular positioning(圓形定位)

可以使用角度和距離來約束一個控制項相對於另一個控制項的位置。

相關屬性

  • layout_constraintCircle:參照控制項的id
  • layout_constraintCircleRadius:兩個控制項中心連線的距離
  • layout_constraintCircleAngle:當前View的中心與目標View的中心的連線與Y軸方向的夾角(取值:0~360)

示例

Dimensions constraints

ConstraintLayout中有3中方式來設置子View的寬高尺寸:

  • Xdp,X為具體數值
  • WARP_CONTENT
  • 0dp,0dp代表MATCH_CONSTRAINT,ConstraintLayout不推薦使用~~MATCH_PARENT~~

MATCH_CONSTRAINT

示例1:0dp的使用,可以看到,View的寬度就是父容器的寬度

示例2:B按鈕被拉伸

當控制項的尺寸被設置為MATCH_CONSTRAINT時,默認情況下尺寸會被設置成佔用所有可用空間,可用使用下面幾個屬性進行約束:

  • layout_constraintWidth_min
  • layout_constraintHeight_min
  • layout_constraintWidth_max
  • layout_constraintHeight_max
  • layout_constraintWidth_percent
  • layout_constraintHeight_percent

WRAP_CONTENT : enforcing constraints(強制約束)

如果一個View的尺寸被設置為wrap_content,那麼當View的內容太多時,可能會超出約束規定的範圍,約束布局提供了兩個屬性來限制View的尺寸:

  • layout_constrainedWidth="true|false",默認為false
  • layout_constrainedHeight="true|false",默認為false

示例1:默認情況下,B控制項由於內容較多,高度超出了約束規定的範圍。

示例2:限制高度

Percent dimension

使用百分比步驟

  • 需要將寬或高設置為MATCH_CONSTRAINT(0dp)
  • 設置layout_constraintWidth_percentlayout_constraintHeight_percent,值為0~1

示例

Ratio

ConstrainLayout提供了ratio屬性,用來限制View的寬高比例。

使用Ratio屬性,寬高兩個尺寸中至少要一個是MATCH_CONSTRAINT(0dp) 默認情況下,1:2,表示寬:高,寬為1,高為2 寬高都為MATCH_CONSTRAINT時,可以在比例前加W或者H: W,1:2:表示寬=2,高=1,即H:W = 1:2 H,1:2:表示高=2,寬=1,即W:H = 1:2

示例1:2:1

示例2:H,16:9(寬度佔滿父控制項,約束高度為寬的9/16)

示例2:W,1:5(高度佔滿父控制項,寬度為高度的1/5)

示例3:指定寬度為屏幕一半,並保持比例

Chains

鏈使我們能夠對一組在水平或豎直方向互相關聯的控制項的屬性進行統一管理。

成為鏈條的條件: 一組控制項它們通過一個雙向的約束關係鏈接起來,並且鏈的屬性由一條鏈的頭結點控制。

示例

Chain style

設定鏈條樣式的屬性:

  • layout_constraintHorizontal_chainStyle:水平鏈條的樣式
  • layout_constraintVertical_chainStyle:豎直鏈條的樣式

鏈的樣式:

Weighted chains

權重鏈,寬或高需要設置為MATCH_CONSTRAINT

使用layout_constraintHorizontal_weightlayout_constraintVertical_weight設置對應的權重

示例

constraint其他組件的用法

Guideline

Guideline,是一個輔助控制項,可見性為GONE,主要作用是充當一個錨點。

設置Guidline的方向

  • android:orientation="horizontal":高度0dp,寬度與父容器等寬
  • android:orientation="vertical":寬度0dp,高度與父容器等高

設置Guidline的位置

  • layout_constraintGuide_begin:距離父容器左邊或者頂部的距離
  • layout_constraintGuide_end:距離父容器右邊或者底部的距離
  • layout_constraintGuide_percent:距離父容器左邊或者頂部的距離占父容器的寬或者高的百分比

示例

Barrier

Barrier,譯為屏障,是一個虛擬的輔助控制項,用來防止它引用的View的位置超過自己。

相關屬性

  • barrierDirection="left | top | right | bottom | start | end":設置屏障的方向
  • constraint_referenced_ids="id1,id2,...,idn":設置要限制在屏障內的控制項

示例

Group

Group,用於控制多個控制項的可見性。

Placeholder

Placeholder,佔位符,可以用來放置其他View,用這個可以寫一些布局模板。

示例

模板文件:

tools:parentTag:設為ConstraintLayout,使得編輯器將當前merge標籤當做約束布局來預覽。

content:是要填入這個佔位符的View的id。

引用模板:

參考鏈接

  1. ConstraintLayout
  2. 實戰篇ConstraintLayout的崛起之路
  3. ConstraintLayout 完全解析 快來優化你的布局吧
  4. Android新特性介紹,ConstraintLayout完全解析
  5. 解析ConstraintLayout的性能優勢
  6. ConstraintLayout學習筆記

推薦閱讀:

相关文章