ConstraintLayout 约束布局 的发布已经很长时间了，小菜用的比较少，测试时看到同事用的 ConstraintLayout 布局方式编辑的 xml，觉得有必要学习一下，并记录一下小菜在学习过程中遇到的小问题。
      小菜理解的约束布局是相对布局的升级版，相对位置，更依赖于其他控件位置，关联性更强。

小菜的测试小结如下：

1. 命名空间需要用 xmlns:app="

   

   提醒.png

2. 控件的居中与对齐方式，约束布局中并没有类似于 LinearLayout/RelativeLatout 可以直接设置居中的属性，需要关联周围的布局，相互约束，例如：

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:orientation="horizontal"
    android:padding="6dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Tips:
      2.1 约束布局中建议每个控件都设置 id，这样在互相关联约束中会更便捷；没有设置 id 时，若关联父类布局控件关联 id 为 parent：如 app:layout_constraintLeft_toLeftOf="parent"，若关联同级布局控件，AndroidStudio 会自动在关联控件中添加默认 id，如 app:layout_constraintLeft_toLeftOf="@id/test_left_lay"；
      2.2 小菜对于这种关联方式 app:layout_constraintLeft_toLeftOf="parent" 的方便理解可以作为拆分理解，如图：

拆分.png

      2.3 约束布局的关联性很强，如果【控件 B】的位置时根据【控件 A】的位置关联设置的，那么鼠标滑动调整【控件 A】的位置，【控件 B】的位置也会共同移动，如图：

关联移动.png

1. 在 Design 模式下点击任意一个控件，可看到有几个可操作的快捷方式：

第一个：控件四周的实心正方型，鼠标拖动拉伸即可调整控件的整体大小，按比例缩放：

拉伸.png

第二个：控件四个边框中心的空心圆，鼠标点击拖动即可调整与其他控件的关联关系：

关联.png

第三个：控件左下角带箭头的红×，点击即可清空本控件与其他控件的关联关系，并在 xml 中自动添加一个绝对位置的坐标：

tools:layout_editor_absoluteX="142dp"tools:layout_editor_absoluteY="501dp"

位置清空.png

第四个：控件为 TextView 时，左下角会出现一个 ab 样式小图标，点击即在文字下出现一个实心长条矩形，用来与其他 TextView 进行文字对齐：

内容关联.png

1. 控件相对于布局的比例/权重，这个就像第二条中居中对齐的功能，如图，控件左侧距左边框长度 与 控件右侧距右边框长度 即图中 x/y 的比例即为相对于布局的水平权重： app:layout_constraintHorizontal_bias="0.3"；控件顶部距上边框长度 与 控件底部距下边框长度 即图中 a/b 的比例即为相对于布局的垂直权重：app:layout_constraintVertical_bias="0.273"；当为 0.5 时即为居中；
   

   

   权重.png

   
   

2. 
   

   
   

   自身控件的比例，这也是小菜最喜欢的属性，根据 app:layout_constraintDimensionRatio="4:3" 即可设置自身的的比例，即长度/高度，对于图片的各种比例设置会非常的方便，注意，使用该属性时，控件宽度可固定或 wrap_content，高度则应设为 0dp，若高度设为 wrap_content，则该属性不起作用，如图：

   

   自身比例.png

Tips：
      小菜对这个布局很不熟悉，学习测试过程中也是各种尝试，七零八散的，仅记录一下小菜觉得很有意思的地方。
      小菜认为，约束布局更适合直接将控件拖拽进布局然后进行大致设置位置，然后再对具体的控件进行样式位置的具体调整，适合页面布局相对简单的页面，例如登录注册等。
      同时，约束布局有太多的东西需要学习和挖掘，熟练应用会对于布局方面的优化会有很大帮助。

作者：老菜和尚