《Android群英传》作者徐宜生带你解锁设计布局的新姿势

本文转自： 徐宜生 Android群英传（感谢医生大哥的分享，在此mark一下）

http://my.csdn.net/x359981514

ConstraintLayout 是 Android Studio 2.2 的新特性，也是Google在去年的I/O大会上重点宣传的一个功能。在新版 Android Studio 中, ConstraintLayout 已替代 RelativeLayout , 成为HelloWorld 项目的默认布局。

为什么ConstraintLayout会替代其他布局成为主流布局？

我们都知道，在传统的Android开发当中，界面基本都是靠编写XML代码完成的，虽然 Android Studio也支持可视化的方式来编写界面，但是操作起来并不方便，而 ConstraintLayout 就是为了解决这一现状出现的。

ConstraintLayout 可以看做 RelativeLayout 的升级版。可以有更多的手段来控制里面的子 View 的布局，所以对于复杂的布局用 ConstraintLayout 一个布局容器即可实现。

ConstraintLayout 可以有效地解决布局嵌套过多的问题。我们平时编写界面，复杂的布局总会伴随着多层的嵌套，而嵌套层级直接影响 UI 界面绘制的效率，如果 UI 嵌套层级太多会导致界面有性能问题。目前对于复杂的界面，使用 RelativeLayout 也无法解决。所以 Android UI 团队就在去年 Google IO 开发者大会上发布了一个新的布局控件 — ConstraintLayout。

ConstraintLayout导学基础

官网镇楼  https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

其实官网上面对于ConstraintLayout的描述是非常详细的，包含了ConstraintLayout的大部分基础使用和概念，但是缺少了一些指导和建议，所以本篇就带领大家来了解ConstraintLayout，当然，学习ConstraintLayout一定要实际动手去操作，文章始终无法比较好的引导大家学习，不太好做很多gif，只希望引导大家ConstraintLayout的学习、使用方法，让大家自己来体验。

ConstraintLayout基本概念

关于ConstraintLayout的一些基础使用知识，大家可以看视频第一节了解入门。

这里再提一下对『约束』的理解：

ConstraintLayout被称为增强的RelativeLayout，是有它的原因的，相对布局提供了layout_toBottomOf类似这样的属性来控制组件间的相对位置，那么ConstraintLayout实际上也是一样的，我们来看这样一个属性：

app:layout_constraintTop_toBottomOf

他代表的是『期望组件的顶部，与指定组件的底部对齐』，那么了解了这个解释方式，其它的属性就很好理解了，所以说，虽然ConstraintLayout不太建议通过代码来布局了，但能理解代码的含义，对理解ConstraintLayout布局是非常有帮助的。

那么这一点，也是我们理解ConstraintLayout的基础所在——即：当前视图与参考视图之间的相对关系，当然，这里的视图不仅仅指的是『子视图与子视图』，也可以是『子视图与父视图』之间的关系。

ConstraintLayout 重难点

下面我们针对 ConstraintLayout 的一些重点和难点进行分析讲解。

等比例布局

等比例布局一直是LinearLayout的强项，我们经常使用LinearLayout来实现三个按钮的等比例布局，利用的则是LinearLayout的weight属性，相信大部分的开发者都使用过这个技巧，即将控件的Size设置为0，并设置Weight为1，从而实现等比例布局。

那么这个布局方式，在早期的ConstraintLayout中是无法完成的，而在新版本的ConstraintLayout中，新增了一个『Chain』的概念，通过Chain，我们就可以非常方便的实现等比例布局。

在Android Studio中，选中要等比例布局的所有控件，点击右键选择『Center in Horizontal』即可完成对这些控件Chain的创建。创建好Chain后，就可以对这几个控件进行比例布局，当然，Chain可以设置不同的样式，视频教程里面有详细的展示

Match Parent

这是ConstraintLayout和以前布局最大的区别，那就是，再也没有MATCH PARENT这个属性了。ConstraintLayout不再使用MATCH PARENT这样一个比较模糊的约束描述方式，我们知道，MATCH PARENT实际上就是希望能够占据整个父视图空间，那么实际上，我们可以换一种描述方式——『目标视图的Size为0 AND 目标视图的左边和父视图的左边对齐 AND 目标视图的右边和父视图的右边对齐』，这样就和MATCH PARENT实现了同一个布局方式，但是却更加精确了。

 <Button 
     android:layout_width="0dp"  
     android:layout_height="wrap_content"  
     app:layout_constraintLeft_toLeftOf="parent"     
     app:layout_constraintRight_toRightOf="parent"/>

