神刀安全网

未来布局之星——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方式显示,如下图所示。界面中央有两块区域,左边是预览界面,右边的蓝色区域是控件拖动操作界面。

未来布局之星——ConstraintLayout

可视化布局搭建

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

未来布局之星——ConstraintLayout

将布局修改为ConstraintLayout

删除一个控件

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

切换视图

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

未来布局之星——ConstraintLayout

切换视图

添加约束

百闻不如一见,先来看看添加约束的操作,如下图所示:

未来布局之星——ConstraintLayout

添加约束演示

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

未来布局之星——ConstraintLayout

Button控件约束

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

未来布局之星——ConstraintLayout

添加约束

约束位置比例调整

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

未来布局之星——ConstraintLayout

调整约束位置比例

控件之间添加约束

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

未来布局之星——ConstraintLayout

控件之间添加约束

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

未来布局之星——ConstraintLayout

多控件约束

未来布局之星——ConstraintLayout

较为复杂的约束

调整控件外边距及尺寸

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

未来布局之星——ConstraintLayout

调整控件外边距

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

未来布局之星——ConstraintLayout

修改控件外边距

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

未来布局之星——ConstraintLayout

切换尺寸模式

这三种分别为:

  • wrap content

    未来布局之星——ConstraintLayout

    wrap_content

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

  • 固定值

    未来布局之星——ConstraintLayout

    固定值

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

    未来布局之星——ConstraintLayout

    设置控件大小

  • any size

    未来布局之星——ConstraintLayout

    any size

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

    未来布局之星——ConstraintLayout

    设置为any size

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

删除约束

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

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

    删除单个约束

    除了上面这种删除方法,也可以在属性面板中,将鼠标移动到下图红色框框标记的位置,待出现叉叉图标,点击可删除该约束。

    未来布局之星——ConstraintLayout

    删除单个约束

  • 删除单个控件的所有约束
    用鼠标点击控件,在其左下方会出现一个小叉叉图标,点击小图标即可删除当前控件的所有约束。

    未来布局之星——ConstraintLayout

    删除单个控件的所有约束

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

    未来布局之星——ConstraintLayout

    删除当且界面的所有约束

Guidelines

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

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

未来布局之星——ConstraintLayout

Guidelines

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

未来布局之星——ConstraintLayout

拖动Guidelines

Autoconnect

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

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

未来布局之星——ConstraintLayout

Autoconnect

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

未来布局之星——ConstraintLayout

Autoconnect

Inference

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

未来布局之星——ConstraintLayout

4.gif

写在后面

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


更新20170311

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 未来布局之星——ConstraintLayout

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址