ConstraintLayout 使用初探

首先扯点别的:现在上海已经是30度以下了，暑意尽去，秋意正浓。岁月如梭，趁年轻，还是要努力啊。但是也要有自己的生活，多看书，多运动，少喝酒。

ConstraintLayout（约束布局） 的优点:
1. 在创建复杂的布局页面的同时，依然能够保证扁平化的View层级（没有ViewGroup的嵌套）.
2. ConstraintLayout 类似于RelativeLayout,根据兄弟节点View之间的关系，View和父布局之间的关系来放置View.
3. 使用Android Studio的布局编辑器可以很方便的使用ConstraintLayout .

下面就开始使用
首先在你的module的build文件中添加依赖

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

新建一个布局文件根节点选择ConstraintLayout，然后就可以愉快的使用了

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

当把一个控件拖到ConstraintLayout中的时候，控件的四周会显示一个线框，线框四个角上的小圆点（称作 resizing handle），可以用来拖动改变控件的宽高，线框的四条边的中间会显示四个小圆点（称作 constraint handle），用来为控件添加约束。点击控件，点击并拖拽一个constraint handle拖到一个可用的锚点（可以是另外一个view的一条边，或者父布局的边，或者是一个guideline）然后释放鼠标，约束就添加好了。

添加约束注意一下规则：

1. 每个View至少添加两个约束，一个水平方向上的，一个竖直方向上的。
2. 为一个View添加约束的时候，约束指向的锚点必须是在同一个平面上的。所以为一个View的竖直方向上的平面（左边和右边）添加约束的时候，约束只能指向另一个竖直平面（就是另外一个view的左边或者右边，也可以是父布局的左边和右边），而且一个baselines （基线）只能约束到另外一个baselines （基线）。
3. 一个View上的constraint handle只能被一个约束使用，但是你可以创建多个约束（来自不同的view）到同一个锚点。

解释一下第2条规则，上图

当为B的左边添加约束的时候（锚点对象选为A），B的左边的约束只能添加到A的右边或者A的左边，但是不能添加到A的上边和下边。

当我们点击一个View的时候会在View的下方出现这么个东西（ab下面有一个下划线）

这个 就是对齐基线的意思，作用是让一个View的文字基线和另外一个View的文字基线对齐。

当我们点击的时候就可以为View添加基线约束，这个基线约束只能指向另外一个View的基线。

第2条规则解释完毕

解释一下第3条规则，上图

一个constraint handle 只能引出一条线（一个约束），但是一个constraint handle可以被多条线（多个约束）指向。

第3条规则解释完毕。

如何删除约束，看图

点击一个constraint handle 可以删除一条约束，点击View下方的红色差号，可以删除View上的所有约束。

如果为一个View添加了相反方向上的约束，两条相反方向上的约束线会变成波浪形，来表明相反方向上的作用力。当把一个View的size设置为固定大小（100dp）或者wrap_content的时候这种作用最明显，在这种情况下，View位于两条约束的中间。如果你想拉伸View的size可以把View的size设置成match constraints（就是0dp）。如果你不想View位于两条约束的中间，可以调整约束的偏差。如下图所示。

你可以利用约束实现不同类型的布局方式，如下章节所述。

父级位置（Parent position）

约束一个View的一条边到对应的父级布局的对应的边。在下图中，约束View的左边到父布局的左边，可以使用margin来控制到父布局左边的间距。

顺序位置（Order position）

定义两个View的在布局中顺序，可以是竖直方向或者水平方向。在下图中，B被约束在A的右边，C被约束在A的下边。但是这些约束并不是意味着对齐，所以B还是可以上下移动的。

对齐（Alignment）

把一个View的一条边（比如左边）和另外一个View的左边对齐。在图6中B的左边和A的左边对齐。

图6

如果想让B和A的中间对齐，需要为B添加左右两个约束。

