青瓷引擎表格布局番外篇之水平与垂直布局

文章中心 -> 软件使用

水平布局(HorizontalLayout)和垂直布局(VerticalLayout)是从表格布局(TableLayout)中拓展出来的两种特列。用于对子节点进行水平或者垂直布局管理。下文，绿盟小编整理了一篇「青瓷引擎表格布局
番外篇之水平与垂直布局」为您讲解其中奥秘！

尺寸提供方式(SizeProvider)

这个属性与表格布局的意义相同。
子节点的大小计算规则

在这两种布局中，子节点的大小会根据设置进行变化。布局器会对每个子节点生成一组默认值：

最小宽（高）度：默认为0。
最佳宽（高）度：默认为图形的实际数值，对于九宫格图形而言是原始图片的大小。
可拓展的宽（高）度：默认为0.

在计算子节点的大小时，按以下规则进行计算：

1.当节点的宽（高）小于或者等于所有子节点最小宽（高）之和时，设置每个子节点的宽（高）的值为最小值。
children[n].width = minWidth[n];
// 或者
children[n].height = minHeight[n];

2.当节点的宽（高）小于或者等于所有子节点的最佳宽（高）之和时，将超出最小宽（高）之和的多余部分，以最佳宽（高）为权重进行分配。
children[n].width = minWidth[n] + (node.width - totalMinWidth) * preferredWidth[n] / totalPreferredWidth;
// 或者
children[n].height = minHeight[n] + (node.height - totalMinHeight) * preferredHeight[n] / totalPreferredHeight;

3.当节点的宽（高）大于所有子节点的最佳宽（高）之和时，将超出最佳宽（高）之和的多余部分，以可拓展的宽（高）为权重进行分配。
children[n].width = preferredWidth[n] + (node.width - totalPreferredWidth) * flexibleWidth[n] / totalFlexibleWidth;
// 或者
children[n].height = preferredHeight[n] + (node.height - totalPreferredHeight) * flexibleHeight[n];

如果需要手动设置这些值，可以在子节点上添加qc.LayoutElement脚本，来进行控制。
内容的对齐方式

相比表格布局，水平（垂直）布局，精简了内容对齐方式，只提供在当前布局方向上的对齐控制。

水平布局：

左边缘对齐(Left): 表格的左边与节点范围的左边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_LEFT;
水平居中对齐(Center): 表格的水平中点与节点范围的水平中点对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_CENTER;
右边缘对齐(Right): 表格的右边与节点范围的右边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_RIGHT;

垂直布局：

上边缘对齐(Top): 表格的上边与节点范围的上边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_LEFT;
垂直居中对齐(Middle): 表格的垂直中点与节点范围的垂直中点对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_MIDDLE_LEFT;
下边缘对齐(Bottom): 表格的下边与节点范围的下边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_BOTTOM_LEFT;
单元格的对齐方式

相比表格布局，水平（垂直）布局，精简了单元格对齐方式，只提供在当前布局方向的垂直相交方向上的对齐控制。

水平布局：

上边缘对齐(Top): 子节点的上边与单元格范围的上边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_LEFT;
垂直居中对齐(Middle): 子节点的垂直中点与单元格范围的垂直中点对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_MIDDLE_LEFT;
下边缘对齐(Bottom): 子节点的下边与单元格范围的下边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_BOTTOM_LEFT;

垂直布局：

左边缘对齐(Left): 子节点的左边与单元格范围的左边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_LEFT;
水平居中对齐(Center): 子节点的水平中点与单元格范围的水平中点对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_CENTER;
右边缘对齐(Right): 子节点的右边与单元格范围的右边对齐。
tableLayout.contentAlignment = qc.TableLayout.ALIGN_TOP_RIGHT;

强制拓展设置：

当强制拓展方向与布局方向垂直相交时，将所有子节点的宽（高）的值设置为本节点的宽（高）
当强制拓展方向与布局方向相同时，将所有子节点的默认的可拓展宽（高）设置为1，然后计算布局。
tableLayout.childForceExpandWidth = true;
tableLayout.childForceExpandHeight = true;

文章来自绿盟(xDowns.com)转载请注明来路。

上一篇文章：青瓷引擎如何进行表格布局青瓷引擎表格布局相关教程 []

· [图文] 青瓷引擎如何进行表格布局青瓷引擎表格布局相关教程
· 青瓷引擎如何利用布局组件来实现适配宽高比
· 青瓷引擎qc.Graphics几何绘图组件接口功能一览
· 青瓷引擎UI组件怎么用之Dom节点
· [图文] 青瓷引擎UI组件怎么用之瓦片地图
· [图文] 青瓷引擎UI组件怎么用之下拉框
· 青瓷引擎UI组件怎么用之输入框
· 青瓷引擎UI组件怎么用之滚动条与滚动视图
· 青瓷引擎UI组件怎么用之拉条篇
· [图文] 青瓷引擎UI组件怎么用之进度条

青瓷引擎 1.0.7 官网最新版 - HTML5小游戏开发工具

青瓷引擎表格布局番外篇之水平与垂直布局

文章正文

相关文章

相关软件