• 界面布局组件
  • 绝对布局
    • 属性
    • 事件
    • 方法
  • 水平布局
    • 属性
    • 事件
    • 方法
  • 水平滚动条布局
    • 属性
    • 事件
    • 方法
  • 表格布局
    • 属性
    • 事件
    • 方法
  • 垂直布局
    • 属性
    • 事件
    • 方法
  • 垂直滚动条布局
    • 属性
    • 事件
    • 方法
    • 案例：实现底部导航栏固定的效果
    • 案例：布局方法几则
    • QA：能把一个图片放到另一个图片上层吗？

« 返回首页

界面布局组件

目录：

1. 绝对布局
2. 水平布局
3. 水平滚动条布局
4. 表格布局
5. 垂直布局
6. 垂直滚动条布局

拓展案例：

1. 案例：实现底部导航栏固定不随屏幕滑动的效果
2. 案例：布局方法几则
3. QA：能把一个图片放到另一个图片上层吗？

绝对布局

在绝对布局中的组件可以实现任意坐标显示。放入的组件会自动增加 ”Top“ 和 “Left” 属性，控制其显示的坐标位置。（v2.75版本新增组件）

属性

背景颜色

设置绝对布局的背景颜色，使用RGBA数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置绝对布局的垂直高度，以像素px为单位。

高度百分比

设置绝对布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置绝对布局背景图片路径。

可见性

设置绝对布局是否显示在屏幕上，值是真则绝对布局显示，假则隐藏。

宽度

设置绝对布局的水平宽度，以像素px为单位。

宽度百分比

设置绝对布局的水平宽度相对于屏幕宽度的百分比。

Left

指定该组件左边缘相对于绝对布局的位置。

Top

指定该组件顶部边缘相对于绝对布局的位置。

事件

无

方法

无

水平布局

使用水平布局组件来展示一组从左到右排列的组件，你可以在其中从左到右放置应该显示的组件。如果你想让组件显示在另一个上面，使用 垂直布局 代替。

在水平布局中，组件沿水平轴排列，垂直居中对齐。

• 如果水平布局的 高度 属性设置为自动，则实际布局的高度由布局中 未设置高度 属性为填充父级的最高的组件决定。

• 如果水平布局的 高度 属性设置为 自动，并且它仅包含 高度属性设置为填充父级 的组件，布局的实际高度是使用组件的自动高度计算的。

• 如果水平布局的 高度 属性设置为自动且其中没有任何组件，则 高度 将是 100%。

• 如果水平布局的 宽度 属性设置为自动，则实际布局的宽度由组件的宽度之和确定。

• 如果一个 水平布局 的 宽度 属性设置为 自动，任何组件宽度 属性设置为填充父级的，就类似它们自己的宽度设为自动。

• 如果水平布局的 宽度 属性设置为填充父级，将占用其他组件未占用的宽度。

属性

水平对齐

一个数字，用于表示水平布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果水平布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示水平布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果水平布局的高度是自动，则对齐方式无效。

背景颜色

设置水平布局的背景颜色，使用RGBA数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置水平布局的垂直高度，以像素px为单位。

高度百分比

设置水平布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置水平布局背景图片路径。

可见性

设置水平布局是否显示在屏幕上，值是真则水平布局显示，假则隐藏。

宽度

设置水平布局的水平宽度，以像素px为单位。

宽度百分比

设置水平布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

水平滚动条布局

一个格式化元素、用于放置应从左到右显示的组件。

如果你希望组件一个一个地显示，请使用 垂直滚动条布局。

这个版本是可滚动的。

属性

水平对齐

一个数字，用于表示水平滚动条布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果水平滚动条布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示水平滚动条布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果水平滚动条布局的高度是自动，则对齐方式无效。

背景颜色

设置水平滚动条布局的背景颜色，使用RGBA数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置水平滚动条布局的垂直高度，以像素px为单位。

高度百分比

设置水平滚动条布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置水平滚动条布局背景图片路径。

可见性

设置水平滚动条布局是否显示在屏幕上，值是真则水平滚动条布局显示，假则隐藏。

宽度

设置水平滚动条布局的水平宽度，以像素px为单位。

宽度百分比

设置水平滚动条布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

表格布局

使用表格排列组件，以表格方式显示一组组件。

