AndroidConstraintLayout使用介绍

什么是ConstraintLayout?

  • 简单说:它是Android团队为开发者带来的一种新的布局方式。

他相比其他布局方式有何优势?

  • 这么说:目前AS2.3中已经默认启用ConstraintLayout替代RelativeLayout。

使用ConstraintLayout前,你需要了解的

  • 顾名思义,ConstraintLayout用中文说,即约束布局或限制性布局。它是一种新的布局方式,也可以说是RelativeLayout的增强。
  • ConstraintLayout向下兼容至API level 9(Android 2.3),它是support library的一部分,也就是说,能兼容目前绝大多数的Android设备。
  • ConstraintLayout允许您使用平面视图层次结构(无嵌套视图组)创建大而复杂的布局。比RelativeLayout的Android Studio的布局编辑器更灵活,更容易使用。
  • 使用ConstraintLayout需要安装Android Studio 2.2,预览版也可以。AS 2.2专门为ConstraintLayout开发了一套新的布局编辑器。新的编辑器极其强大,用拖拽就可以完成界面开发,无需编辑XML 来构建布局。

准备步骤

如下图安装指定Support Repository

概念了解

  • 要定义视图的位置,必须为视图至少添加一个水平和垂直约束。
  • 每个约束表示到另一个视图,父布局或不可见指南的连接或对齐。
  • 每个约束定义视图沿垂直或水平轴的位置; 因此每个视图必须对每个轴具有至少一个约束,但通常更多是必要的。
  • 当您将视图放到布局编辑器中时,即使没有约束,它也会保留在您离开的位置。然而,这只是为了使编辑更容易; 如果在设备上运行布局时视图没有约束,则在位置[0,0](左上角)处绘制视图。

在下图中,布局在编辑器中看起来不错,但是在视图C上没有垂直约束。当此布局在设备上绘制时,视图C水平与视图A的左边缘和右边缘对齐,但出现在视图A的顶部屏幕,因为它没有垂直约束。

虽然缺少的约束不会导致编译错误,但布局编辑器会将缺少的约束指示为工具栏中的错误。在将布局拖到指定位置后,其实也可以点击上一步安装的布局编辑器中有Infer Constraints按钮它是可以推断约束自动添加约束条件的。

导入依赖包

  • 建议将AS更新到2.3及以上版本
  • 导入依赖(2017/3/21最新版本)
    1
    compile 'com.android.support.constraint:constraint-layout:1.0.1'

ConstraintLayout布局实践

布局中使用ConstraintLayout

转换布局
  • 选中需要转换的xml打开布局编辑器
  • 选中Design,锁定Component Tree
  • 选择根节点右键如下图操作即可完成转换
##### 创建新布局 * 新建布局xml * 并在根布局输入android.support.constraint.ConstraintLayout

使用ConstraintLayout约束视图

添加视图
  • 首先将视图从“Palette”窗口拖动到编辑器中。当您添加一个视图到ConstraintLayout,它会显示一个边框,每个角上都有方形调整大小的句柄,每边都有圆形约束句柄。
添加约束
添加约束规则介绍
  • 单击视图以选择它。然后单击并按住其中一个约束句柄并将该行拖动到可用的锚点(另一个视图的边缘,布局的边缘或指南)。当您释放时,将进行约束,使用默认边距分隔两个视图。
  • 创建约束时,请记住以下规则:
    • 每个视图必须至少有两个约束:一个水平和一个垂直。
    • 您只能在约束句柄和共享相同平面的锚点之间创建约束。因此,视图的垂直平面(左侧和右侧)只能被约束到另一个垂直平面; 并且基线可以仅限于其他基线。
    • 每个约束句柄只能用于一个约束,但您可以创建多个约束(从不同的视图)到相同的锚点。
