页面布局

您可以通过简单地拖放微件来创建页面,但布局属性可以显著提升设计速度。它们可以立即精确控制微件的尺寸和位置。

布局属性

面板微件的主属性组中具有 layout 属性,可用于定义如何排列其子级微件。该属性具有以下三个可能的值:

  • fixed:相对于面板边缘排列子级微件。
  • horizontal:沿着水平线方向以彼此相邻的方式排列子级微件。
  • vertical:沿着垂直线方向上下排列子级微件。

fixed 选项会根据父级面板将子级放置在绝对位置。horizontal 和 vertical 选项会相对于面板中其他微件的左侧和右侧或者顶部或底部放置微件。您可以这样认为,相对定位的微件会随着它们周围的微件而灵活移动。实际上,可以将使用这种定位方式的微件称为“在流动之中”。

布局属性

所有微件都有一个可用来确定其尺寸和位置的布局属性组。布局组的内容会基于微件的父级面板的 layout 属性而变化。

固定面板布局属性

固定面板中的微件具有布局属性,可用于相对于面板边缘设置其尺寸和位置。显示的确切属性因微件的类型和您选择的选项而异,不过,它们全都属于如下四种基本类型之一:

类型 说明 属性
位置 位置属性决定了微件与父级微件的边缘之间应有的距离。位置属性旁边的复选框可用于停用这些属性。如果停用轴上的最后一个属性,则 Google 应用制作工具会自动启用相反的属性。 topbottomleftright
绝对尺寸 绝对尺寸属性将决定微件的尺寸,除非已启用相应的自动尺寸属性。尺寸属性旁边的复选框用于停用它们。如果停用绝对尺寸属性,那么微件的尺寸将改由该轴的位置属性来决定。 widthheight
自动尺寸 自动尺寸属性会根据微件的内容自动调整其尺寸。此属性仅适用于部分类型的微件,并且仅当您未停用相应的绝对尺寸属性时才可用。 autoWidthautoHeight
尺寸限制 尺寸限制属性可对已自动调整尺寸和已停用的绝对尺寸轴设置最大和最小尺寸限制。针对某个维度,输入一个值即可设置允许的最大或最小微件尺寸。 minWidthmaxWidthminHeightmaxHeight

流动面板布局属性

垂直和水平面板中的微件也具有可控制其尺寸和位置的布局属性,但用于控制位置的选项要比固定面板中的少得多。流动面板属性可分为两列:水平和垂直。每列均控制其各自所在的轴。

类型 说明 属性
尺寸 尺寸用于控制如何针对每个轴设置微件的尺寸。可选项包括 fixedfit to contentfill parent size
绝对尺寸 绝对尺寸属性决定了当微件的 size 属性为 fixed 时的尺寸。 widthheight
尺寸限制 限制属性可在微件的 size 属性为 fit to contentfill parent 时设置其最大和最小尺寸限制。 minWidthmaxWidthminHeightmaxHeight
对齐 对齐用于控制面板的非流动轴的位置。它决定了微件在水平面板中的垂直对齐方式以及在垂直面板中的水平对齐方式。 align

间距

使用间距可控制各个微件的外边距和内边距

类型 说明 属性
外边距 用于定义微件边缘与页面上临近的对象之间的距离。 margin topmargin bottommargin leftmargin right
内边距 用于控制微件的内容与其边缘之间的距离。 padding toppadding bottompadding leftpadding right

流动属性

与固定面板不同,流动面板中的大部分微件定位都发生在面板级别。要定位流入微件,请使用父级面板的流动组中的属性:

属性 说明
wrap 此属性可控制面板如何排列微件(避免其宽于流动轴宽度)。
justify 此属性可控制面板如何沿其流动轴排列微件。
alignChidren 此属性可控制面板如何沿其非流动轴排列微件。
wrapAlign 此属性可控制面板如何在 wrap 属性启用的情况下排列过宽的微件。

尺寸属性

尺寸属性组将布局组中的所有尺寸属性作为常规属性列出。这使您能够对属性进行数据绑定,以便动态地更改它们的值。此组中的属性均可以同步修改,从而允许您设置相互冲突的值。例如,您可以将 leftrightwidth 值设置为不兼容的数字。Google 应用制作工具并不能保证互相冲突的尺寸属性具有一致的行为。

概览

画布右侧的“概览”标签页允许您锁定 或隐藏 微件。锁定的微件在画布上无法进行选择,可防止您意外移动它们。隐藏的微件不会呈现在画布上,这样您就可以与原本位于隐藏的微件下面的微件进行交互。隐藏的微件仍会显示在应用的运行时中。如需重新放置或修改已锁定或隐藏的微件,请从“概览”中选择其名称。