尝鲜 ConstraintLayout

此文已由作者王宇飞授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

2016 年的 Google I/O 大会闭幕没几天, 每一年的 I/O 都会给大家带来不少新鲜的技术. 对于开发者来说, 今年的亮点之一就是 ConstraintLayout 这一全新的布局方式 。

Constraint, "限制, 约束", 如同字面意义, ConstraintLayout 依靠各个布局元素之间的相互制约关系来实现布局功能. 这听起来很像 RelativeLayout. 事实上, ConstraintLayout 的主要目的是解决目前很容易出现的布局层级过于复杂的情况。

Android 的版本号一直在增加, 但几大布局方式却一直没有变化, 随着需求越来越复杂, 布局的复杂度也随之升高, 多个 Layout 的嵌套更是家常便饭. 层级过深会影响到应用性能以及扩展性. 通过体验 ConstraintLayout, 我发现它确实能够简化布局的结构. 个人角度看, ConstraintLayout 有这些优点:

1. 不知道比原先好了多少个数量级的布局编辑器, 拖拖控件实现布局变得可行, "蓝图"模式下所有的约束关系一目了然

2. 即使没有指定约束也能够根据编辑器内控件的位置智能计算出最合适的约束. 这是个目前来看错误率略高但很高大上的功能. 后面会介绍一下.

3. bias属性使得按比例布局变得异常简单( 即使在 PercentLayout 出现以后也需要嵌套布局来实现, 而 PercentLayout 出现之前, 代码计算比例则更加不方便 )

以上是我最直观的体会, 肯定有遗漏, 欢迎补充.

必要准备

• Android Studio 2.2+, 目前仍是预览版

• build.gradle 中增加 compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
  如果是在 AS 2.2 Preview 中直接新建工程, 上述第二步会自动加上, 而且每个新建布局都会默认使用 ConstraintLayout

编辑器

最直观最惊艳的部分

•   分别显示设计窗口以及蓝图模式窗口, 再次点击会使两种模式窗口并排显示. 其中蓝图模式能够更好地看出约束关系. 在使用中发现设计窗口有时候显示的并不正确, 希望只是预览版的 bug.

•   默认开启, 开启的话每当用户拖入一个新的控件, 松手后会自动计算并应用合适的约束, 还附赠一个很炫的动画效果.

•   这个就是前面所说的 "即使没有指定约束也能够根据编辑器内控件的位置智能计算出最合适的约束". 只需要先把上面那个磁铁的功能关闭, 然后按照想法任意摆放所有控件, 点击这个按钮, 所有的约束就会自动加上. 如果有约束跟我们想要的不一样, 也可以手动修改. 这个功能对付一些简单的布局绰绰有余了, 对于更加复杂的布局, 还需要 Google 在未来更进一步的优化.

__
选中某个控件, 右侧的属性栏也增加了不少新鲜玩意, 点击方形内横向或纵向的线条可以切换不同的宽高模式:
  

•   相当于 WRAP_CONTENT

•   相当于固定大小, 可以在下面的宽高中填写

•   相当于 MATCH_PARENT

•   前文所提的 bias, 滑动调整, 可以方便实现百分比布局

例子

根据实际的项目尝试用 ConstraintLayout 实现了一个简化版 item 的头部:

在原先的布局方式中, 至少需要两层 layout 的嵌套, 而在 ConstraintLayout 下, 则完全不需要布局的嵌套

总结

可以说 ConstraintLayout 目前还只是一个雏形, 各种功能还都不完善, 没有办法用在实际开发过程中. 我在使用过程中遇到过数次卡死的情况, 一些属性设置也不全面. 但是其设计的目的和思想确实很棒也值得借鉴. Google 尝试去改进万年不变的布局方式以及保守诟病近乎无用的可视化编辑器, 对于每一个 Android 开发者来说都是好事. 现在 ConstraintLayout 还处在 alpha 阶段, 大家不妨给 Google 一些时间.

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击

相关文章：
【推荐】 Android事件分发机制浅析（1）