【MangoGUI控件系列教程】MangoGUI Tut02_Layout Format 使用到的UI界面布局文件格式

夜行的猫仔

MangoGUI与DxUT不同的是，所有的Layout数据都来自外部XML文件，在MagoGUI里定义了一个格式自我格式.frame的文件。.frame文件的实质是XML。大家可以直接用文本编辑器打开，看到其中的内容：

要了解MangoGUI  首先了解一下他的配置文件scene.xml的结构：

1. <?xml version="1.0" encoding="gb2312" standalone="yes" ?>
   
2. <MANGOGUI ID ='1' name ='Mango' x='0' y='10' width ='170' height='170' Texture ="./interface/dxutcontrols.png" codex = "./interface/Logoin.codex">
   
3.   <Button ID='101' name ="FullScreen" x='35' y='10' width ='135' height='45' >Toggle full screen</Button>
   
4.   <Button ID='102' name ="REF"        x='35' y='60' width ='135' height='45' >Toggle REF (F3)</Button>
   
5.   <Button ID='103' name ="changediv"  x='35' y='110' width ='135' height='45'>Change device (F2)</Button>
   
6. </MANGOGUI>
   

复制代码

<?xml version="1.0" encoding="gb2312" standalone="yes" ?>
第一句是版本声明，编码用gb2312是为了兼容汉字：

1. <MANGOGUI ID ='1'  name ='Mango' x='0' y='10' width ='170' height='170' Texture ="./interface/dxutcontrols.png" codex = "./interface/Logoin.codex">

复制代码

<MANGOGUI>标签是为了标注XML的专用性。在MangoGUI中每一个.Frame文件对应一个Sence，也可以理解为游戏中的一块虚拟场景，一个屏幕上可以同时绘制若干个Scene(建议一屏最好显示一个Scene)，每一个Scene又是一个容器，里面可以放置若干个窗口，至于到了窗口这一级大家就好理解了。其中的ID表示这个XML管辖的Scene的ID。 name表示该Scene的名字，后面分别是这个Scene的坐标和长宽；Texture 指的是这个Scene里面所有的控件使用到的纹理。codex指向的文件是一个.codex文件，这个文件中包含的是GUI控件的规则。这个在后面会详细介绍。

<Button>标签是一个按钮控件标示，后面分别定义了这个按钮的ID，name和外观尺寸。Toggle full screen是显示在按钮上的文字，如果用的是图片按钮这里可以为空。

运行MangoGUI的程序如果加载了如上例题的这个XML文件，那么就会在屏幕中显示如下图右上角位置的Toggle full screen 、Toggle REF (F3) 和Change device (F2) 三个按钮。