簡介

public class ConstraintLayout extends ViewGroup

當(dāng)前最新版本 ：
com.android.support.constraint:constraint-layout:1.1.0-beta6
com.android.support.constraint:constraint-layout:1.0.2

| [java.lang.Object](http://developer.android.google.cn/reference/java/lang/Object.html) |
|    ? | [android.view.View](http://developer.android.google.cn/reference/android/view/View.html) |
|   |    ? | [android.view.ViewGroup](http://developer.android.google.cn/reference/android/view/ViewGroup.html) |
|   |   |    ? | android.support.constraint.ConstraintLayout |

一句話簡介

ConstraintLayout是一個允許您以靈活的方式定位和調(diào)整窗口小部件的大小的ViewGroup。

支持的約束類型

• Relative positioning
• Margins
• Centering positioning
• Circular positioning
• Visibility behavior
• Dimension constraints
• Chains
• Virtual Helpers objects
• Optimizer

開發(fā)者指南

Relative Positioning (使用基本同RelativeLayout)

相對布局是ConstraintLayout基本構(gòu)建模塊之一，允許小部件間在水平和垂直方向相對定位

• 水平方向支持屬性 ：left right start end
• 垂直方向支持屬性 ：top bottom baseLine

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

以 layout_constraintLeft_toLeftOf = "@id/test" 為例膝昆。
constraintLeft 代表當(dāng)前view的左側(cè)，
toLeftOf 代表目標(biāo)view,
"@id/test" 代表目標(biāo)view的id儿普。
整體代表當(dāng)前view的左側(cè)與目標(biāo)view的左側(cè)對齊

Margins

基本使用方式跟RelativeLayout相同

屬性

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

以 android:layout_marginTop = "20dp" 為例。代表當(dāng)前view上方距約束目標(biāo)20dp的距離

除了以上屬性掷倔，還提供了當(dāng)約束目標(biāo)處在gone狀態(tài)時的一些屬性

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

以 layout_goneMarginTop = "20dp" 為例眉孩。代表當(dāng)前view上方約束目標(biāo)處在gone的狀態(tài)時，距離上方20dp的距離勒葱，具體可以自己寫個view體驗一下效果

Centering positioning

在ConstraintLayout里怎么居中呢?

<TextView
        android:id="@+id/ccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/bbb"     (ccc底部和bbb頂部對齊)
        app:layout_constraintLeft_toRightOf="@id/aaa"     (ccc左側(cè)和aaa右側(cè)對齊)
        app:layout_constraintRight_toLeftOf="@id/bbb"    （ccc右側(cè)和bbb左側(cè)對齊）
        app:layout_constraintTop_toBottomOf="@id/aaa"     (ccc頂部和aaa底部對齊)
         />

如圖1所示：上方代碼實現(xiàn)了ccc相對aaa和bbb的居中
[圖片上傳失敗...(image-3d4914-1523169847355)]

bias

    <TextView
        android:id="@+id/ccc"
        android:text="ccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintVertical_bias="0.9"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintBottom_toTopOf="@id/bbb"
        app:layout_constraintLeft_toRightOf="@id/aaa"
        app:layout_constraintRight_toLeftOf="@id/bbb"
        app:layout_constraintTop_toBottomOf="@id/aaa" />

bias屬性可以控制權(quán)重則可達到下圖效果
在上方代碼加入

app:layout_constraintVertical_bias="0.9"
app:layout_constraintHorizontal_bias="0.2"

圖2

Circular positioning (1.1.x版本支持)

該定位方式支持以約束view為圓心勺像，提供半徑以及角度來定位當(dāng)前view
app:layout_constraintCircle 設(shè)置約束view
app:layout_constraintCircleRadius 距離的半徑
app:layout_constraintCircleAngle 偏差角度

<TextView
        android:id="@+id/ddd"
        android:text="ddd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@id/ccc"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp" />

圖3

圖4

圖5

Visibility behavior

visibility屬性

• visible （view可見）
• gone （view不可見障贸，且不占據(jù)布局空間）
• invisible （view不可見，但占據(jù)布局空間）

ConstraintLayout提供了相對友好的布局方式(即當(dāng)目標(biāo)約束處在gone狀態(tài)下時的布局調(diào)整)

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

具體使用見Margins相關(guān)介紹

Dimensions constraints

尺寸約束吟宦，支持屬性:

• android:minWidth 設(shè)置view最小寬度
• android:minHeight 設(shè)置view最小高度
• android:maxWidth 設(shè)置view最大寬度
• android:maxHeight 設(shè)置view最大高度

當(dāng)view設(shè)置為wrap_content時，以上屬性方可使用涩维。

Widgets dimension constraints

view的寬（android:layout_width）高（android:layout_height）有以下幾種方式設(shè)置

• 具體的值(例如：100dp)
• wrap_content
• 0dp

當(dāng)使用warp_content時殃姓，還可以使用以下屬性增加約束限制（1.1.x版本支持）:

• app:layout_constrainedWidth=”true|false”
• app:layout_constrainedHeight=”true|false”

當(dāng)使用0dp時，可以使用以前屬性：

• layout_constraintWidth_min 和 layout_constraintHeight_min 設(shè)置view最小值
• layout_constraintWidth_max 和 layout_constraintHeight_max 設(shè)置view最大值
• layout_constraintWidth_percent 和 layout_constraintHeight_percent 設(shè)置view占 parent的百分比值

tip:
min和max可以設(shè)置為wrap瓦阐，此效果和設(shè)置wrap_content效果一樣
若要使用 layout_constraintWidth_percent 和 layout_constraintHeight_percent 需要滿足以下條件：

• 設(shè)置0dp
• app:layout_constraintWidth_default="percent" 或 app:layout_constraintHeight_default="percent"
  (在版本1.1.0-beta1和1.1.0-beta2必須設(shè)置蜗侈，后續(xù)版本不需設(shè)置)
• 值必須在0-1之間

Ratio

該屬性還可設(shè)置view寬高比，前提寬和高屬性至少有一個為0dp

android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:5"

圖6

Chains

Creating a chain

[圖片上傳失敗...(image-bb598f-1523169847355)]

上圖A和B互為彼此的Chain

Chain heads

圖8

Margins in chains

在chains中允許使用margin屬性睡蟋，并會占據(jù)空間

Chain Style

圖9

通過 layout_constraintHorizontal_chainStyle / layout_constraintVertical_chainStyle 設(shè)置

• CHAIN_SPREAD 默認樣式
• CHAIN_SPREAD_INSIDE
• CHAIN_PACKED

Weighted chains

可以通過 layout_constraintVertical_weight 或者 layout_constraintHorizontal_weight 設(shè)置權(quán)重

圖10

 <TextView
        android:id="@+id/aaa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        android:background="@color/colorAccent"
        app:layout_constraintHorizontal_weight="4"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintEnd_toStartOf="@id/bbb"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/bbb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintEnd_toStartOf="@id/ccc"
        app:layout_constraintStart_toEndOf="@id/aaa" />

    <TextView
        android:id="@+id/ccc"
        android:layout_width="0dp"
        android:background="@color/colorAccent"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="5"
        android:text="aaa"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/bbb" />

Margins and chains（1.1.x版本支持）