天天看点

2016年Google IO最新布局ConstraintLayout

Android Studio 2.2预览版包含了一个新的布局编辑器即ConstraintLyout,你可以不在XML布局文件中构建ConstraintLayout,ConstraintLayout相比之前构建UI的方式要容易地多。

当你拖拽一个视图组件到ConstraintLayout,你可以添加约束,通过拖拽锚线来定义到其他视图组件的相对距离,同时布局编辑器还为所有的视图组件集成了推理约束。

ConstraintLayout必须在Android2.3及以上版本中引入Support包才可以使用,同时对Android Studio的版本要求必须是2.2预览版。

备注:由于ConstraintLayout还没有完全发布,因此目前还没有API参考文档,当完成更稳定的API版本后,将会发布API文档,不过关于ConstraintLayout的所有操作都可以在Android Studio2.2预览版布局编辑器上完成。
2016年Google IO最新布局ConstraintLayout

约束综述

一个约束就是一个视图的在屏幕上相对其他视图组件位置的一种描述,你可以通过下面的方式定义一个单边或多边的约束:

  • 相对其他视图的锚点
  • 布局的边界
  • 不可见的辅助线

因为一个布局文件是由各个视图组件联合组成的,因此可以通过平坦的层级关系创造复杂的布局效果。虽然在概念上ConstraintLayout很像相对布局,但是ConstraintLayout更加灵活,并且完全适用于新的布局编辑器。

你可以定义如下不同的约束类型:

  • 和布局的边界联系: 建立视图组件与布局的边界联系。例如,建立一个视图的顶部与ConstraintLayout顶部的联系。
  • 和其他视图组件的边界联系: 建立和其他视图组件相反的边界联系。例如,视图A的顶部与视图B的底部建立联系,那么视图A就会出现在视图B的下方。
  • 和其他视图边界对齐: 将边界与其他视图组件的相同边界对齐。例如,将视图A的左边界与视图B的左边界对齐,那么两者将会在垂直对齐并且左边界对齐
  • 和其他视图的基准线对齐: 将文字视图组件的基准线与其他文字视图组件的基准线对齐。相比边界对齐,该约束对于文字视图组件的对齐显得更重要。

当你在布局编辑器上对一个视图组件添加一个约束,可以通过拖动改变其位置,同时也可以添加其他的约束以保证在不同尺寸的手机上有相同的布局效果。还可以在布局编辑器上为所有的视图组件添加默认间距。

为你的工程添加ConstraintLayout

当你在Android Studio2.2上新建一个工程的时候,新的工程模板已经为大部分的布局文佳添加了ConstraintLayout,如果你要更新已存在的工程,可按如下方式操作:

  1. 保证你已经引入了最新Android Support包(版本号为32或者更高)

    a. 点击Tools>Android>SDK Manager

    b. 点击SDK Tools标签

    c. 选择Android Support,然后点击确定。

  2. 在build.gradle文件中添加ConstraintLayout包依赖
dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
}
           
  1. 在标题栏或者同步通知中,点击同步更新工程的Gradle文件
为你的工程添加一个新的ConstraintLayout:
  1. 在你的工程布局目录处单击鼠标右键,然后选择并点击 New>XML>Layout XML
  2. 为布局文件命名,并且为布局文件添加”android.support.constraint.ConstraintLayout”根标签
  3. 点击完成
切换已有的布局至约束布局:
  1. 在Android Studio中打开已有的布局文件,在布局编辑器窗口选择底部的Design标签
  2. 在组件树窗口,右键点击Convert to ConstraintLayout
2016年Google IO最新布局ConstraintLayout

在布局编辑器中添加约束

在布局编辑器中一种叫自动连接的特性会始终有效,这个特性可以自动的为你拖进布局中的视图组件创造一个或多个约束。

2016年Google IO最新布局ConstraintLayout

自动连接有可能不是你想要的效果,因此你可以很容易的删除这些约束。虽然你可以通过点击

Turn off Autoconnect
2016年Google IO最新布局ConstraintLayout

关闭自动连接功能,但是这样会导致你添加的视图组件默认没有布局信息。虽然布局编辑器会显示你拖拽的视图的绝对坐标,但是实际的布局管理器不会应用这些坐标,如果你没有添加为视图组件添加约束,它将会显示在屏幕的左上方。

在布局的任何时刻,你都可以通过点击

Infer constraints
2016年Google IO最新布局ConstraintLayout

来让布局编辑器自动的生存约束。你应该尽量使用该操作以保证视图没有遗漏约束,否则视图将会出现在屏幕的左上方。

为了生成视图组件和父ConstraintLayout之间的约束,点击并拖动视图上的圆形手柄至布局的边缘,当锚点变为绿色时,松开鼠标就会生成一个约束。

2016年Google IO最新布局ConstraintLayout

为了在两个视图之间生成约束,点击并拖动手柄至另一个视图的约束手柄处。为了在两个视图之间生成文字基准线,将鼠标放置文字下方的锚点,等待其变长,然后点击并拖动至另一个视图使其连接为基准线。

2016年Google IO最新布局ConstraintLayout
2016年Google IO最新布局ConstraintLayout

你也可以添加一个垂直或者水平的辅助线,该辅助线类似于布局边缘,对用户不可见,但是却有助于约束的连接。为了生成辅助线,在布局的任何地方右键并点击

Add Vertical Guideline

或者

Add Horizontal Guideline

。此时就生成你想要的约束和辅助线。

如果你要为视图添加相反的约束,那么连接线就会变成波浪线,表示两个相反的力。例如,如果你为视图添加一个到布局左右边界的约束,那么视图就会默认水平居中显示。

2016年Google IO最新布局ConstraintLayout

如果你想编辑视图的约束和边距,选择该视图并在布局编辑器的右侧点击

Properties

。属性窗口就包含了顶部的约束和该视图的其他属性,例如一个按钮的文案和背景。

2016年Google IO最新布局ConstraintLayout

当你生成了相反边界的连接时,你可以调整在任意方向上相对位置。点击连接线的任意一端即可删除约束。