简介
public class ConstraintLayout extends ViewGroup
当前最新版本 ：
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是一个允许您以灵活的方式定位和调整窗口小部件的大小的ViewGroup。
支持的约束类型
- Relative positioning
- Margins
- Centering positioning
- Circular positioning
- Visibility behavior
- Dimension constraints
- Chains
- Virtual Helpers objects
- Optimizer
开发者指南
Relative Positioning (使用基本同RelativeLayout)
相对布局是ConstraintLayout基本构建模块之一，允许小部件间在水平和垂直方向相对定位
- 水平方向支持属性 ：left right start end
- 垂直方向支持属性 ：top bottom baseLine
常用属性
- 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 代表当前view的左侧，
toLeftOf 代表目标view,
"@id/test" 代表目标view的id。
整体代表当前view的左侧与目标view的左侧对齐
Margins
基本使用方式跟RelativeLayout相同
属性
- android:layout_marginStart
- android:layout_marginEnd
- android:layout_marginLeft
- android:layout_marginTop
- android:layout_marginRight
- android:layout_marginBottom
以 android:layout_marginTop = "20dp" 为例。代表当前view上方距约束目标20dp的距离
除了以上属性，还提供了当约束目标处在gone状态时的一些属性
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
以 layout_goneMarginTop = "20dp" 为例。代表当前view上方约束目标处在gone的状态时，距离上方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左侧和aaa右侧对齐)
app:layout_constraintRight_toLeftOf="@id/bbb" （ccc右侧和bbb左侧对齐）
app:layout_constraintTop_toBottomOf="@id/aaa" (ccc顶部和aaa底部对齐)
/>
如图1所示：上方代码实现了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属性可以控制权重则可达到下图效果
在上方代码加入
app:layout_constraintVertical_bias="0.9"
app:layout_constraintHorizontal_bias="0.2"
Circular positioning (1.1.x版本支持)
该定位方式支持以约束view为圆心，提供半径以及角度来定位当前view
app:layout_constraintCircle 设置约束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" />
Visibility behavior
visibility属性
- visible （view可见）
- gone （view不可见，且不占据布局空间）
- invisible （view不可见，但占据布局空间）
ConstraintLayout提供了相对友好的布局方式(即当目标约束处在gone状态下时的布局调整)
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
具体使用见Margins相关介绍
Dimensions constraints
尺寸约束，支持属性:
- android:minWidth 设置view最小宽度
- android:minHeight 设置view最小高度
- android:maxWidth 设置view最大宽度
- android:maxHeight 设置view最大高度
当view设置为wrap_content时，以上属性方可使用。
Widgets dimension constraints
view的宽（android:layout_width）高（android:layout_height）有以下几种方式设置
- 具体的值(例如：100dp)
- wrap_content
- 0dp
当使用warp_content时，还可以使用以下属性增加约束限制（1.1.x版本支持）:
- app:layout_constrainedWidth=”true|false”
- app:layout_constrainedHeight=”true|false”
当使用0dp时，可以使用以前属性：
- layout_constraintWidth_min 和 layout_constraintHeight_min 设置view最小值
- layout_constraintWidth_max 和 layout_constraintHeight_max 设置view最大值
- layout_constraintWidth_percent 和 layout_constraintHeight_percent 设置view占 parent的百分比值
tip:
min和max可以设置为wrap，此效果和设置wrap_content效果一样
若要使用 layout_constraintWidth_percent 和 layout_constraintHeight_percent 需要满足以下条件：
- 设置0dp
- app:layout_constraintWidth_default="percent" 或 app:layout_constraintHeight_default="percent"
(在版本1.1.0-beta1和1.1.0-beta2必须设置，后续版本不需设置) - 值必须在0-1之间
Ratio
该属性还可设置view宽高比，前提宽和高属性至少有一个为0dp
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:5"
Chains
Creating a chain
[图片上传失败...(image-bb598f-1523169847355)]
上图A和B互为彼此的Chain
Chain heads
Margins in chains
在chains中允许使用margin属性，并会占据空间
Chain Style
通过 layout_constraintHorizontal_chainStyle / layout_constraintVertical_chainStyle 设置
- CHAIN_SPREAD 默认样式
- CHAIN_SPREAD_INSIDE
- CHAIN_PACKED
Weighted chains
可以通过 layout_constraintVertical_weight 或者 layout_constraintHorizontal_weight 设置权重
<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" />
