Android ConstraintLayout布局的使用

        在今年的Google I/O大会上，Google推出了Android Studio2.2，同时也推出了一种新的布局ConstraintLayout布局，称为约束布局，本文我们就来简单了解一下这个新布局的使用方法，其实ConstraintLayout跟RelativeLayout是有一些相似的，只是用起来更方便，并且是可以直接完全通过拖拽界面元素去设计布局，下面链接是Google官方的原文链接：

         https://codelabs.developers.google.com/codelabs/constraint-layout/index.html 

        我们先放一张Google官方给出的图片来大致看一眼这个布局，乍一看左侧布局并没有什么亮点，但是看看右边的界面，什么鬼，这没见过，其实不用慌，看完本文你就能够简单的去使用这种布局了

        首先在Android Studio新建一个Module（这里要注意的是，我们Android Studio的版本需要先检查升级，否则不支持），打开布局，如图所示，我们先将原来的布局转换为ConstraintLayout

        首先我们来看一下这个页面，左上角的图标，这几个按钮是在设计布局的时候需要使用的到的，这个按钮是用来显示我们的约束的，当点亮这个按钮时，我们可以在布局中看到我们各个控件之间的约束关系，一般情况下我们点开它，这个按钮是自动约束，在拖动布局控件时自动为我们设置适合的约束条件，但我们都喜欢自己去设计约束条件，所以这个按钮一般关掉（打斜杠的是关掉），这个按钮是清除约束，即删掉我们设置的约束条件，这个按钮开启时是使用推理创建约束。

        右边是显示我们的控件的约束，如下图，下文中我们会介绍如何使用这个。

        

        接下来我们开始开始去设计我们的布局，首先我们拖动几个控件到布局中（这里我拖了几个TextView和ImageView），先将其拖到我们大致要显示的位置去，当我们点击选中其中一个控件时，例如选中其中一个ImageView，我们会发现选中状态时，它的四个角上和四条边上都有小方块或小圆点，四个角上的小方块我们并不陌生，在其他布局中也有，这是用来拖动缩放控件大小的，而四条边上的圆形图形我们没见过，这个是什么呢？这个就是用来操控控件约束条件的手柄，四条边上分别控制控件的上下左右四个方向的约束条件（TextView的中间还有一个长条状的手柄，这个是文字的基线），如下图所示：

        

        下图为我摆放的控件的布局，我们在这个摆放的基础上去设置各个控件的约束

        首先我们先设置最上面的ImageView，我们分别拖动其上、左、右三个方向的圆形手柄，将其最上边约束到父View的最上边，左右同理，以上面为例，用鼠标点击ImageView的上边的圆形手柄，按住鼠标不放，拖动至父View的最上边，等到手柄变成绿色，就可以松手了，这个时候我们就会发现，这个ImageView移到上边去了，用同样的方法设置完左右边，如下图所示（这样就把这个ImageView约束好了，在布局最上面，左右居中），另外再放一张Google官网的拖动时的动图

        这里需要注意的一点，在设置控件的约束时，至少要保证在水平方向和垂直方向上都要设置一个约束，否则会有提示错误；当设置好一个控件的固定位置之后，剩下的控件都可以以这个固定控件去约束他们的位置。

        接下来我们设置各个控件之间的约束，用上述方法，将各个控件的位置去固定，例如，对下面的第一个小的ImageView，拖动左边的手柄连接到上面大的ImageView的左边的手柄，这样就保持两个ImageView的左侧边是保持一致的，同理，设置其他边，如下图所示：

        注：设置约束时，左侧的约束只能与其他控件的左侧约束，不能与其他边约束，例如，下面小ImageView的左侧边，只能约束到上面大的ImageView的左侧的手柄上去，不能约束到上面、右面和下面，同理，下文中的TextView的基线也是，基线只能约束到基线；

        接下来我们看右侧的设置属性的界面，如下图，分别可以设置控件的宽高，相对位置（按百分比），约束方式

       如上图所示，左右显示的16，意为这个控件与父View的左右边距为16dp，这个可以自行设定，下面有个拖动条，上面有个圆形写着50，表示位置在左右居中，可以拖动这个圆形，去改变他的位置，这样控件就是显示在你需要的位置，这里需要注意区分的一下是，这个位置，边距，还有约束的区别，边距很简单就不说了，位置是相对位置，即如果你拖动下方的拖动条到30，就是这个控件的位置会显示在父View水平方向左侧30%的位置，而约束是指将控件之间或父View之间的位置关系。

        

        这个图中是指一个控件的内部，点击内部的线（循环变化三种）可以设置控件的填充模式，默认的是Fixed：选择这个是控件使用你自己制定的宽高；AnySize：选择这个时，让控件占用所有可用空间以使用约束，与容器无关（例如，一个ImageView约束于一个TextView，他只会填充到TextView的边缘，而不是父容器），要区别于match_parent的不同；Warp content：此选项仅扩展至所含元素（如text或drawable）填充满weight.

        设置完这些控件的约束条件之后，我们可以去试试效果，真机运行或者在Android Studio中将手机屏幕旋转，看看布局的变化，控件之间的位置约束。

        以上内容如果不妥之处，望大家指出，谢谢！