一、说在前面的话
在这里预祝大家2019年：猪事顺利，青春永猪，猪圆玉润，猪笼入水—八面来财
对于这个已经出现了两年的新布局ConstraintLayout，之前只是作为知识了解并未在真正的使用它，今天让我们来从几个方面解读ConstraintLayout并对它的性能做细致化分析。
二、ConstraintLayout是什么？
ConstraintLayout是Google在2016年的I/O大会上推出一款新型布局方式，也是Android Studio 2.2中主要的新增的功能之一。目的是为了解决由于布局嵌套过于复杂而带来的页面渲染性能问题。
可以这么说，ConstraintLayout是RelativeLayout的升级版，它允许我们在Layout上设计子控件与子控件之间的位置关系，而且它远比RelativeLayout在Android Studio中表现的效果更灵活、更容易使用。
下面是官网对它描述：
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It’s similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.
三、为什么要用ConstraintLayout？
我们都知道，在传统的Android开发中，界面基本上都是靠编写XAL代码完成的，虽然Android Studio也支持可视化的方式编写界面，但是操作起来异常的麻烦，而且布局展示效果也达不到预想的效果，所以也不建议大家使用可视化编写Android程序的界面布局。
但是ConstraintLayout出现就为了打破这一现状。它和传统编写界面的方式恰恰相反，ConstraintLayout非常适合使用可视化的方式来编写界面，但是不太适合使用XAL的方式来进行编写。当然，可视化的背后仍然还是使用了XAL代码来实现的，只不过这些代码是由Android Studio根据我们的操作自动生成相应的布局。
另一方面，ConstraintLayout还有一个比较重要的优点，它可以有效地解决布局嵌套过多的效果。平时我们在编写界面时，复杂的布局往往会伴随着多层布局的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系，它有点类似于RelativeLayout，但功能远远比RelativeLayout要强大。可以这样说，RelativeLayout和LinearLayout能实现的效果，在ConstraintLayout完成都可以胜任，而且它们做不到的ConstraintLayout同样也能做到，性能也会有很高的提升，关于性能的对比会在后面讲到。
四、 让我们愉快的开始
如果你使用的是Android Studio 2.3版本及以上版本时，在创建项目时默认会自动导入ConstraintLayout的依赖并在创建布局时默认布局也会使用ConstraintLayout。但如果是使用Android Studio 2.2版本时可能就需要手动添加依赖，如下所示：
dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}
如果我们创建布局时默认布局不是ConstraintLayout时，我们可以通过将其转换为ConstraintLayout：
需要注意一点时，转换后之前的布局样式会失效，需要重新调整。
我们可以看到，现在主操作区域内有两个类似于手机屏幕的界面，左边的是预览界面，右边的是蓝图界面。这两部分都可以用于进行布局编辑工作，区别是左边部分主要用于预览最终的界面效果，右边部分主要用于观察界面内各个控件的约束情况。当然，如果不想看这样预览界面，可以在左上角点击
这个图标，它分为三种模式：Design、BluePrint、Design+BluePrint，至于它们的展示界面可以自行体会。
基本操作
下面让我们动起自己的小手开始具体操作吧。ConstraintLayout的基本用法很简单，比如我们想要向布局中添加一个按钮，那么只需要从左侧的Palette区域拖一个Button进去就可以了，如下图所示。
虽然现在Button已经添加到界面上了，但是由于我们没有给Button添加任何的约束，因此Button并不知道自己应该出现在什么位置。现在我们在预览界面上看到的Button位置并不是它最终运行后的实际位置，如果一个控件没有添加任何约束的话，它在运行之后自动位于界面的左上角。
那么下面我们就来给Button添加约束，每个控件的约束都分为垂直和水平两类，一共可以在四个方向上给控件添加约束，如下图所示。
上图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，我们可以将约束添加到ConstraintLayout，也可以将约束添加到另一个控件。比如说，想让Button位于布局的右下角，就可以这样添加约束，如下图所示。
我们给Button的右边和下边添加了约束，因此Button就会将自己定位到布局的右下角了。类似地，如果我们想要让Button居中显示，那么就需要给它的上下左右都添加约束，如下图所示。
这就是添加约束最基本的用法了。
除此之外，我们还可以使用约束让一个控件相对于另一个控件进行定位。比如说，我们希望再添加一个Button，让它位于第一个Button的正下方，并且间距64dp，那么操作如下所示。
现在添加约束的方式我们已经学完了，那么该怎样删除约束呢？其实也很简单，删除约束的方式一共有三种，第一种用于删除一个单独的约束，将鼠标悬浮在某个约束的圆圈上，然后该圆圈会变成红色，这个时候单击一下就能删除了，如下图所示。
第二种用于删除某一个控件的所有约束，选中一个控件，然后它的左下角会出现一个删除约束的图标，点击该图标就能删除当前控件的所有约束了，如下所示。
第三种用于删除当前界面中的所有约束，点击工具栏中的删除约束图标即可，如下图所示。
至此我们把ConstraintLayout基本用法学完了，恭喜你现在就可以使用ConstraintLayout开发界面布局了。不过有的同学可能发现了右边的Properties区域中的Inspector。那就让我们继续吧。
Inspector
当我们选中任意一个控件的时候，在右边的Properties区域中就会出现很多的属性选项，如下图所示：
在这里我们就可以设置当前控件的所有属性，如文本内容、颜色、点击事件等等。这些功能都非常简单，我就不再进行详细介绍，大家自己点一点就会操作了。
需要我们重点掌握的是Properties区域的上半部分，这部分也被称为Inspector。
首先可以看到，在Inspector中有一个纵向的轴和一个横向的轴，这两个轴也是用于确认控件的位置。我们可以给Button的上下左右各加了一个约束，然后Button就能看居中显示了，其实就是因为这里的纵横轴的值都是50。如果调整了纵横轴的比例，那么Button的位置也会随之改变，如下图所示：
不过，虽然我们将横轴的值拖动到了100，但是Button并没有紧贴到布局的最右侧，这是为什么呢？实际上，Android Studio给控件的每个方向上的约束都默认添加了一个8dp的间距，从Inspector上面也可以明显地看出来这些间距的值。如果这些默认值并不是你想要的，可以直接在Inspector上进行修改，如下图所示：
可以看到，修改成0之后Button右侧的间距就没了。
接下来我们再来学习一下位于Inspector最中间的那个正方形区域，它是用来控制控件大小的。一共有三种模式可选，每种模式都使用了一种不同的符号表示，点击符号即可进行切换。
表示wrap content，这个我们很熟悉了，不需要进行什么解释。
表示固定值，也就是给控件指定了一个固定的长度或者宽度值。
表示any size，它有点类似于match parent，但和match parent并不一样，是属于ConstraintLayout中特有的一种大小控制方式，下面我们来重点讲解一下。
首先需要说明，在ConstraintLayout中是有match parent的，只不过用的比较少，因为ConstraintLayout的一大特点就是为了解决布局嵌套，既然没有了布局嵌套，那么match parent也就没有多大意义了。
而any size就是用于在ConstraintLayout中顶替match parent的，先看一下我们怎样使用any size实现和match parent同样的效果吧。比如说我想让Button的宽度充满整个布局，操作如下图所示。
可以看到，我们将Button的宽度指定成any size，它就会自动充满整个布局了。当然还要记得将Button左侧的间距设置成0才行。
那有的朋友可能会问了，这和match parent有什么区别呢？其实最大的区别在于，match parent是用于填充满当前控件的父布局，而any size是用于填充满当前控件的约束规则。举个例子更好理解，如果我们有一个新的Button，它的其中一个约束是添加到当前这个Button上的，那么any size的效果也会发生改变，如下图所示。
通过上图的演示，相信你已经很好地理解any size的作用了。
Guideline
现在你已经对ConstraintLayout比较熟悉，并且能使用ConstraintLayout来编写一些简单的界面了。不过目前有一个问题可能还比较头疼，刚才我们已经实现了让一个按钮居中对齐的功能，如果我们想让两个按钮共同居中对齐该怎么实现呢？
其实这个需求很常见，比如说在应用的登录界面，都会有一个登录按钮和一个注册按钮，不管它们是水平居中也好还是垂直居中也好，但肯定都是两个按钮共同居中的。
想要实现这个功能，仅仅用我们刚刚学的那些知识是不够的，这需要用到ConstraintLayout中的一个新的功能，Guideline。
下面我们还是通过实际操作来学习一下Guidelines的用法吧。比如现在已经向界面中添加了登录和注册这两个按钮，如下图所示。
然后我们希望让这两个按钮在水平方向上居中显示，在垂直方向上都距离底部64dp，那么就需要先添加一个垂直方向上的Guideline，如下图所示。
我来对上图中的操作进行一下解释。首先点击通知栏中的Guidelines图标可以添加一个垂直或水平方向上的Guideline，这里我们需要的是垂直方向上的。而Guideline默认是使用的dp尺，我们需要选中Guideline，并点击一下最上面的箭头图标将它改成百分比尺，然后将垂直方向上的Guideline调整到50%的位置，这样就将准备工作做好了。
接下来我们开始实现让两个按钮在水平方向上居中显示，并距离底部64dp的功能，如下图所示。
可以看到，我们给登录按钮的右边向Guideline添加约束，登录按钮的下面向底部添加约束，并拖动按钮让它距离底部64dp。然后给注册按钮的左边向Guideline添加约束，注册按钮的下面向登录按钮的下面添加约束。这样就实现了让两个按钮在水平方向上居中显示，在垂直方向上都距离底部64dp的功能了。
至此整个ConstraintLayout的使用都已经讲解完毕。下面会讲述布局中每个属性的具体含义，有兴趣的同学可以查看Android ConstraintLayout完全解析和性能分析（章节二）