未来布局之星——ConstraintLayout

知识背景

名称:ConstraintLayout
出身:Android Studio 2.2新增功能
成就:2016年Google I/O大会黑马奖;可视化Android界面编写领军角色
关键词:约束

ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统布局,它打破了开发者使用XML编写布局的依赖。
虽然传统布局也可以使用可视化界面拖动控件来搭建布局,但是因为不够灵活,大多数开发者还是会选择通过XML代码来搭建布局。而ConstraintLayout的出现将开发者带入可视化布局编程的新纪元,通过建立控件之间的约束,实现布局的构建。这样做有一个很大的优点,就是减少了布局的嵌套,减少了布局渲染的层数,降低了CPU的消耗,提高了程序的性能。
ConstraintLayout与RelativeLayout相似,都是通过建立控件与控件之间的位置关系来搭建布局,但是ConstraintLayout远远比RelativeLayout强大很多,接下来看一下ConstraintLayout的使用。

建立依赖

ConstraintLayout布局是Android Studio 2.2的新增功能,所以在建立依赖前需要将Android Studio更新至2.2版本或以上。
在app/build.gradle文件中添加依赖,如下:

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

修改布局为ConstraintLayout

打开AndroidStudio,新建一个工程,找到布局文件activity_main.xml,打开让其以Design方式显示,如下图所示。界面中央有两块区域,左边是预览界面,右边的蓝色区域是控件拖动操作界面。

可视化布局搭建

默认创建的activity_main文件的根布局是一个RelativeLayout,接下来将RelativeLayout布局改为ConstraintLayout布局,找到Component Tree,在其下方右键单击activity_main(RelativeLayout),在弹出的列表中选择Convert RelativeLayout to ConstraintLayout,如下图所示:

将布局修改为ConstraintLayout

删除一个控件

完成转换后,可以在Component Tree下方看到ConstraintLayout里面有原来存在的TextView控件,如果不需要,可以在蓝色区域选中TextView控件,单击键盘delete按钮删除该控件。

切换视图

点击菜单栏的中的Show DesignShow BlueprintShow Design + Blueprint按钮可以对操作视图进行切换,如下图所示:

切换视图

添加约束

百闻不如一见,先来看看添加约束的操作。按钮控件有四个方向的约束,如下图所示,按钮的上、下、左、右边上各有一个小圆圈,鼠标可拖动小圆圈到ConstraintLayout,与其添加约束。

Button控件约束

如将按钮下边圆圈拖至ConstraintLayout底部,则按钮移动至底部;再将按钮上边圆圈拖动至ConstraintLayout顶部,垂直方向上有两个约束的按钮控件就会实现垂直居中。

添加约束

约束位置比例调整

当然如果ConstraintLayout添加约束仅仅能实现水平、垂直居中,那么它在功能上与RelativeLayout就没有差别了。除了居中,约束还可以设置控件两边到边界之间的距离比例,通过在右侧属性面板中,拖动水平和垂直方向的进度条来调整两边距离的比例。

调整约束位置比例

控件之间添加约束

除了与ConstraintLayout添加约束,控件与控件之间同样可以添加约束。如下图所示,在调整按钮宽度后,将两个按钮的左右两边添加约束,然后将下方按钮的上边与上方按钮的下边添加约束,拖动下方的按钮,可设置两个按钮之间的外边距。


控件之间添加约束

通过控件之间添加约束和调整约束距离比例,开发者可实现较为复杂的约束。

多控件约束
较为复杂的约束

调整控件外边距及尺寸

细心的读者们或许会发现,在调整控件位置比例的时候,当进度条滑动至100时,控件未能完全贴上布局的右边界,这是因为控件存在外边距。

调整控件外边距

这时候可以修改属性面板中的数值来调整控件的外边距大小,如下图所示:

修改控件外边距

在控件尺寸调整上,ConstraintLayout提供了三种模式,在属性面板中点击下图红色框框区域实现模式的切换。

切换尺寸模式

这三种分别为:

  • wrap content

    wrap_content

    wrap content模式就是平时常用的根据内容来设定控件尺寸。

  • 固定值

    固定值

    固定值模式也是平时常用的,通过设定具体数值来确定控件的大小。如下图所示,切换为固定模式后,在下方的layout_width一栏填写具体的宽度数值。
    设置控件大小

  • any size

    any size

    any size与match parent类似,都是充满整个范围,但是不同点在于match parent充满相对于父容器,而any size是相对于约束条件,即在约束条件下,能填充的范围全部充满,如下图所示:
    设置为any size

    这里说明一下,ConstraintLayout其实也有match parent模式,但是因为ConstraintLayout不存在多层嵌套关系,所以match parent这种相对于父容器的模式在ConstraintLayout中很少会使用。

