Layout文件是CEGUI中至关重要的数据文件之一。你可以通过CEGUI的Layout编辑器来生成和编辑该文件,但是在本例中下面这个XML格式的 .layout 文件完全是手动编写出来的,实际上很简单。在Ogre的Debug文件夹下resource目录下有个压缩包是gui.zip,你在里面会发现一个文件叫”Katana.layout”,下面是该文件的全部内容:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
你在浏览这些代码的时候,首先可能发现里面那些神秘的数字。在CEGUI 0.5.x版本中,UI元件需要定义的是UI元件的绝对尺寸大小。而在这个layout文件中,我们使用的是统一的相对尺寸范围。Value =”” 中定义了元件的左,右,上,下点的位置。但这个位置我们既可以定义这些点的绝对位置,也可以是定义这些点针对其父容器UI元件的相对位置。例如,下面这个UI元件的区域定义:
{{0.4,0},{0.5,0},{0.6,0},{0.57,0}}
这些数值告诉了CEGUI,这个UI元件在其上一层元件容器中的相对位置和大小。
如本例,这个元件左上角将距离其上一层元件容器的左上角的右偏移距离为 (0.4 * 上一层元件容器宽度),这个元件左上角将距离其上一层元件容器的左上角的下偏移距离为 (0.5 * 上一层元件容器高度)。该UI元件宽度将为((0.6 – 0.4)* 上一层元件宽度 )大小,高度将为( (0.57 – 0.5) * 上一层元件告诉 )大小。
那么,那些参数中的”0”是什么意义呢?如果你想同时指定UI元件的绝对象素位置的话,可以把这些”0”替换为该元件的象素位置。所以这就意味着,你能够根据自己喜好,为UI元件设置相对坐标或者象素的绝对坐标。我想不起来指定象素绝对坐标时这些数值的意义,如果谁看到本例并且知道这些绝对坐标数值意义的话,请帮助补充到本文中。:)不过,如果谁是曾经做过网页的话,将会非常熟悉这些绝对坐标的意义和顺序,因为这俩完全是一个东西。
在上面的这个Layout文件中,第一行告诉CEGUI,我们想创建一个顶层的窗口”Main”,而且这个窗口大小是占满整个程序显示区----它的相对宽高是(1.0 - 0.0 )。我们不希望看到它的标题栏,也不希望看到这个顶层窗口右上边的关闭按钮和其边框。于是,下面我们设置他们的Value为false。(这三项是FrameWindow框架窗口默认存在的捆绑控件)。
接下来,我们在屏幕中放置三个按钮----这样的话,在我们运行程序的时候将会从上到下见到“Instant Action”“Options”“Quit”三个按钮。按钮控件的名称属性是非常重要的,这是我们在代码中获取该控件行为的唯一标识。