在宽高可以实现MATCH PARENT之后，我们还可以对视图自己本身进行约束的设置。例如我们经常约束一个ImageView显示的图片是16:9的大小，那么我们在设置这个ImageView MATCH PARENT的同时，还能为他本身提供16:9的大小约束（需要将宽高中的一个属性设置为0）。

 app:layout_constraintDimensionRatio="16:9"

constraintDimensionRatio属性默认是『宽:高』，当然，你可以指定是谁比谁，例如『宽:高』实际上等效于『W,宽:高』，也等效于『H,高:宽』。

Center In Parent

居中这件小事，有了前面Match Parent的概念，就更好理解了，在Match Parent中，我们是把控件Size设置为0，那么如果不设置为0，而保持Wrap Content，然后再让目标视图四边都与父视图四边对齐，那么ConstraintLayout就自动实现了居中，同时，更加灵活的是，你不仅可以指定在父视图中居中，而且可以修改任意的对齐边，保证在另外几条边和父视图居中的情况下，再和另一个视图对齐。

 <Button     
    android:id="@+id/button2"     
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"     
    android:text="Button"     
    app:layout_constraintBottom_toBottomOf="parent"     
    app:layout_constraintLeft_toLeftOf="parent"     
    app:layout_constraintRight_toRightOf="parent"     
    app:layout_constraintTop_toBottomOf="@+id/button1"/>

另外，居中有时候也不是那么『Very Center』，所以，ConstraintLayout给开发者提供了一个可以调整居中比例的参数——bias，用于控制在当前布局比例下，在横向和纵向上的倾斜比例，这样你就可以非常方便的设置『在居中的情况下，在水平中心点向右偏斜20%』这样类似的需求。

Guidelines && Space

在一些非常复杂的布局里面，全部依靠组件间的相对关系来进行布局，可能会让这种关系变得非常复杂，而且不容易维护，所以，ConstraintLayout提供了一个新的组件——Guideline，也就是我们通常理解的『辅助线』，Guidelines不会被绘制，仅仅在布局时，提供额外的布局关系辅助。

Guidelines可以在现有布局中随意添加、随意定位，这样就好像我们可以在布局中进行分组，将一些属性归类，由一个Guideline统一进行布局，例如左边的几个按钮，Margin统一进行设置，极大的方便了布局，也提高了布局的可维护性。

Guidelines在布局中的定位，有两种方式，一种是基于百分比，这也是Google使用ConstraintLayout来替代之前给出的一个百分比布局的原因；另一种是基于DP，也就是通常的布局方式。那么有了这两种布局方式，我们就可以非常方便的对视图进行拓展和维护了。

除了Guidelines，Space也是我们常用的辅助布局助手，只不过他很早就有了，但是之前一直没有太大的作用。现在，Space终于可以派上用场了。我们在传统的布局中，经常会使用到一个『负边距』的技巧，用来创建一些交错的效果，但是这个技巧，在ConstraintLayout中无法使用了，因为ConstraintLayout不支持负边距。那么这个时候，就可以借助Space来暗渡陈仓，将负边距设置给Space，再与Space进行对齐，就实现了所谓的『负边距』。

Gone Margin

在ConstraintLayout中还有一些类似layout_goneMarginLeft这样的属性，可以发现，这些属性与一般的设置Margin属性的方式不太一样，望文生义，实际上就是对参照视图被Gone掉之后的处理。

约束的默认行为

不同约束把一个组件拉向两个不同的方向

我们考虑这样一个场景，左边是一个大的Button，右边有一个小的Button，如果小Button的上边和下边分别和大Button的上边下边对齐，那么小的Button默认将停留在两个不同方向约束的中间位置。

组件的不同约束，约束于同一个参照约束

同样是上面那个场景，如果小Button的上边和下边都约束于大Button的上边，那么小的Button的中心默认将与大Button的上边对齐。

最后，ConstraintLayout的学习最好是通过视频更加直观方便的学习，文字很难描述，给大家推荐宜生的新课 "『ConstraintLayout』设计布局新姿势 "