1.构建

Android Studio 2.3+
Module build.gradle 引入

dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
}

2.相对定位

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"/>

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        app:layout_constraintLeft_toRightOf="@id/b1"/>

</android.support.constraint.ConstraintLayout>

值	含义
layout_constraintLeft_toLeftOf	按钮1左边与按钮2左边对齐
layout_constraintLeft_toRightOf	1左与2右对齐
layout_constraintRight_toLeftOf	1右与2左对齐
layout_constraintRight_toRightOf	1右与2右对齐
layout_constraintTop_toTopOf	1顶与2顶对齐
layout_constraintTop_toBottomOf	1顶与2底对齐
layout_constraintBottom_toTopOf	1底与2顶对齐
layout_constraintBottom_toBottomOf	1底与2底对齐
layout_constraintBaseline_toBaselineOf	1基线对齐2基线
layout_constraintStart_toEndOf	1起始与2结束对齐
layout_constraintStart_toStartOf	1起始与2起始对齐
layout_constraintEnd_toStartOf	1结束与2起始对齐
layout_constraintEnd_toEndOf	1结束与2结束对齐

layout_constraintXXX 里的 XXX 代表是这个子控件自身的哪条边( Left、Right、Top、Bottom、Baseline)，
而 toYYYOf 里的 YYY 代表的是和约束控件的哪条边 发生约束(Left、Right、Top、Bottom、Baseline)

对齐与 ID ( @id/button1 被参照控件) 或 parent (父布局)

android_constraintlayout_2.png

3.外边距约束

与其他布局外边距属性用法相同
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

！设置外边距时，控件外边距方向必须有app:layout_constraintXxx_约束

被参考控件GONE时边距才生效
CStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

区别:

被参考控件visible	被参考控件gone
layout_margin生效	layout_margin失效
layout_goneMargin失效	layout_goneMargin生效

4.居中定位

居中方向	固定代码
水平	app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
垂直	app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
完全	水平+垂直

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>

捕获.PNG

这是因为这两个约束作用类似于水平方向上，有相反的力 去拉控件，最终控件会居中显示

android_constraintlayout_9.png

5.偏向

倾向 ( Bias ) 提供了两个属性用于设置偏向到的程度,类似LinnerLayout layout_weight

属性	说明
layout_constraintHorizontal_bias	水平(0最左边 1 最右边，默认是 0.5)
layout_constraintVertical_bias	垂直(0最上边 1 最底边，默认是 0.5)

6.尺寸约束

①最大最小宽高约束

它会在 控件为 wrap_conent 时起作用

属性	说明
android:minWidth	设置布局的最小宽度
android:minHeight	设置布局的最小高度
android:maxWidth	设置布局的最大宽度
android:maxHeight	设置布局的最大高度

② 其他尺寸约束

属性	说明
android:layout_width="200dp"	确定尺寸
android:layout_width="wrap_content"	自适应
android:layout_width="0dp"	等价于MATCH_PARENT

！为什么不用 MATCH_PARENT 了？
因为，MATCH_PARENT 在 ConstraintLayout 不再被推荐了

7.比例 ( Ratio )

属性	说明
app:layout_constraintDimensionRatio	约束比例，用逗号分隔方向 (,) ，用冒号(:)分隔比例

①只有一个方向约束

1.必须有至少一个相对定位(id/parent) layout_constraintXxx_toXxxOf
2.需要将至少一个约束维度设置为 0dp
3.app:layout_constraintDimensionRatio="2:1" (宽:高=2:1)

示例
width 0dp为变量，height 400dp为固定值，根据高度去改变宽度
宽:高=1:2
最终显示: 宽200dp(占比1)，高400dp(占比2)

<Button
        android:layout_width="0dp"
        android:layout_height="400dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:2"

捕获.PNG

②指定要改变的维度

如果两个维度均设置为 0dp ，也可以使用比例
属性 layout_constraintDimensionRatio="H,2:1"
则表示动态改变高度 高度调整为屏幕宽度的二分之一 比例始终都是 宽：高

8.链条 ( Chains )

链条在同一个方向上( 水平或者垂直 ) 提供一个类似群组的统一表现，另一个轴可以单独控制

遇坑总结:

1. 链条头、尾必须指定左右(上下)约束( 头:constraintLeft_toLeftOf="parent" ，尾:constraintRight_toRightOf="parent")
2. 所有控件在链条约束中 Left和Start、Right和End不能混用，每个控件左统一用 Left或Start，右统一用 Right或End

①创建链条 ( Creating a chain )

如果一组 UI 控件通过双向连接 (A:constraintRight_toLeftOf="@+id/buttonB"，B:constraintLeft_toRightOf="@+id/buttonA")，则将其视为链条

android_constraintlayout_21.png

②链条头 ( Chain heads )

链条由在链的第一个元素 ( 链的 头) 上设置的属性控制
1.水平链最左边的 View 是头
2.垂直链最顶端的 View 是头

③链条样式 ( Chain Style )

当在链条头设置属性
layout_constraintHorizontal_chainStyle 或
layout_constraintVertical_chainStyle 时，
链的行为将根据指定的样式 ( 默认为 CHAIN_SPREAD) 而更改

值	说明
spread	素之间的空间将会均匀分布，这是系统默认的排列方式
packed	首尾两条链将会分配空间，链内部将不会分配空间
spread_inside	首尾的两条链将不会分配空间，其余内部的链将均匀分配空间

④加权链( Weighted chains )

和 LinearLayout 的 weight 类似，链的默认行为是在可用空间中平均分配元素。
如果一个或多个元素使用 0dp
属性:
layout_constraintHorizontal_weight 、
layout_constraintVertical_weight
将决定这些都设置了 0dp的 View 如何分配空间

9.Guideline (辅助布局)

①布局方向

不会被显示，仅仅用于辅助布局 所以，Guideline 只有一个作用，那就是 锚点
它可以是 horizontal 或者 vertical 的，例如 android:orientation="vertical"

• vertical 的 Guideline 宽度为零，高度为 ConstraintLayout 的高度
• horizontal 的 Guideline 高度为零，宽度为 ConstraintLayout 的高度

②手机三种定位方式

定位	说明
layout_constraintGuide_begin="10dp"	指定距离左侧或顶部的固定距离
layout_constraintGuide_end="20dp"	指定距离右侧或底部的固定距离
layout_constraintGuide_percent="0.5"	指定在父控件中的宽度或高度的百分比(0左,1右,0.5中间)

10.环形定位 (Circular positioning)

捕获.PNG

属性	说明
layout_constraintCircle	引用另一个圆心 ID
layout_constraintCircleRadius	到其它小部件中心的距离
layout_constraintCircleAngle	小部件应处于的角度 ( 度数，从 0 到 360 ）