Android新特性介绍，ConstraintLayout彻底解析

今天给你们带来2017年的第一篇文章，这里先祝你们新年好。

本篇文章的主题是ConstraintLayout。其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在去年的I/O大会上重点宣传的一个功能。咱们都知道，在传统的Android开发当中，界面基本都是靠编写XML代码完成的，虽然Android Studio也支持可视化的方式来编写界面，可是操做起来并不方便，我也一直都不推荐使用可视化的方式来编写Android应用程序的界面。

而ConstraintLayout就是为了解决这一现状而出现的。它和传统编写界面的方式偏偏相反，ConstraintLayout很是适合使用可视化的方式来编写界面，但并不太适合使用XML的方式来进行编写。固然，可视化操做的背后仍然仍是使用的XML代码来实现的，只不过这些代码是由Android Studio根据咱们的操做自动生成的。

另外，ConstraintLayout还有一个优势，它能够有效地解决布局嵌套过多的问题。咱们平时编写界面，复杂的布局总会伴随着多层的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的，它有点相似于RelativeLayout，但远比RelativeLayout要更强大。

其实ConstraintLayout属于Android Studio 2.2的新特性，我在去年写《第二行代码》的时候就很是想要将这部份内容加入到新书里面，可是在尝试以后仍是放弃了。由于ConstraintLayout的用法不少都是对控件进行拖拽，只用文字或者是一些静态图片实在太难将它的用法表达清楚了，所以不太适合写到书上。我当时的想法就是在博客上面写一篇ConstraintLayout的用法讲解，来弥补一下《第二行代码》中缺失的这部分新特性，那么今天这篇文章来了。

开始

下面咱们开始用边学边练的方式来进行学习，首先打开你的Android Studio，并新建一个ConstraintLayoutTest项目。另外，确保你的Android Studio是2.2或以上版本。

为了要使用ConstraintLayout，咱们须要在app/build.gradle文件中添加ConstraintLayout的依赖，以下所示。

dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' }

• 1
• 2
• 3

目前ConstraintLayout库最新的版本是1.0.0-beta4，尚未推出正式稳定版本，不过这并不影响咱们提早进行学习和使用。

如今打开res/layout/activity_main.xml文件，因为这是一个新建的空项目，Android Studio会自动帮咱们建立好一个布局，以下图所示。

 

 

不过，Android Studio自动建立的这个布局默认使用的是RelativeLayout，咱们能够经过以下操做将它转换成ConstraintLayout。

 

 

转换完成以后，原RelativeLayout中的内容也会自动转换到ConstraintLayout中，好比图中的TextView。若是你不须要它的话，能够选中这个控件，而后按键盘上的Delete键便可删除。

 

 

咱们能够看到，如今主操做区域内有两个相似于手机屏幕的界面，左边的是预览界面，右边的是蓝图界面。这两部分均可以用于进行布局编辑工做，区别是左边部分主要用于预览最终的界面效果，右边部分主要用于观察界面内各个控件的约束状况。

基本操做

下面咱们来学习一些具体的操做吧，ConstraintLayout的基本用法很简单，好比咱们想要向布局中添加一个按钮，那么只须要从左侧的Palette区域拖一个Button进去就能够了，以下图所示。

 

 

虽然说如今Button已经添加到界面上了，可是因为咱们尚未给Button添加任何的约束，所以Button并不知道本身应该出如今什么位置。如今咱们在预览界面上看到的Button位置并非它最终运行后的实际位置，若是一个控件没有添加任何约束的话，它在运行以后会自动位于界面的左上角。

那么下面咱们就来给Button添加约束，每一个控件的约束都分为垂直和水平两类，一共能够在四个方向上给控件添加约束，以下图所示。

 

 

上图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，咱们能够将约束添加到ConstraintLayout，也能够将约束添加到另外一个控件。好比说，想让Button位于布局的右下角，就能够这样添加约束，以下图所示。

 

 

咱们给Button的右边和下边添加了约束，所以Button就会将本身定位到布局的右下角了。相似地，若是咱们想要让Button居中显示，那么就须要给它的上下左右都添加约束，以下图所示。

 

 

这就是添加约束最基本的用法了。

除此以外，咱们还可使用约束让一个控件相对于另外一个控件进行定位。好比说，咱们但愿再添加一个Button，让它位于第一个Button的正下方，而且间距64dp，那么操做以下所示。

 

 

如今添加约束的方式咱们已经学完了，那么该怎样删除约束呢？其实也很简单，删除约束的方式一共有三种，第一种用于删除一个单独的约束，将鼠标悬浮在某个约束的圆圈上，而后该圆圈会变成红色，这个时候单击一下就能删除了，以下图所示。

 

 

第二种用于删除某一个控件的全部约束，选中一个控件，而后它的左下角会出现一个删除约束的图标，点击该图标就能删除当前控件的全部约束了，以下所示。

 

 

第三种用于删除当前界面中的全部约束，点击工具栏中的删除约束图标便可，以下图所示。

 

 