• 该组件是一个格式化元素，你可以以表格形式在其中放置需要显示的组件。

• 在表格布局中，组件排列在行和列的网格中，每个单元格中可见的组件不超过一个。如果多个组件占据同一个单元格，则只有最后一个可见。

• 在每一行中，组件垂直居中对齐。

• 列的宽度由该列中最宽的组件确定。 计算列宽时，自动宽度用于 宽度 属性设置为 填充父级 的组件。但是，每个组件将始终填充其占据的列的整个宽度。

• 行的高度由该行中高度 属性未设置为 填充父级的最高的组件决定。如果行仅包含 高度 属性设置为 填充父级 的组件，则使用组件的自动高度计算行的高度。

属性

列数

确定表中的列数。

高度

设置表格布局的垂直高度，以像素px为单位。

高度百分比

设置表格布局的垂直高度相对于整个屏幕高度的百分比。

行数

确定表中的行数。

可见性

设置表格布局是否显示在屏幕上，值是真则表格布局显示，假则隐藏。

宽度

设置表格布局的水平宽度，以像素px为单位。

宽度百分比

设置表格布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

垂直布局

使用垂直布局组件来显示一组从上到下、左对齐的组件。该组件是一种格式设置元素，你可以在其中放置应逐个显示的组件。 第一个子组件存储在顶部，第二个子组件存储在其下面，依此类推。 如果你希望组件彼此相邻显示，请使用 水平布局。

在垂直布局中，组件沿垂直轴左对齐排列。

• 如果垂直布局的 宽度 属性设置为自动，则实际布局的宽度由布局中 未设置宽度 属性为填充父级的最宽的组件决定。

• 如果垂直布局的 宽度 属性设置为 自动，并且它仅包含 宽度属性设置为填充父级 的组件，布局的实际宽度是使用组件的自动宽度计算的。

• 如果垂直布局的 宽度 属性设置为自动且其中没有任何组件，则 宽度 将是 100%。

• 如果垂直布局的 高度 属性设置为自动，则实际布局的高度由组件的高度之和确定。

• 如果一个 垂直布局 的 高度 属性设置为 自动，任何组件高度 属性设置为填充父级的，就类似它们自己的高度设为自动。

• 如果垂直布局的 高度 属性设置为填充父级，将占用其他组件未占用的高度。

属性

水平对齐

一个数字，用于表示垂直布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果垂直布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示垂直布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果垂直布局的高度是自动，则对齐方式无效。

背景颜色

设置垂直布局的背景颜色，使用RGBA数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置垂直布局的垂直高度，以像素px为单位。

高度百分比

设置垂直布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置垂直布局背景图片路径。

可见性

设置垂直布局是否显示在屏幕上，值是真则垂直布局显示，假则隐藏。

宽度

设置垂直布局的水平宽度，以像素px为单位。

宽度百分比

设置垂直布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

垂直滚动条布局

一种格式元素，用于放置应逐个显示的组件。（第一个子组件在顶部，第二个子组件在其下面，依此类推）

如果希望相邻显示的组件，请改用 水平滚动条布局。

这个组件是可滚动的。

属性

水平对齐

一个数字，用于表示垂直滚动条布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果垂直滚动条布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示垂直滚动条布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果垂直滚动条布局的高度是自动，则对齐方式无效。

背景颜色

设置垂直滚动条布局的背景颜色，使用RGBA数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置垂直滚动条布局的垂直高度，以像素px为单位。

高度百分比

设置垂直滚动条布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置垂直滚动条布局背景图片路径。

可见性

设置垂直滚动条布局是否显示在屏幕上，值是真则垂直滚动条布局显示，假则隐藏。

宽度

设置垂直滚动条布局的水平宽度，以像素px为单位。

宽度百分比

设置垂直滚动条布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

案例：实现底部导航栏固定的效果

使用垂直滚动条布局组件实现，也是该组件的典型使用场景，界面的详细布局如下：

参考效果如下：

• demo程序下载：

  footer_fixed.aia

案例：布局方法几则

看图即可：

QA：能把一个图片放到另一个图片上层吗？

可以的，可参考如下场景：

1. 图像放布局中，布局设背景图片。

2. 图像精灵放画布，画布设背景。

3. 屏幕设背景图片，图像组件放上面。