5_组件-界面布局

App Inventor移动应用开发

Transcript

1. College of Mathematics and Computer Science, Hunan Normal University 瞿绍军 湖南师范大学数学与计算机科学学院
2. College of Mathematics and Computer Science, Hunan Normal University 界面布局
3. College of Mathematics and Computer Science, Hunan Normal University 水平布局HorizontalArrangement
4. College of Mathematics and Computer Science, Hunan Normal University 水平布局HorizontalArrangement
5. College of Mathematics and Computer Science, Hunan Normal University  水平布局组件可以实现内部组件自左向右的水平排 列，在垂直方向上居中对齐。  如果水平布局组件的高度设置为“自动”，当水平布 局内部组件的高度均为“充满”时，水平布局组件的 实际高度由水平布局内部组件的高度经计算确定； 当内部组件设定了高度时，水平布局布局组件的高 度取决于内部最高的那个组件，当布局组件内部不 包含组件时，其高度为100。 水平布局HorizontalArrangement
6. College of Mathematics and Computer Science, Hunan Normal University  如果水平布局组件的高度设置为“像素”或百分比时 ，当内部组件的高度超过水平布局的高度时，内部 组件不能完全显示，如图按钮1组件未完全显示。 水平布局HorizontalArrangement
7. College of Mathematics and Computer Science, Hunan Normal University  如果水平布局组件的宽设置为“自动”，其实际宽 度为内部所有组件宽度之和；此时如果内部组件将 宽度设为“充满”，则视同设为“自动”。 水平布局HorizontalArrangement
8. College of Mathematics and Computer Science, Hunan Normal University  如果水平布局组件的宽度设置为“充满”或者某个 具体数值，当某些内部组件的宽度设为“充满”时 ，则这些组件的宽度将充满布局组件的剩余宽度， 如图按钮1。 水平布局HorizontalArrangement
9. College of Mathematics and Computer Science, Hunan Normal University 垂直布局VerticalArrangement
10. College of Mathematics and Computer Science, Hunan Normal University 垂直布局VerticalArrangement
11. College of Mathematics and Computer Science, Hunan Normal University  垂直布局组件可以实现内部组件自上而下的垂直排 列，最先加入的组件在顶部，后面的组件依次向下 排列。内部组件在水平方向上居左对齐。  如果布局组件宽度设为“自动”，则其实际宽度取 决于内部最宽的、宽度属性不为“充满”的组件的 宽度；如果内部组件宽度都设置为“充满”，则视 同设置为“自动”，布局组件的实际宽度经计算确 定；如果内部不包含任何组件，则其宽度为100。 垂直布局VerticalArrangement
12. College of Mathematics and Computer Science, Hunan Normal University  如果布局组件的高度属性设为“自动”，其实际高 度取决于内部组件高度的总和；此时如果内部组件 高度设为“充满”，则视同设为“自动”。  如果布局组件高度属性设为“充满”或某个固定值 ，则内部高度设为“充满”的组件将充满布局组件 的剩余高度。 垂直布局VerticalArrangement
13. College of Mathematics and Computer Science, Hunan Normal University 表格布局TableArrangement
14. College of Mathematics and Computer Science, Hunan Normal University 表格布局TableArrangement
15. College of Mathematics and Computer Science, Hunan Normal University  使内部组件按照表格方式排列。  在表格布局组件中，组件按照表格的行和列，即单 元格排列；如果多个组件占据同一个单元格，则只 有最后一个组件可见。  在行内，所有组件在垂直方向上居中对齐。 表格布局TableArrangement
16. College of Mathematics and Computer Science, Hunan Normal University  列的宽度取决于该列中最宽的组件；当内部组件宽 度设为“充满”时，视同设为“自动”； 同时，所 有组件也将同时充满整个列宽。  行的高度取决于该行内最高的、高度属性不等于“ 充满”的组件；如果行内所有组件的高度都设为“ 充满”，则视同设为“自动”，布局组件的高度经 计算确定。 表格布局TableArrangement