Inspector

这样咱们就把ConstraintLayout的基本用法学完了，接下来咱们开始学习一些进阶的内容。

当你选中任意一个控件的时候，在右侧的Properties区域就会出现不少的属性选项，以下图所示。

 

 

在这里咱们就能够设置当前控件的全部属性，如文本内容、颜色、点击事件等等。这些功能都很是简单，我就再也不进行详细介绍，你们本身点一点就会操做了。

须要咱们重点掌握的是Properties区域的上半部分，这部分也被称为Inspector。

 

 

首先能够看到，在Inspector中有一个纵向的轴和一个横向的轴，这两个轴也是用于肯定控件的位置的。咱们刚才给Button的上下左右各添加了一个约束，而后Button就能居中显示了，其实就是由于这里纵横轴的值都是50。若是调整了纵横轴的比例，那么Button的位置也会随之改变，以下图所示。

 

 

不过，虽然咱们将横轴的值拖动到了100，可是Button并无紧贴到布局的最右侧，这是为何呢？实际上，Android Studio给控件的每一个方向上的约束都默认添加了一个16dp的间距，从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的做用了。

Guidelines

如今你已经对ConstraintLayout比较熟悉，而且能使用ConstraintLayout来编写一些简单的界面了。不过目前有一个问题可能还比较头疼，刚才咱们已经实现了让一个按钮居中对齐的功能，若是咱们想让两个按钮共同居中对齐该怎么实现呢？

其实这个需求很常见，好比说在应用的登陆界面，都会有一个登陆按钮和一个注册按钮，无论它们是水平居中也好仍是垂直居中也好，但确定都是两个按钮共同居中的。

想要实现这个功能，仅仅用咱们刚刚学的那些知识是不够的，这须要用到ConstraintLayout中的一个新的功能，Guidelines。

下面咱们仍是经过实际操做来学习一下Guidelines的用法吧。好比如今已经向界面中添加了登陆和注册这两个按钮，以下图所示。

 

 

而后咱们但愿让这两个按钮在水平方向上居中显示，在垂直方向上都距离底部64dp，那么就须要先添加一个垂直方向上的Guideline，以下图所示。

 

 

我来对上图中的操做进行一下解释。首先点击通知栏中的Guidelines图标能够添加一个垂直或水平方向上的Guideline，这里咱们须要的是垂直方向上的。而Guideline默认是使用的dp尺，咱们须要选中Guideline，并点击一下最上面的箭头图标将它改为百分比尺，而后将垂直方向上的Guideline调整到50%的位置，这样就将准备工做作好了。

接下来咱们开始实现让两个按钮在水平方向上居中显示，并距离底部64dp的功能，以下图所示。

 

 

能够看到，咱们给登陆按钮的右边向Guideline添加约束，登陆按钮的下面向底部添加约束，并拖动按钮让它距离底部64dp。而后给注册按钮的左边向Guideline添加约束，注册按钮的下面向登陆按钮的下面添加约束。这样就实现了让两个按钮在水平方向上居中显示，在垂直方向上都距离底部64dp的功能了。

自动添加约束

不过若是界面中的内容变得复杂起来，给每一个控件一个个地添加约束也是一件很繁琐的事情。为此，ConstraintLayout中支持自动添加约束的功能，能够极大程度上简化那些繁琐的操做。

自动添加约束的方式主要有两种，一种叫Autoconnect，一种叫Inference，咱们先来看第一种。

想要使用Autoconnect，首先须要在工具栏中将这个功能启用，默认状况下Autoconnect是不启用的，以下图所示。

 

 

Autoconnect能够根据咱们拖放控件的状态自动判断应该如何添加约束，好比咱们将Button放到界面的正中央，那么它的上下左右都会自动地添加上约束，以下图所示。

 

 

而后咱们在这个Button的下方再放置一个Button，效果以下。

 

 

能够看到，只须要将Button拖放到界面上，Autoconnect会判断咱们的意图，并自动给控件添加约束。不过Autoconnect是没法保证百分百准确判断出咱们的意图的，若是自动添加的约束并非你想要的话，还能够在任什么时候候进行手动修改。总之，能够把它当成一个辅助工具，但不能彻底靠它去添加控件的约束。

以上是Autoconnect的用法，接下来咱们看一下Inference的用法。Inference也是用于自动添加约束的，但它比Autoconnect的功能要更为强大，由于AutoConnect只能给当前操做的控件自动添加约束，而Inference会给当前界面中的全部元素自动添加约束。于是Inference比较适合用来实现复杂度比较高的界面，它能够一键自动生成全部的约束。

下面咱们就经过一个例子来演示一下Inference的用法，好比界面上如今有两个TextView，两个EditText，和两个Button，以下图所示。

 

 

接下来咱们先将各个控件按照界面设计的位置进行摆放，摆放完成以后点击一下工具栏上的Infer Constraints按钮，就能为全部控件自动添加约束了，以下图所示。

 

 

如今运行一下程序，最终效果以下图所示：