Say Hello to ConstraintLayout

ConstraintLayout介绍

ConstraintLayout让你能够在很平的view结构(没有多层布局嵌套)中构建一个复杂的布局结构. 有点像RelativeLayout, 全部的view都是根据它和兄弟View和父layout的关系布局的, 可是它比RelativeLayout要更加灵活, 在Layout Editor中也更加好用.

在Layout Editor中你能够直接靠拖拽来构建ConstraintLayout.

为了在ConstraintLayout中定义一个view的位置, 你必须给view加上两条或多条约束(constraints). 每一条约束表明了一种和其余View(或parent, 或不可见的guideline)之间的联系或者对齐关系.

每一条约束都规定了这个view沿着水平或竖直轴的一个位置, 因此每一个View在每一个轴上都必须至少有一条约束(可是一般须要更多).

Setup

首先确认下载support库, 在Tools > Android > SDK Manager的SDK Toolstab下:
展开Support Repository, check ConstraintLayout for Android和Solver for ConstraintLayout.
Check Show Package Details, 显示版本信息.

好比当前我最新的版本信息是1.0.0-beta4, 我在module的build.gradle中添加:

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

而后点击Sync便可.

转换已有布局

咱们能够新建布局, 而后让它的根节点是android.support.constraint.ConstraintLayout.

除此以外, 咱们还能够直接转换已有布局.
打开Layout, 切换到Designtab, 而后在Component Tree窗口, 右击布局而后选择最底部的Convert XXXLayout(这里是你布局节点的类型) to ConstraintLayout.

添加约束

在Design模式下, 从Palette窗口中拖一个View到editor中去. 当你把一个View加入到ConstraintLayout中以后, 它会展现出一个bounding box, 四角的四个小方块用来拖拽调节大小, 每个边上都有一个小圆点用来创建约束.
这些小方块和小圆点都被称为handles.

点击View, 而后点击并拖住一个约束handle, 把它拖拽到一个可用的anchor point(另外一个View的边缘, layout的边缘, 或者一个guideline).当你松手的时候, 约束就生效了. (有一个默认的margin)

有几个规则:

• 每一个View都至少有两条约束: 一个水平的一个竖直的.
• 你只能在共享平面的handle和anchor point之间创建约束. 好比一个View的竖直平面只能和另外一个竖直平面创建约束, baseline也只能和其余baseline创建约束.
• 每个handle只能被用来创建一个约束, 可是你能够对一个anchor point创建(来自多个View的)多个约束.

要删掉一个约束, 只须要选择这个view, 点击那个对应的handle.

若是你给同一个View加了两个相反的约束, 约束的线条就会变成弹簧状, 来显示两个相反方向的约束. 当View内容的尺寸固定或者是wrap的时候, 在这种状况下View就会在两个约束下居中显示, 若是你想让它展开, 那么就应该修改它的尺寸为Any Size; 若是你想要保持当前的尺寸, 你能够调节约束的权重.

一般状况下能够加的有这几种约束:

• Parent constraint: View的边和Parent的边的关系.
• Position constraint: View之间水平和竖直的位置关系, 拖动可改变相对的margin距离.
• Alignment constraint: View边之间的对齐关系, 对齐后能够调节偏移量.
• Baseline alignment constraint: 对齐View的text baseline, 要建立baseline约束, 首先选中View, 而后把鼠标放在baseline上方两秒钟, 等它变白就能够拖到另外一个baseline去创建约束了.
• Constrain to a guideline: 能够建立竖直或水平的guideline, 而后往上绑定约束, guideline对于用户来讲是不可见的. 放置guideline的时候能够根据相对于layout边缘dp单位的距离, 也能够根据百分比.
  Toolbar上有Guideline的按钮, 点击可选择水平或竖直.
  点击Guideline尾部的小圆圈能够切换它究竟是根据距离仍是百分比放置的, 而后拖动它放到一个想要的位置.

使用Autoconnect和Infer Constraints

当打开Autoconnect模式以后, 每个新加的View都会自动建立约束. Autoconnect模式默认是关闭的.

点击Infer Constraints会给layout中当前全部的View建立约束, 这是一个一次性的action. 它会选择创建最有效的约束, 因此它可能会创建离得很远的两个view之间的约束. 不像Autoconnect模式开启下, 只给新加的View创建约束, 而且只选择最近的元素.

调整View大小

能够经过拖拽View四个角的handles来改变View的大小, 可是这样生成的是hard-coded的尺寸, 对于适配来说这样是很差的.

你能够点击View而后在Properties窗口编辑尺寸.

有三种尺寸模式:

• Wrap Content: 用>>>图形表示.
• Any Size: 用弹簧图形表示. 说明View会一直展开到知足全部约束, 实际的值是0dp. 能够把它想象成"match constraints". 若是此时只有单边的约束, 那么它只展开到能放下本身的内容为止.
• Fixed: 用图形|-|表示, 固定尺寸.

能够经过点击图形符号来切换这些模式.

注意: 在ConstraintLayout中的View中不该该使用match_parent, 而是用"Any Size"(0dp).

调整约束误差

当你给一个View的对立两边都添加了约束, 而View的尺寸是fixed或者wrap_content, 那么默认状况下View就会居中显示在两个anchor point之间(bias=50%).
你能够经过拖拽View或者在Properties窗口中拖拽bias slider来改变它的偏移权重.

调节View边距

能够在toolbar上点击默认边距(8)来修改.

注意这个修改只对修改后新添加的View生效.

每个View的边距均可以经过Properties窗口修改: 点击约束线条上的margin数字.

注意提供的值都是8的倍数, 以确保你遵循了Material Design的建议.

Resources

• Build a Responsive UI with ConstraintLayout
• Demo: HelloConstraintLayout