Android约束布局示例

时间:2020-02-23 14:29:25  来源:igfitidea点击:

约束布局

之前我们已经看到了约束布局如何通过使用约束的相对位置视图来帮助我们摆脱嵌套布局。

在第一部分中,我们讨论了基本工具,例如自动连接,推断,锚点,基线等。
在本教程中,我们将看到" ContraintLayout"的最新更新中的新增功能,并讨论和实现Constraint Layout提供的一些令人惊奇的功能。

自Beta版本以来,最新的Constraint Layout版本进行了一些更改。
确保在gradle构建文件(build.gradle)中具有以下依赖项版本(或者更高版本)。

compile 'com.android.support.constraint:constraint-layout:1.0.2'

约束布局有哪些新功能?

  • " match_parent"在此布局中不存在:我们需要改用match_constraint(0 dp)并将约束附加到父视图的侧面,或者让布局调整视图的大小。

  • 通过XML设置约束:要使用xml将按钮设置在布局的中央,我们需要为父视图的每一侧设置约束,如下所示。

注意:"约束布局"为根视图提供了关键字"父级"(在本例中为" ConstraintLayout")。
让我们使用" 0dp"作为按钮来匹配宽度和高度。

  • 自动设置边距约束:沿着设计屏幕边缘移动小部件将自动设置边距约束,如下所示。

除了右侧的项目属性窗格之外,您还可以从标准尺寸列表中设置" dp"值。

  • 在基线和锚定点之间切换:以下按钮充当锚定和基线约束之间的切换。

  • 使用工具列选项设置快速约束:布局编辑器提供了用于对齐两个视图的快捷方式。
    下面给出了将两个视图左,右和两者对齐的示例。

注意:由于我们需要沿着垂直轴定义约束,因此第二个TextView中显示错误。

  • 下面给出了对齐两个视图"顶部","底部","中心"和"基线"的示例。

  • 下面给出了对齐两个视图(水平居中或者垂直居中)的示例。

  • 第三行的前两个选项将视图对齐,在给定可用空间内水平居中或者垂直居中,如下所示。

上述限制是基于"链接"的概念,我们将很快研究。

注意:您在上面的gif中会注意到的以下图标用于在链接样式之间切换。

约束布局链接

链是一项功能,可让我们沿类似于LinearLayout的轴定位视图。
每个视图都通过双向约束链接。
链接的XML属性为app:layout_constraintVertical_chainStyle或者app:layout_constraintHorizontal_chainStyle。

它接受以下值:

  • 传播:视图均匀分布。

  • spread_inside:第一个和最后一个视图固定在链的每个末端的约束上,其余视图均匀分布。

  • 打包:视图打包在一起。
    然后,您可以通过更改链的第一视图的偏差来调整整个链的偏差(左/右或者上/下)

  • 加权:加权链是样式设置为spread或者spread_inside的链,其中至少一个小部件设置为0 dp/match_constraint。
    我们需要为每个视图分配weight属性:layout_constraintHorizontal_weight或者layout_constraintVertical_weight