ConstraintLayout

ConstrainLayout 是 AndroidStudio2.2 的新特性，能够很方便的用于可视化开发，有点类似于 ios 的 storyboard，解决了 xml 过于复杂的问题。

---

约束

相对定位（Relative positioning）

也就是我们之前常用的relativelayout，属性也与其一致，使用方法如：layout_constraintLeft_toLeftOf，位置用一张图片解释。

 

---

边距（Margins）

同之前的margin使用方法。

• goneMargin

  简单的解释，就是当位置约束的目标可见性为View.Gone时，可以调整它的边距值变为与父布局的margin值。下文将有示例解释。

---

居中定位（Centering positioning）

通过定义上下左右的相邻控件或父容器来设置居中。可以形象的理解为两个大小相同，方向相反的力作用在控件上。

如下，通过定义top, bottom, start, end就可以使textview在parent居中显示。

<TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

倾向（bias）

搭配bias，就像两个力大小不相等，使其往一个方向靠拢。

bias = 0.3

• layout_constraintHorizontal_bias：水平偏向

• layout_constraintVertical_bias：垂直偏向

• 0为最左上，1为最右下，默认为0.5。

---

圆定位（Circular positioning）（1.1新特性）

可以理解为以一个控件为圆心，设定半径和角度，决定另一个控件的位置。如图

• layout_constraintCircle : 参照的控件id（圆心）

• layout_constraintCircleRadius : 距离参照物的距离（两控件中心点间距离）

• layout_constraintCircleAngle : 偏移角度（0为正上方，0~360）

可见性行为（Visibility behavior）

这是针对View.GONE的特定处理。Gone隐藏的控件，会被当成一个点，同时忽略margin。如图。

 

• 当A消失时，B的边距将为原来与A的约束边距。

• 另一种方法，用goneMargin生成新的边距，而原来与A的约束边距将不起作用。

• 这种特定的行为可以做到特殊的布局，比如上图A消失时B位置不变，设A宽度为100，边距为10，B对A约束为20，那么goneMargin=100+10+20=130，则可以实现A隐藏后B位置不变。

---

尺寸约束（Dimensions constraints）

• 可以定义ConstraintLayout布局的尺寸

• 可以定义控件的尺寸，有三种方式：

• 1.确定尺寸：123dp
• 2.WRAP_CONTENT
• 3.0dp

0dp，相当于match_constraint，意思就是填满约束的空间。如果设置了margin值，也需要去掉margin的空间。

---

比例（Ratio)

• 可以按比例设置控件的宽高，定义其中一个维度为0dp，并设置属性layout_constraintDimensionRatio，值可以为0~1的浮点数或比例x:x。

• 可以设置两个维度均为0dp，同时在ratio值前加W或H分别约束宽度或高度。

     <Button android:layout_width="0dp"
     android:layout_height="0dp"
     app:layout_constraintDimensionRatio="H,16:9"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent"/>

• 如上，将以button的最大约束宽度，16:9的比例定义button的高度

---

链条（Chains）

• 将一个维度的一组控件组成一个链条，另一个维度可以单独控制，相当于绑成一个组件。

• 一组部件通过双向连接就形成一个链条。

  

• 水平链的最左边和竖直链的最上边成为链头。

  

• 如果连接中设置了margin，要考虑在内。

• 链条样式（Chain Style）

  给链条第一个元素设置属性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle，则链条会根据样式更改。（默认CHAIN_SPREAD）

  

  • spread：元素间分散开

  • spread_inside：端点除外，元素间分散开，如上图区别

  • packed：元素间打包，即贴在一起

• 权重链（Weighted chains）

  类似LinearLayout里的WEIGHT属性，若元素使用MATCH_CONSTRAINT，就是这些元素使用约束后的空间。

  • layout_constraintHorizontal_weight

  • layout_constraintVertical_weight

---

虚拟辅助元素（Virtual Helper objects）

可以使用辅助对象来创建相对约束，可以通过水平或垂直的Guideline来定位控件。

• Guideline

  • 不会被显示，只会辅助布局

  • 定位Guideline有三种方式：

    layout_constraintGuide_begin：距离左侧或顶部的固定距离

    layout_constraintGuide_end：距离右侧或底部的固定距离

    layout_constraintGuide_percent：父控件的高度或宽度的百分比

---

可视化操作

约束控键类型

• 调整尺寸大小：正方形四角

• 侧边约束：四边圆形，约束四边的位置

• 基线约束：文字下方条状，用于对齐文字

添加约束

• 点击控键，选中圆点拖动到要约束的位置。如图，要将控件放于左上角，将左边和上边分别拉到屏幕边缘即可。

• 两个控件间添加约束，要将第二个textview放于第一个的下方，只需要将左边约束对齐，上边约束到第一个textview的下方即可。要注意的是，添加完约束后，会有一个默认margin值，导致左边没对齐，此时在右侧的Attributes中将margin调为0即可。

删除约束

• 删除单个约束：点击具体的约束发起点即可删除。

  

• 删除单个控件的所有约束：点击控件，在左下方有删除所有约束的按钮，点击即可。

• 删除整个界面的所有约束：在上方工具栏找到

  

  按钮即可删除。

Inspector的使用

这个界面就是控件的属性。我们除了可以修改一些基本属性，还有一些新的功能。

• 修改尺寸

  

  这里有三种尺寸描述方式：

  • 

     

    ：wrap_content

  • 

     

    ：固定数值（100dp）

  • 

     

    ：match_constraint

  关于这三个属性的区别上面已经解释过，大家看动图可以观察出区别。

• 调整bias

  

  滑动那个滑块调节即可。

• 使用guideline

  可以使用guideline进行百分比布局，再不用担心适配问题了。

  

• 自动添加约束

  在上方的工具栏找到

  

   

  ，就可以开启AutoConnect，虽然有时候可能不能达到你想要的布局，但大部分时候可以减轻你的工作量。

链接：https://www.jianshu.com/p/60162337fb2d