ConstraintLayout：利用鼠标拖拽设计界面

  参见工作以来，写布局文件一直是我觉得最痛苦也最浪费时间的流程，稍微复杂一点的界面就需要利用各种LinearLayout和RelativeLayout来嵌套完成界面，利用嵌套不仅浪费时间，对于手机界面的性能也有所影响。于是想到了利用ConstraintLayout来进行界面的编写。一开始还是利用代码编写xml文件，觉得并没有多少提升工作效率，反而觉得代码量比以前更大了，因为ConstraintLayout要约束子控件的位置，直到我利用鼠标拖拽之后，两个字：真香！
  先简单介绍一下ConstrainLayout：约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

  阅读本篇文章需要了解一定ConstraintLayout的基本属性，上有很多介绍的很好的文章，你可以先阅读一下在阅读本篇文章。我挑选了一个比较有代表性的界面来进行实现：

UI界面.png

首先观察一下UI界面大致分为三个部分：toolbar，显示区域，操作区域。从上至下来进行设计，先再布局文件中添加一个toolbar

布局约束

此时toolbar中是没有进行任何约束的，编译器会直接报错，然后我们切换至design界面，利用鼠标拖拽来进行实现约束。

toolbar约束.png

看到toolbar上有四个白色的小圆点，利用鼠标拖拽这四个小圆点就可以实现布局约束。

toolbar左对齐.png

按住鼠标之后会出现一个箭头，需求是要实现左对齐父布局，所以只要将鼠标拖至界面最左侧就可实现app:layout_constraintStart_toStartOf="parent"，上下左右同理。

添加GuideLine

完成第一个部分的设计之后，来到第二部分，第二部分加上第一部分大概是占总布局的50%，所以我们这里可以引入一条水平的GuideLine，直接在Design界面鼠标右击进行添加：

GuideLine添加.png

选择自己想要添加的类型，这里我们想要的是添加一条水平的GuideLine，所以选择第二个即可。

guideline设置百分比.png

GuideLine位置有两种可以选择，这里根据需求选择百分比，设置为整个布局的50%，这样界面上就出现了一条分割上线部分的GuideLine，根据这条线来实现第二部分和第三部分的添加。
添加第二部分的背景，往布局中拖入一个View，然后利用鼠标拖拽实现约束

第二部分背景添加.png

与之前约束toolbar一样拖动白点，使得View上对齐toolbar，左右对齐parent，下对齐GuideLine，设置背景即可。

居中设置

第二部分显示温度是居中的，拖入一个TextView进行左右上下分别于View的上线左右进行约束，就可以将TextView居中。

温度居中.png

第二部分其余控件约束方式都是类似，就不在赘述。

链（Chain）

进入第三部分，引入一个约束布局的链（Chain）的概念：链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。成为链的条件：一组控件它们通过一个双向的约束关系链接起来。 并且链的属性是由一条链的头结点控制的，如下：

链.png

在第三部分的模式当模板，引入四个ImageView。使用鼠标左键进行选中四个View，然后右击创建一个水平的链

添加链.png

然后对于链的第一个控件进行约束，之后的控件对于链的第一个控件进行约束，就可以达到统一管理的目的。

链约束.png

Group

Group也是一个非常重要的概念，可以将多个控件添加只一个Group中，然后设置该Group的可见性来空这Group中所有控件的可见性。在界面上右击添加一个Group

Group.png

然后再左侧控件栏将要添加进Group的控件直接拖入就能实现添加

Group添加控件.png

总结

  ContranitLayout已经成为模板布局，Google采用ContranitLayout一定有他的道理，所以Android开发一定要尽早的使用ContranitLayout来进行界面的编写。