Say Hello to ConstraintLayout-白红宇

Say Hello to ConstraintLayout

阅读量：5321 次

发布时间：2019-06-14

本文共 3062 字，大约阅读时间需要 10 分钟。

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).当你松手的时候, 约束就生效了. (有一个默认的)

有几个规则:

每个View都至少有两条约束: 一个水平的一个竖直的.

你只能在共享平面的handle和anchor point之间建立约束. 比如一个View的竖直平面只能和另一个竖直平面建立约束, baseline也只能和其他baseline建立约束.

每一个handle只能被用来建立一个约束, 但是你可以对一个anchor point建立(来自多个View的)多个约束.

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

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

通常情况下可以加的有这几种约束:

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尾部的小圆圈可以切换它到底是根据距离还是百分比放置的, 然后拖动它放到一个想要的位置.