约束API对照表
属性 作用
(1)相对定位 水平轴:左,右,起点和终点; 垂直轴:顶部,底部和文本基线
app:layout_constraintLeft_toLeftOf parent 或 其他子视图id 当前子视图左边对齐父容器或指定子视图的左边
app:layout_constraintLeft_toRightOf parent 或 其他子视图id 当前子视图左边对齐父容器或指定子视图的右边
app:layout_constraintRight_toLeftOf parent 或 其他子视图id 当前子视图右边对齐父容器或指定子视图的左边
app:layout_constraintRight_toRightOf parent 或 其他子视图id 当前子视图右边对齐父容器或指定子视图的右边
app:layout_constraintTop_toTopOf parent 或 其他子视图id 当前子视图顶边对齐父容器或指定子视图的顶边
app:layout_constraintTop_toBottomOf parent 或 其他子视图id 当前子视图顶边对齐父容器或指定子视图的底边
app:layout_constraintBottom_toTopOf parent 或 其他子视图id 当前子视图底边对齐父容器或指定子视图的顶边
app:layout_constraintBottom_toBottomOf parent 或 其他子视图id 当前子视图底边对齐父容器或指定子视图的底边
app:layout_constraintStart_toStartOf parent 或 其他子视图id 当前子视图起点对齐父容器或指定子视图的起点 API>=17
app:layout_constraintStart_toEndOf parent 或 其他子视图id 当前子视图起点对齐父容器或指定子视图的终点 API>=17
app:layout_constraintEnd_toStartOf parent 或 其他子视图id 当前子视图终点对齐父容器或指定子视图的起点 API>=17
app:layout_constraintEnd_toEndOf parent 或 其他子视图id 当前子视图终点对齐父容器或指定子视图的终点 API>=17
app:layout_constraintBaseline_toBaselineOf 其他子视图id 当前子视图的基线对齐指定子视图的基线
(2)设置对目标控件的间距 (有的需要约束才可用) 垂直轴:顶部,底部和文本基线
app:android:layout_marginStart int 值 dp px 设置当前子视图的起点距离左边父容器或子视图右边的距离 API>=17
app:android:layout_marginEnd int 值 dp px 设置当前子视图的终点距离右边边父容器或子视图左边的距离 API>=17
app:android:layout_marginLeft int 值 dp px 设置当前子视图的左边距离父容器或子视图左边的距离 API>=17
app:android:layout_marginTop int 值 dp px 设置当前子视图的起点距离父容器或子视图顶部的距离 API>=17
app:android:layout_marginRight int 值 dp px 设置当前子视图的起点距离父容器或子视图右边的距离 API>=17
app:android:layout_marginBottom int 值 dp px 设置当前子视图距离父容器或子视图底部的距离 API>=17
(3)设置属性为GONE的目标控件的间距(对其他小部件无约束下)的间距 (有的需要约束才可用)
app:layout_goneMarginStart int 值 dp px 设置当前子视图的起点距离左边父容器或子视图右边的距离 API>=17
app:layout_goneMarginEnd int 值 dp px 设置当前子视图的终点距离右边边父容器或子视图左边的距离 API>=17
app:layout_goneMarginLeft int 值 dp px 设置当前子视图的左边距离父容器或子视图左边的距离 API>=17
app:layout_goneMarginTop int 值 dp px 设设置当前子视图的起点距离父容器或子视图顶部的距离 API>=17
app:layout_goneMarginRight int 值 dp px 设置当前子视图的起点距离父容器或子视图右边的距离 API>=17
app:layout_goneMarginBottom int 值 dp px 设置当前子视图距离父容器或子视图底部的距离 API>=17
(4)设置当前控件偏移值
app:layout_constraintHorizontal_bias float 类型 范围:0到1 当前子视图水平约束下的左右偏移比例
app:layout_constraintVertical_bias float 类型 范围:0到1 当前子视图垂直约束下的上下偏移比例
(5设置当前控件宽高比值
app:layout_constraintDimensionRatio “[h或w, 或 无 ]1:1” 当前子视图的宽高比{“h,2:1”(宽2:1高) “w,2:1”(高2:1宽)}
(6)设置当前控件在有链约束下的权重值
app:layout_constraintHorizontal_weight int 值 权重 水平方向上的权重值
app:layout_constraintHorizontal_weight int 值 权重 垂直方向上的权重值
(7)设置当前控件链风格
app:layout_constraintHorizontal_chainStyle packed spread spread_inside packed 4种模式
(8)预览专用
tools:layout_editor_absoluteX dp或px值 预览位置时的x位置,布局展示时没约束下x=0,该属性仅预览用
tools:layout_editor_absoluteY dp或px值 预览位置时的y位置,布局展示时没约束下y=0,该属性仅预览用
添加约束介绍
  • 视图的左侧连接到父布局的左边缘。您可以定义边缘与边距的距离。

  • B被约束为总是在A的右边,并且C被约束在A以下。然而,这些约束不意味着对齐,因此B仍然可以上下移动。

  • 将视图的边缘对准另一个视图的相同边缘。

    • B的左侧与A的左侧对齐。如果要对齐视图中心,请在两边创建约束。

    • 您可以通过从视图向内拖动约束来偏移对齐方式。例如,下图示出了具有24dp偏移对准的B。偏移由约束视图的边距定义。

      您还可以选择所有要对齐的视图,然后单击 工具栏中的
      对齐 以选择对齐方式。

  • 将视图的文本基线与另一个视图的文本基线对齐。 B的第一行与A中的文本对齐。

    要创建基线约束,请选择要限制的文本视图,然后单击
    显示在视图下方的基线按钮。然后单击文本基线并将该行拖到另一个基线。

  • 您可以添加一个可以约束视图的垂直或水平指南,并且应用程序用户将看不到该准则。您可以根据相对于布局边缘的dp单位或百分比在布局中定位指南。

    要建立一个准则,请单击
    在工具栏上,然后单击添加垂直指引 或添加水平准。
    拖动虚线重新定位它,然后单击指南边缘的圆圈可切换测量模式。

视频1. 视图的左侧限制在父节点的左侧。(app:layout_constraintLeft_toLeftOf="parent" == 视图左边对其父容器的左边)

视频2. 添加与现有对象相反的约束(app:layout_constraintRight_toRightOf="parent" == 视图右边边对其父容器的右边)

调整约束偏差示例

视频3. 调整约束偏差。(app:layout_constraintHorizontal_bias="0.1"== 视图水平方向上向左偏移到1/10位置,默认是在5/10位置)

调整视图大小

以下是该图指定位置对照表

  • 1 切换长宽比约束 app:layout_constraintDimensionRatio

    • 如果至少有一个视图维度设置为“匹配约束 match constraints”(0dp),则可以将视图大小设置为比例,例如16:9 。
      要启用比率,请单击“ 切换长宽比约束 Toggle Aspect Ratio Constraint”,然后 在显示的输入中输入width:height比例。
    • 如果两个宽度和高度都设置为匹配约束,则可以单击“切换纵横比约束 Toggle Aspect Ratio Constraint”来选择哪个维度是基于其他参数的比率。视图检查员指示将相应的边缘与实线连接设置为比率
    • 如果将两边设置为“匹配约束 match constraints”,请单击“切换纵横比约束 Toggle Aspect Ratio Constraint”两次,以设置宽度为高度的比率。现在整个尺寸取决于视图的高度(可以以任何方式定义)。
  • 2 视图删除约束按钮

  • 3 高/宽模式
    这些符号表示大小模式,如下所示:

    • Wrap Content 包装内容:视图根据需要扩展以适应其内容。

    • Match Constraints 匹配约束:视图根据需要扩展,以便在考虑边距后满足其约束的定义。但是,如果给定的维度只有一个约束条件,那么视图会展开以适应其内容。在高度或宽度上使用此模式也可以 设置尺寸比例。

    • Fixed 已修复:您可以在下面的文本框中指定一个特定的维度,或通过在编辑器中调整视图的大小。

      要在这些设置之间切换,请单击视图检查器中的符号。
      注意:您不应该使用a match_parent中的任何视图ConstraintLayout。而是使用“匹配约束 match constraints”(0dp)

  • 4 边距设置{app:layout_marginBottom 上下左右}

    • 您可以通过单击表示每个约束的行上的数字来控制“ 属性 ”窗口中每个视图的边距(在图中,标注4显示底部边距设置为28dp)。

    • 该工具提供的所有边距是8dp的因素,以帮助您的视图符合Material Design的 8dp方形网格建议。

  • 5 约束偏差的控件。{app:layout_constraintVertical_bias 水平垂直}

    上面已经有示例调整约束偏差示例

自动创建约束

您可以将每个视图放置在布局中,而不是为每个视图添加约束,您可以将每个视图移动到所需的位置,然后单击
Infer Constraints( 自动约束)自动创建约束。

注意:默认情况下禁用自动连接。您可以通过在布局编辑器工具栏中单击打开自动连接
来启用它

删除约束
  • 要删除约束,请选择该子视图,然后单击约束句柄。或者通过选择子视图,然后单击
    Clear Constraints 来删除所有约束。
用链控制线性组

链是用双向位置约束彼此链接的一组视图。例如,下图所示出了两个彼此具有约束的视图,从而创建水平链。

每个链风格的示例
  • 1 Spread 视图均匀分布(在考虑边距之后)。这是默认值。
  • 2 Spread inside 第一个和最后一个视图被附加到链的每一端的约束,其余的是均匀分布的。
  • 3 Weighted 当链设置为展开或展开在内部时,您可以通过将一个或多个视图设置为“匹配约束 match constraints”(0dp)来填充剩余空间。默认情况下,空间在设置为“匹配约束 match constraints”的每个视图之间均匀分布,但您可以使用layout_constraintHorizontal_weight和layout_constraintVertical_weight 属性为每个视图分配重要的权重 。如果你熟悉layout_weight的 线性布局,这种工作方式相同。因此,具有最高权重值的视图获得最大的空间量; 具有相同重量的视图获得相同的空间量。
  • 4 Packed 视图打包在一起(在计算边距后)。然后,您可以通过更改链的头视图偏差来调整整个链的偏差(左/右或上/下)

要快速创建的视图的链,其全部选中,右键单击一个视图,然后选择水平居中或垂直居中,分别创建水平或垂直产业链,(见视频4)。

视频4. .从操作菜单创建链

使用链时要考虑的其他几件事情:

  • 视图可以是水平和垂直链的一部分,使得构建灵活的网格布局变得容易。
  • 只有链的每一端都限制在同一轴上的另一个对象时,链才能正常工作。
  • 虽然链的方向是垂直或水平的,但使用一个方向不会使该方向上的视图对齐。因此,请确保包括其他约束,以实现链中每个视图的正确位置,例如对齐约束。

文章到此结束了,如果大家还有什么疑问、困惑,欢迎评论与我交流。