你可以向内拖动B来改变对齐的偏移量 .例如，图7显示B的左边对齐A的左边并向右偏移24dp。偏移量可以使用被约束的View（这里就是B）的margin属性来指定（这里就是指定 android:layout_marginLeft=”24dp”）。

图7

你也可以选择你想对齐的View，然后点击工具栏上的对齐图标来选择对齐方式。

看下面一个例子

在这个例子中，A左边的约束是父布局的左边，上边的约束是父布局的上面，右边的约束是C的左边，下边的约束是B的上边。点击对齐图标后弹出的界面

• 1处表示View在左右两个约束中间居中对齐。
• 2处表示View在上下两个约束之间居中对齐。
• 3处表示View在父布局水平方向居中对齐。

• 4处表示View在父布局竖直方向居中对齐。

  基线对齐（Baseline alignment）

  让一个View的文字基线和另外一个文字的基线对齐。在图8中B的基线和A的基线对齐。
  为了创建一个基线约束，点击你想约束的View，然后会在View的下方出现一个基线按钮，然后点击基线并拖到另一个View的的基线上即可。

图8

到一个参考的约束（Constrain to a guideline）

你可以添加一个水平方向或者竖直方向上的参考（就是一条水平线或者竖线）用来约束View。这个参考对用户不可见。你可以在ConstraintLayout中放置一个guideline，guideline相对于ConstraintLayout 某一条边的偏移量可以使用dp为单位或者使用百分比。

点击工具栏上的 可以创建一个guideline，可以选择水平方向上的guideline或者竖直方向上的guideline。

我们可以拖动这条虚线来改变guideline的位置，并可以点击顶部的小圆点来改变测量模式。

调整约束的偏差（Adjust the constraint bias）

当你为一个View的两个对应的边添加了约束（并且View的size是wrap_content或者固定的值30dp），View默认是在两条约束的中间，你可以拖动属性窗口中的偏差滑动条或者直接拖动View来调整偏差。

调整Veiw的大小（Adjust the view size）

你可以使用corner handles（View边框四个角上的小正方形）来调整View的大小，但是这样会把View的size写死，当View的内容不同，或者在不同的屏幕上显示的时候，不会自动调整大小。我们可以打开编辑器右侧属性窗口来选择不同的尺寸模式。

在属性窗口的上方可以看到View的几个布局属性。

图10

代表wrap_content;

代表Match Constraints：即宽高设为0dp。看图说话：

当我们为B添加了左右两个约束，当我们改变B的尺寸模式为Match Constraints的时候，B会自动扩展，来满足约束条件（默认左右各margin 8dp）。

当只为B添加了左边的约束，没有添加右边的约束，当B的内容改变的时候，B会自动伸缩来显示出所有的内容。

固定尺寸。

可以通过点击这几个符号来切换View的测量模式，或者直接更改View的layout_width或者layout_height。

注意：在ConstraintLayout中不应该再使用match_parent属性，而应该使用match_constraints(0dp)

设置尺寸比例（Set size as a ratio）

当一个View宽和高只要有一个设置成了match_constraints(0dp)，你就可以设置View的宽高的比例了。可以点击Toggle Aspect Ratio Constraint（就是上图10中的数字1）来开启比例模式。然后在出现的ratio框中输入width:height的比值。

在上图中，Button的宽度设置成了0dp，点击Toggle Aspect Ratio Constraint，我们发现View左边和右边连成了一条实线。设置width:height为4:1。那么现在整个View的高度由View的高度决定。无论高度选择多少，宽度都将是高度的4倍。

在上图中，B的高度设置成了0dp，点击Toggle Aspect Ratio Constraint，我们发现View上下两边连成了一条实线。设置width:height为1:3。那么现在整个View的高度由View的宽度决定。无论宽度选择多少，高度都将是宽度的3倍。

如果宽和高都设置成了match_constraints(0dp)，这时候应该给View四条边都设置约束，不然View看不见了。你可以点击Toggle Aspect Ratio Constraint 来切换那条边来决定View的大小。

