前言

今天继续说布局的优化，减少布局的层次和嵌套非常重要，这样做确实能够从很多方面优化安卓应用。然而实际开发中，减少布局的层次往往和页面的布局需求相矛盾的，要实现特定的UI界面往往会直接采取堆View和ViewGroup来实现。不过，有时候，如果仔细分析UI界面，可以换一种完全不同的布局来直接实现界面效果。比如说，有时候可以使用TableLayout来直接实现需要LinearLayout嵌套RelativeLayout的效果。现在，官方提供了了一种新的布局类别 ConstraintLayout，它提供了比RelativeLayout更强大的布局功能，并且系统消耗比RelativeLayout更小。

何为ConstraintLayout

ConstrainLayout是google在google I/O 2016发布的一种全新布局，兼容2.3及以上的安卓版本。ConstrainLayout提供了大多数复杂布局的一种简单实现方式，并且无需使用ViewGroup的嵌套，这是它的最强大之处。ConstraintLayout直译为约束布局，可以这样理解，ConstrainLayout是这样的一种ViewGroup,它的所有子View有一条或多条约束规则，每一个约束规则表示这个View和和其他子View、父布局或者是一条虚拟基准线的对齐规则，同时确定了View在水平轴上和垂直轴上的位置。从这里可以看到，约束布局比相对布局实现了更精细化的控制，它不仅可以相对于其他View和父容器来布局，还可以相对于一条虚拟的基准线，还可以指定各View之间对齐的基准线，这就非常强大和灵活了。  注意一点约束布局里面的View必须在水平和垂直轴上各指定一条约束规则，否则这个View就直接摆放到父布局的左上角了。

上图中每个箭头就代表着一条约束规则，view之间以及容器之间的约束规则决定了整个页面展现

如何学习ConstraintLayout

ConstraintLayout作为一种全新的布局，要直接上手还是有一点难度的。Google发布这样一种全新的布局其实也是借鉴了ios系统，在ios开发中，view的位置是由约束规则来唯一确定的，正是由于有了唯一的布局规则，使得ios开发中一般都使用可视化的编辑工具来直接拖控件，且能精确控制。现在安卓也汲取了这一优点，事实上ConstraintLayout是和全新的Android Studio's Layout Editor一起发布的，它们是直接关联到一起的。使用布局编辑器来拖拽控件，就可以直接实现ConstraintLayout布局的所有功能。所以，学习ConstraintLayout,先直接使用布局管理器把约束布局给用起来，在熟练拖拽控件之后，自然就明白了约束布局当中的一些布局概念以及它的API的具体用法了。

把ConstraintLayout用起来

要使用约束布局，首先需要添加约束布局的依赖，下载约束布局support包，并在build脚本中添加依赖，之后就可以使用约束布局了。

创建一个布局文件，最外层为android.support.constraint.ConstraintLayout 布局，打开这个xml文件，切换到Design模式，然后从Palette窗口拖一个ImageView到布局中，如下图所示。

将一个ImageView拖拽到一个ConstraintLayout布局中

如上图所示，注意标出的几个箭头，绿色的箭头点用来拖拽这个ImageView的大小，

红色的箭头的点用来拖拽这个view的约束规则，可以拖拽这个点到父容器的边缘线，其他view的拖拽点或者用户不可见的基准线来跟它们建立约束规则，约束布局的使用其实就是这么简单。

view上面黑色箭头所指的既是基准线，可以拖拽这条基线到确定的位置，然后其他view可以相对于这条基准线的位置来布局。顶部工具栏红色箭头按钮可以创建一条垂直或者水平的基线。

众所周知，水平位置和垂直位置唯一确定了这个view在界面上的位置，所以约束布局中的view必须至少指定一条水平方向和垂直方向上的约束规则。可以看到顶部工具栏右边的绿色箭头，点击这个按钮可以查看约束布局代码中的一些错误，这个功能非常实用，将会帮助我们快速理解约束布局。

深入理解Flexible

Flexible是前端开发中的一种布局策略，用来建立响应式的用户界面，这种策略代表了今后的用户界面编程的通用方案和思想。安卓系统自然也要与时俱进，ConstraintLayout提供了很强大的Flexible特性。

首先，先来看间距的可伸缩性。

通过拖拽建立了三个约束规则的ImageView

看到图中的箭头所指的线，弹簧线表示这是可伸缩的间距，实心线表示写死的间距。这个imageview在容器中的具体位置是：它的宽高大小是由自己唯一确定了的（指明具体的dp数值，或者wrap_content），它距离上面的虚拟基准线85dp，距离父容器左边距和右边距必须至少8dp（注意以上这些数值都可以在右侧的Properties窗口找到对应的位置，然后更改）。  那么在水平方向上的剩余空间就是可伸缩的空间了。这部分的长度是不确定的，在不同宽度的屏幕上，这个剩余空间的大小显然是不同的。默认情况下，这个imageview会摆放在最中间，平分这部分伸缩性空间。当然，你也可以在水平方向上拖动这个view，调整左右切分的比例，Properties窗口也有一个拖动条可以精细调整，当你把这个编辑器用起来的时候，相信你能很快地找到对应的拖动条。同理，垂直方向上也可以实现如此伸缩性。

