高效率布局Constraintlayout详解(一)

ConstraintLayout

转载请注明出处:
AS2.2引入了Constraintlayout，布局文件都是通过XML实现，之前虽然也可以通过可视化操作（拖拽等）完成界面布局，由于使用不方便却并不常用。Constraintlayout就像RelativeLayout通过控件间约束关系实现布局，功能比后者更强大。直接好处就是减少布局嵌套、，减少布局渲染的层数，关于ConstraintLayout相对传统布局性能优势可以参考：

• ConstraintLayout性能优势:
  http://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ

• ConstaintLayout官方文档：
  https://developer.android.com/reference/android/support/constraint/Guideline.html

左边界面是最终的手机布局效果预览界面，右边蓝图是约束关系预览界面，便于观察各个控件的约束关系。

基本操作

每个控件有垂直和水平两个方向添加约束，共四个约束。即四个方向的小圆圈

删除约束三种方式：

1. 第一种：删除控件单个约束
   将鼠标箭头放在控件的的圆圈上，如果圆圈变红，单击一下该约束就删除了

2.删除单个控件所有约束
点击一下控件左下角的带X的图标即可移除该控件所有约束
3. 删除界面所有控件的所有约束
单击预览界面上的删除按钮

选中控件，在右侧的Properties区域孔易设置控件的更多属性

该区域被称为Inspector区域，有两个滑动轴，竖直滑动轴用于控制控件在垂直方向上的位置，水平滑动轴用于控制在水平方向上的位置。之前我面是为控件上下左右都添加了约束，然后控件居中先显示，可以里看到此时控件的横纵比例都是50，如果我们调整横纵比例，控件位置也会随之改变。当我们拖到水平轴到100时，会发现控件并没有紧贴到布局的最右边，而是离右边侧有一个间距（8dp）,AS为控件每个方向上都默认添加了一个8dp的间距。你可以点击移动箭头到数组处改变。

控件尺寸约束

控件宽高有三种方式：

1. 确定尺寸
2. 0dp,就等于MATCH_CONSTRAINT(注意：和match_parent有区别)
3. wrap_content

match_Contranit:注意是填充约束

ContraintLayout是RelativeLayout升级版，我知道相对布局是通过约束关系实现控件布局，在相对布局中有两种约束关系：

1. 子控件与控件约束如：

   Android:layout_below="@id/title"

2. 子控件与父控件约束如：

   android:layout_alignParentTop="true"

而ConstaintLayout除了以上相似约束，还多了一种约束：
3. 子控件与GuideLine约束

相对定位

为了便于掌握，我们可以归纳一下：属性参数取值是（@id/控件id）表示为上面的约束1、3,而属性中出现了“parent”字样就是上边的约束2（即子控件相对父控件）.

• 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_constraintXxx_toYyy:
就我个人理解
Xxx:表示控件自身的哪条边（上、下、左、右、基准线）

Yyy:表示的是和约束控件的发生约束的哪条边

整体意思就是：控件的Xxx边位于约束控件的Yyy边。

例：app:layout_constraintLeft_toRightOf=”@id/button1”：表示的控件左边位于约束控件（Button1）的右边。

app:layout_constraintLeft_toRightOf=”parent”
当Xxx和约束控件Yyy相同时比如都是左边表示：控件Xxx边和约束控件Xxx边对齐

基准线对齐：

从上图我们可以看见，开始两个Button基准线（控件文字底部）不再同一水平线上，当基准线对齐时，会发生重叠，自身控件会被遮挡。

居中

当一个控件水平方向同时设置左右边约束，或者垂直方向上设置上下约束，此时控件会水平居中或垂直居中显示。就像力学中的相反方向上相等力作用在一个物体上的效果一样。

倾向

刚刚我们说了当一个控件同一个方向上，两边同时设置约束，控件会在约束空间中居中显示，当上当我设置倾向属性时，控件就会根据偏移值显示。
水平方向：app:layout_constraintHorizationtal_bias=”(取值)0-1”
垂直方向：app:layout_constraintVertical_bias=”(取值)0-1”

从图中我们可以知道，水平居中时，控件左右两边倒父容器的距离都是50%相等，当设置app:layout_constraintHorizationtal_bias=”0.8”后，控件左边距离就变成了80%，右边只占20%了。

控件可见性

在传统布局中，控件被设置为Gone时，该控件是不会占用空间的
在约束布局中，如果控件被设置为GONE是时,该控件尺寸任然会按可见是尺寸计算，其外边距（margin)将被忽略将按0计算。

还是举例说明：控件A约束在控件B的左边，当控件B为GONE时，控件A向左移动B（宽）+B(margin(左右外边距))距离

宽高比例

app:layout_constraintDimensionRatio

取值有两种写法：

1. 宽高比例：2：1

情况一：只有一个方向设置约束

为了使用比例设置控件宽高，至少需要一个方向上约束维度为0dp(即match_constraint),并将app:layout_constraintDimensionRatio=”2:1”设置为相应的比例。

比如：

<Button    android:id="@+id/button3"    android:layout_width="0dp"    android:layout_height="100dp"    android:text="Button"    app:layout_constraintDimensionRatio="3:1"    tools:layout_editor_absoluteX="8dp"    tools:layout_editor_absoluteY="72dp" />

将控件宽度设为match_constraint,宽高比例设为3：1，我们知道高度为100dp,根据比例设置宽度就是100*3=300dp

情况二：宽高同时被约束

当宽高同时被设置为match_constraint,也可以使用比例设置宽高，在这种情况下，系统会使用满足所有约束条件和比率的最大尺寸。以其中指定的一个方向上的尺寸为基准，根据比例，得到里一个方向上的尺寸。以W 或者H表示基准方向：写法如下

app:layout_constraintDimensionRatio="基准方向,基准方向比例:另一方向比例"

app:layout_constraintDimensionRatio="H:2:1"

注意：此时不一定是宽高比，如果是一高度为基准方向，就表示的是高宽比。如上面表示的高是宽度的一半，根据高度的尺寸/2=宽度尺寸。