ConstraintLayout 指南

原文

  • 每个View起码需要一个水平约束和一个垂直约束,没有约束View在运行的时候会显示在(0, 0)坐标(虽然编辑界面显示的位置是你拖拽的位置)。

  • 使用Autoconnect and infer constraints 特性布局编辑器(Layout Editor)会自动帮你添加约束

  • 布局编辑器中每个控件会在四角显示重设大小的标识(正方形),在每条边中间显示约束设置的标识(圆形)

  • 添加约束:点击约束圆点,拖动到锚点上。可用的锚点有:别的View的边界、布局的边界、参考线(guideline)。

  • 约束规则:
    1、每个View必须至少有两个约束,一个水平约束一个垂直约束
    2、约束点只能和同个平面的锚点之间产生约束,即View的垂直平面只能与另一个垂直平面产生约束,基准线也只能和另一个基准线产生约束
    3、每个约束点只能用于一个约束,但是不同的View可以约束到同一个锚点上

  • 取消约束:点击View上对应约束点,或是点击清除所有约束的按钮

  • 如果在相反方向上添加了约束后,约束指示线变成像弹簧一样弯曲的线的话,通常是因为View设置成了 "fixed" 或者 "wrap content",这时View会在约束范围居中。如果想拉伸它的尺寸来适应约束范围,"把尺寸改为 match constraints"。如果想保持当前尺寸不变不让View居中, 调整约束偏移。

  • 如果想对齐到一个View的中间,则两边都添加约束

  • 可以添加水平方向或者垂直方向的参考线,参考线对App用户不可见,参考线相对布局边缘的位置可以用 dp 单位或者百分比表示。点击参考线的圆点切换表示方式,拖拽圆点移动参考线位置

  • 调整约束偏移:在属性窗口拖动偏移滑块

  • View有三种尺寸模式
    1、Wrap Content: 自适应内容
    2、Match Constraints: View可以在宽度或者高度方向在计算了边距后根据需要进行扩展来适应约束,如果该方向只有一个约束,View会适应它的内容。这个模式可以在宽度和高度两个方向使用,同时你也可以设置一个尺寸比例
    3、Fixed: 固定大小
    点击图标可以切换这三种模式

ConstraintLayout 指南_第1张图片
The Properties window includes controls for 1 size ratio, 2 delete constraint, 3 height/width mode, 4 margins, and 5 constraint bias.
  • 设置尺寸比例:只有一个方向设置为 Match Constraints 时,点击 Toggle Aspect Ratio Constraint 开关,输入宽高比。如果两个方向都设置为 Match Constraints,则需要选择一个方向作为基准
ConstraintLayout 指南_第2张图片
The view is set to a 16:9 aspect with the width based on a ratio of the height.
  • 边距:在Material Design中边距的尺寸一般为 8dp 的倍数

  • 用链(Chain)控制线性组
    一个链允许你使用以下样式水平或者垂直放置一组View:
    1、Spread: 均与分布。默认模式。
    2、Spread inside: 第一个和最后一个附着在其约束上,其余的均与分布。
    3、Weighted: 当链设置为 spreadspread inside 模式时,你通过设置一个或多个View的尺寸为 "match constraints" (0dp) 来填补剩余的空间。默认模式下,剩余空间会在设置了 "match constraints" 尺寸的View间平均分配,但你可以通过 layout_constraintHorizontal_weightlayout_constraintVertical_weight 给每个 View 指定不同的重要程度。 同 linear layout类似。
    4、Packed: View 打包在一起,可以给他们整体设置偏移

    ConstraintLayout 指南_第3张图片
    Examples of each chain style

  • 快速创建一组 View 的链:将它们全选,右击任一 View 选择 Center HorizontallyCenter Vertically 即可分别创建水平方向和垂直方向的链

  • 使用链的一些考虑事项:
    1、一个 View 既可以属于一条水平链也可以属于一条垂直链,可以很轻松的创建灵活的网格布局
    2、一条链只有当其每个端点都在同一轴向上约束到别的对象上的时候才能正确工作
    3、虽然链的方向可以是水平或者是垂直,用它不代表所有的 View 在那个方向对齐。所以确保你引入了别的约束来为每个 View 取得合适的方向,例如 alignment constraints。

  • 链的头:水平方向第一个或垂直方向第一个 View

  • 不再支持 MATCH_PARENT

  • 支持 View.GONE,gone 的 View 被认为只剩一个点,且它的 margin 全部失效。layout_goneMargin 可重设因为某个 View gone 之后补位的 View 的margin与之前的 View 不同的问题

你可能感兴趣的:(ConstraintLayout 指南)