接下来，我们来看下view自身大小的可伸缩性。

之前，设置一个view宽高可以使用match_parent,wrap_content以及具体的dp数值，在ConstraintLayout里面的view我们还可以使用match constraints模式（layout_width，layout_height设置为0dp）。顾名思义，这个view的大小是由它外部的所有约束规则来确定下来的。

宽度的match_constraints 模式

如上图所示，这个imageview的宽度是由水平方向上的约束规则确定的。这个view距离父容器左边距82dp,右边距82dp,那么容器剩余的宽度就是这个view的宽度了。同理，垂直方向也可以这样使用。

注意，Properties窗口中view内部关于view宽高的标示线（绿色箭头处）。

代表match constraints模式 代表确定数值模式 代表wrap_ content模式

可以点击标识线来改变模式。

上图中，指定了imageview的高度为95dp.我们可以把这个它的高度设置为0dp,即高度使用match constraints模式。但是这样会报错，因为只约束了这个view的上边距为69dp,并没有约束它的下边距。垂直方向上这一条约束规则并不能唯一确定这个view的高度，所以还需要在view的下边距拖拽一条约束规则出来。

除了上面这种做法，还有另外一种方法可以确定这个view的高度，那就是使用ratio属性指定宽高比，宽度加上宽高比，那么高度自然也就唯一确定下来了。

红色箭头所示指定ratio属性

view间约束的使用

上面说的都是一个view和它的父容器之间的约束，接下来说说view间约束的使用。

首先是view间的位置约束。

位置约束

位置约束跟RelativeLayout中的相对位置差不多，上图的约束规定了C在A的下方位置，B在A的右方位置。

这只是简单的约束了C在A的下方，具体在A的右下方还是左下方还是怎样并没有具体确定，还需要创建对齐约束。

对齐约束规则

从箭头的走向可以直观的看出应该怎样拖拽出对齐规则，上图表示B和A的左边缘对齐。还可以拖动B来调整左侧边缘对齐的偏移量。

对于两个TextView，还可以设置它们根据文字内容对齐约束规则。

文字内容对齐约束

红色箭头所示，选定TextView4，点击 ab 按钮，然后TextView4里面显示出文字显示的位置，将它拖拽到TextView3文字显示的位置，这样就建立了文字对齐的约束规则。上图中，TextView3文字居中显示，TextView4文字顶部显示，它们之间的约束确定了它们两的文字内容必须在同一水平线上。

当有许多个相互之间约束的view的时候，约束布局提供了一个view链的概念。

view链可以很简单的实现一些特定的view组合布局的效果，如图。

不同风格的view链

上图列出了约束布局中四种不同风格的view链，分别是Spread,Spread inside,Weighted,Packed。

创建view chain，选择所有的view,然后右键选择垂直居中或者水平居中。

创建view chain

然后，可以点击绿色箭头所指按钮切换Spread,Spread inside,Packed风格。当在Spread或者Spread inside风格的时候，将view的layout_width设置为0dp(match constraints),再设置layout_constraintHorizontal_weight 属性，这就是Weighted风格了，和LinearLayout的layout_weight同样的机制。

把垂直方向的chain和水平方向的chain组合使用可以很简单的实现可伸缩的grid layout .

chain是view间的相互约束的结果，所以使用chain时应该注意必须符合上面基本的约束布局的使用规则。

结语

搞清楚以上的示例，基本上就可以完全转到使用ConstraintLayout替代RelativeLayout嵌套LinearLayout来写新的布局了。记住，ConstraintLayout一定要和布局编辑器一起使用，因为ConstraintLayout就是跟布局编辑器配套使用的，布局编辑器也是着重为ConstraintLayout而设计的。首先不要去管那些API的用法和概念，先直接拖拽起来！

而对于已有的其他布局文件，也可以很简单的转为ConstraintLayout.

一键转为约束布局

强大的布局编辑器提供了一键转换的功能！理论上，不论多复杂的布局都能转换为ConstraintLayout,当然可能会出现一些错乱问题，这需要开发者在了解约束布局的前提下，一点点去调整修改。但最重要的是，回到安卓渲染优化的主题！ 转换为ConstraintLayout之后，只使用一层布局嵌套就实现了之前需要嵌套几层ViewGroup才能实现的页面效果，这给应用的性能带来了很大的提升！