上图展示了宽高都设置为0dp的时候，使用width决定View的最终大小。width:height=5:1。

上图展示了宽高都设置为0dp的时候，使用height决定View的最终大小。width:height=1:4。

调整View的间距（Adjust the view margins）

点击工具栏上的margin按钮，可以改变间距的大小（默认是8dp）。改变了margin的大小只会对从现在开始添加的View有效，对已经添加的View无效。margin的大小最好是8的倍数。

使用链来控制一个线性组（Control linear groups with a chain）

链是一组双向约束的View组，两个View相互之间都有一个约束，因此构成了一个水平方向上的链。下图所示。

一个链允许你在竖直或者水平方向上分散放置一组View。链有一下几种模式。

1.Spread：均匀分布，默认行为。
2.Spread inside:第一个和最后一个View固定在链的两端，其余的View均匀分布。
3. Weighted: 当链的模式是Spread或者Spread inside的时候，你可以通过设置一个或者多个View的尺寸为match constraints(0dp)来充满剩余的空间。如果每个View的尺寸都设置为match constraints(0dp)，默认情况下，View会平分整个空间。但是你可以使用layout_constraintHorizontal_weight 和layout_constraintVertical_weight 属性来改变每个View的比重，类似于LinearLayout的layout_weight属性。比重最高的View占据最大的空间。
4. Packed: 所有的View聚集到一起。你可以通过调节链中的head View的偏差来调整这个链的偏差。

链的head View（竖直方向上最上边的View，水平方向上最左边的View）在XML文件中定义了链的模式。但是你可以点击链中的任意一个View，然后点击View下方出现的图标来切换链的模式。

如果想创建一个链，可以选中所需的View（可以按住Shift键，然后鼠标一个个选择），然后点击任意一个View，然后选择Center Horizontally 或者Center Vertically就可以创建一个水平方向或竖直方向的链。如下图所示。

上图是一个水平方向上的链（但是发现一个问题创建完链后，点击空白处，整个链会向下平移一段距离，不知道为什么），并让它们上边对齐。创建竖直方向上的链也类似。

使用链的时候，以下几点需要注意。
1. 一个View既可以是一个水平链中的一部分，同时又可以是一个竖直链的一部分。可运用这个特点来构建一个零活的网格布局。
2. 一个链只有链头和链尾都添加了约束才可以正常工作。
3.一个链可以是竖直或水平方向上的。如果是水平方向上的链，链中的View在竖直方向上不一定是对齐的。同样如果是竖直方向上的链，链中的View在水平方向上不一定是对齐的。所以你要注意添加其他的约束来是链中的View对齐。

上图解释一下第1点

上图解释一下第2点

这个水平链的头和尾都有到父控件的约束，才能正常工作。

解释一下第3点.

这个水平链中的View在竖直方向上并没有对齐，你需要添加其他的约束才能使它们在竖直方向上对齐。

自动创建约束（Automatically create constraints）

除了为布局中的View挨个添加约束，你也可以把说有的View拖动到你想要放置的位置，然后店家工具栏上的Infer Constraints来自动创建约束。

Infer Constraints（推测约束）会扫描整个布局，然后计算出所有View最有效的约束集。它会尽可能把布局中的View约束在他们当前放置的位置上，同时又有一定的灵活性，用户可以做一些适当的调整来适应不同的尺寸和方向。下图所示。

自动连接是一个单独的功能。当开启的时候，当你把一个View添加到布局中的时候，自动连接（不一定）会为View创建约束。但是这些约束的锚点的都是父级布局，不能是其他的View。感觉不好用。

自动连接功能默认是关闭的，你可以点击工具栏上的来选择开始或者关闭自动连接功能。

参考链接:
【0】google示例源代码
【1】http://blog.csdn.net/guolin_blog/article/details/53122387
【2】https://developer.android.com/training/constraint-layout/index.html
【3】https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html