删除约束

学习了添加约束后,来看看如何删除约束?删除约束有三种方式:

  • 删除单个约束
    将鼠标移动到要删除的约束对应的小圆圈,待小圆圈出现闪烁的红色圈圈时,点击小圆圈即可删除约束。
    删除单个约束

    除了上面这种删除方法,也可以在属性面板中,将鼠标移动到下图红色框框标记的位置,待出现叉叉图标,点击可删除该约束。
    删除单个约束
  • 删除单个控件的所有约束
    用鼠标点击控件,在其左下方会出现一个小叉叉图标,点击小图标即可删除当前控件的所有约束。

    删除单个控件的所有约束

  • 删除当前界面的所有约束
    点击工具栏中删除所有约束图标的按钮,即可删除当前界面所有的约束。

    删除当且界面的所有约束

Guidelines

学完基本的依赖操作,来看一下ConstraintLayout的进阶用法。这里有一个需求,要求将两个控件合在一起,实现水平居中。如果不使用ConstraintLayout,读者们或许会想到用RelativeLayout嵌套LinearLayout来实现。那么在ConstraintLayout这样不存在多布局嵌套的情况下该怎么实现呢?

这时候就提出了Guidelines,GuideLines就如同Photoshop中参考线的概念一样。如下图,创建一个垂直方向的参考线,将其切换至百分比模式,拖动到50%的位置,再将两个控件在左右两侧分别与Guidelines添加约束,然后两个控件的底边相互添加约束即可实现合并居中的效果。此时ConstraintLayout展现了其强大的优势,通过其特性优雅地完成需求。

Guidelines

这里说明一下,创建完Guidelines后,读者们会发现它很难拖动,这里有一个小技巧:将鼠标按住划过Guidelines,然后放到Guidelines的位置,按住鼠标即可轻松实现拖动。

拖动Guidelines

Autoconnect

或许因为我们是第一次接触ConstraintLayout,所以感觉添加约束的操作很有趣,但是在项目中,当控件数量比较多时,每个控件的每条边都要一个一个添加约束,这样就会拖慢开发效率,所以ConstraintLayout提出了Autoconnect的用法。

如下图所示,单击打开工具栏中Autoconnect功能按钮,将控件拖至屏幕中心,然后约束就会自动添加了,这个相信使用过墨刀设计过APP原型的读者们会感到很熟悉。

Autoconnect

Autoconnect会根据我们的意图来判断是否添加相应的约束,当然自动添加的约束不一定全是想要的效果,这时候可以关闭Autoconnect,然后手动修改约束。

Autoconnect

Inference

Inference与Autoconnect功能相同,都是用于自动添加约束的,但是Inference更加强大。Inference是手动添加约束后,对当前界面所有控件的位置关系添加整体约束关系,感觉和Photoshop里面不同布局中的图像调整好位置后合并可见图层很像。Inference操作如下图所示:

4.gif

写在后面

本文是在拜读郭霖大神的《Android新特性介绍,ConstraintLayout完全解析》一文后写的,本文的案例和描述基本都是参考自这篇文章,权当是转载来的吧!请叫我佳作搬运工!
最后附上大神原文链接供大家品读:
http://blog.csdn.net/guolin_blog/article/details/53122387


更新20170311

今天简单地翻译了一篇关于ConstraintLayout的官方文档,写了一篇《从官方文档看ConstraintLayout》,欢迎读者们前来指点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • 最全面的ConstraintLayout教程 原创微信公众号郭霖 WeChat ID: guolin_blog 本...
    木木00阅读 10,221评论 4 63
  • 前言 Google 在推出 Android Studio 2.2预览版时,为开发者提供了一种新的布局,那就是 Co...
    ListenerGao阅读 8,516评论 3 19
  • 步骤: 通过小车问题想让大家记住的东西 1 居中问题。绝对是居中,我认为这个比较简单 而且想调位置上下左右哪都能调...
    Cyril丶阅读 159评论 0 0
  • 麻布树,树干中空,不能作木材,也谈不上有观赏的价值,但却可以入药。 最近,常听同学在谈论自己找工作的经历,多...
    龙谖阅读 312评论 0 1