使用XML配置页面 – 源码巴士

嵌套关系

XML现在可以支持嵌套。嵌套后得到的节点拥有父子关系，即和代码中的addChild()效果是一样的。

<node name="background" type="CCSprite">
     <src img="common_bg.png"/>
          <anchor x=0.5 y=0.5 />
          <pos x=640.0 y=360.0/>

          <node name="coin" type="CCSprite">
               <src img="coin.png"/>
               <anchor x=0.0 y=0.0 />
               <pos x=10.0 y=10.0/>
          </node>
     </node>
</node>

在上面的例子中，coin被添加为background的子节点。此时coin的position是相对于父节点的位置。以上面的配置来看，coin的锚点是左下角，而位置为ccp(10.0, 10.0)，配置的结果便是coin的左下角位于background内部(10.0, 10.0)的位置。

按钮同样可以嵌套。在实际开发中，经常遇到按钮的背景是通用的，需要为每个按钮单独添加一个Label。现在可以这样:

<node name="action_menu" type="CCMenu">
     <!--不叫 -->
     <node name="action_call_0" type="CCMenuItemSprite">
          <src img="cmn_btn_y.png" />
          <anchor x=0.5 y=0.0 />
          <pos x=820.0 y=0.0 />

          <!— 嵌套的文字，被加入到"action_call_0"中 -->
          <node name="label_call_0" type="CCLabelTTF">
               <text str="不叫" />
               <font name="ArialMT" size=24 smallSize=30/>
               <pos xRatio=0.5 yRatio=0.5/>
          </node>

     </node>
</node>

在上面的例子中，按钮的normalImage只是一张通用的图片，在按钮节点的内部又添加了CCLabelTTF节点，相当于button->addChild(label)。注意Label设置的pos属性使用了xRatio、yRatio字段，表示其位置在父节点中的位置（详见《位置（Position）》章节），此例均为0.5，表示位置居按钮图片中间。

属性设置

属性的设置方式基本类似。在现行的XML配置中，有的属性（如颜色）提供了不止一种设置方法，有的属性（如位置）需要更多的配置项以适用不同分辨率的需要。现整理如下：

颜色（RGBA）

以上三种方式均可设置颜色，property可设置多次，但color只会检测一次。
每个设置项均为选配，推荐任何情况下只使用一种设置方式。

位置（Position）

<pos x=100 y=100 />	绝对定位，数值除以XScaleFactor 或 YScaleFactor。
<pos xInner=100 yInner=100 />	相对定位，数值除以MaxScaleFactor。
<pos xRatio=0.5 yRatio=0.5 />	相对定位，数值表示在父节点的contentSize内的位置。

定位有三种方式。

第一种 x & y，用于绝对定位，也可认为是相对屏幕的定位，效果相当于x、y数值分别除以XScaleFactor和YScaleFactor。
第二种 xInner & yInner，用于相对定位，效果相当于数值除以MaxScaleFactor。大部分情况下适用于小元素相对某个背景的定位。
第三种 xRatio & yRatio，用于相对定位。这两个值考虑了父节点的大小（contentSize），效果相当于数值分别乘以父节点的宽高。

需要注意：
1. xRatio & yRatio配合嵌套、锚点的使用可以很方便的定位元素（如标题在背景上的位置）；

2. 每个节点可以设置多个<pos /> ，前后设置的效果可以叠加，例如：

<node name="man_win_nm" type="CCSprite">
     <src img="win_nm.png"/>
     <anchor x=0.5 y=0.0 />
     <pos xRatio=0.5 />
     <pos xInner=300.0 yInner=140.0 />
</node>

上面的代码中，CCSprite初始化时的默认坐标为(0, 0)，解析第一个<pos xRatio=0.5 />，将横坐标设置为父节点大小的一半，即水平居中。然后解析第二个<pos xInner=300.0 yInner=140.0 />，在当前坐标的基础上，横坐标增加了 300.0/MaxScaleFactor，纵坐标增加了140.0/MaxScaleFactor；

3. 横纵坐标的设置项是独立的，即可以在一个<pos>标签中可同时设置一个xRatio和一个yInner，但不建议一个标签内设置多个相同坐标项。像这样：

<pos xRatio=0.5 xInner=300.0 />

不建议这样使用，会造成不可知的结果。

其他属性

<anchor x=0.5 y=0.5 />	设置锚点（Anchor）
<property rotation=90 />	设置旋转（Rotation）
<scale scale=1.2 /> <scale x=1.2 y=1.5 />	设置缩放（Scale）建议同一节点不要同时使用两种设置
<property visible="false" />	设置visible属性"true" or "false"
<property zOrder=1 />	设置显示zOrder
<src img="test.png" />	设置CCSprite、TyNetSprite、CCScale9Sprite以及CCMenuItemSprite的默认图片

文字（CCLabelTTF & CCLabelBMFont）

<text str=""/>	设置文字
<font name="ArialMT" size=24 smallSize=30/>	CCLabelTTF设置字体以及字号（小屏字号）
<font name="Digital-Yellow-44.fnt" smallname="Digital-Yellow-30.fnt" />	CCLabelBMFont设置字体及小屏字体（不能选择字号）

9宫格图（Scale9Sprite）

<insetRect x=90 y=90 w=50 h=50 />	设置Scale9Sprite资源的insetRect
<size w=900 h=540 />	设置Scale9Sprite拉伸后的大小w & h均除以MaxScaleFactor

按钮（CCMenuItemSprite）

<property enable="false" tag=1 />	设置按钮的使用状态，以及tag值。
<property callback="" />	只针对GamePopLayerCenter内的按钮，主要用于配置按钮回调（类js字符串）。
<src normal="" selected="" disable="" />	配置按钮各个状态的图片注意不要和<src img=“” />混合使用。

网络精灵（TyNetSprite）

设置TyNetSprite下载的图片，下载完成前会显示img配置的本地图片。

最后需要注意的一些细节

当需要配置多个<property/>时，可以将多个配置项写在一个里，例如：

<property  visible="false" enable="false" tag=2 />

当然，也可以写多个<property/>。
然而除<property/>之外，其他的配置项如<src />, <pos />, <anchor />等则只能存在一个。

原文链接：https://blog.csdn.net/sunshinebalabala/article/details/17628423