UI布局系统推出后可能有很多人不大明白中间的原理，今天用一个小示例来讲一下这个布局系统改如何使用。
-----------1.3版本新增-------------
注意：在cocostudio1.3.0.0版本中提供了“自适应分辨率选项”，该属性将会在程序解析数据时自动将该画布的节点大小设置为屏幕的大小。
如果您需要使用布局，记得将该画布勾选此属性。
在1.3.0.0版本之前需要您手动设置画布根节点的大小。
布局系统有什么？
在布局系统里有两个是比较重要的概念，一个是“相对布局”，另一个是“百分比”，通过相对布局和百分比的组合就能够使一个项目适应更多的分辨率。为了大家能够清楚的了解这两个概念我们将两个部分开发讲解。
示例工程下载： UI_AutoLayout.zip (303 KB)
我们选用编辑器提供的素材来讲这个布局的应用。我们先在UI编辑器的启动页面选择“DemoShop”，点击创建一个拷贝。这个项目我们只是使用它的资源，所以重启开启编辑器并创建一个新的项目。然后将刚才的resource文件夹内的内容全部拖动到新建项目的资源区内。
百分比：
在开始之前我们先将根节点设置为相对布局模式。（这个根节点是编辑器默认提供的，但模式是绝对布局）
因为这个界面控件比较多，我们只做主体部分，细节部分不做赘述。
首先是背景，将一个“图片”（命名为back）拖到渲染区，然后修改属性:
1:选择尺寸的模式为“custom”，勾选尺寸百分比模式。并将比例设置为（1.00,1.00）即根节点的100%。
2:将控件布局设置为停靠父节点（默认是父节点，可选的是父节点和同级节点）；并选择横向/纵向居中对齐。
3：这时候回来可以看到当前的背景图已经全屏显示了。
如果大家想看在不同分辨率下的效果，可以将画布大小切换。（这里有个有待优化的地方,换完屏幕大小并不能及时刷新数据，我们可以将尺寸比例先调大再调回来，当然其他属性也是可以的）
相对布局
下面实现两个装备区，这两个装备区panel来管理。（开始写教程的时候用的ScrollView，但是快结束的时候发现ScrollView有个滚动区域是个不支持百分比的，导致里面的东西并不能实现分辨率自适应，预计发布1.2.0.0版本的时候就可以修复这个问题了）
拖动两个层容器作为背景图片的子控件，修改尺寸比例使两个控件显示合适的大小，位置也是设置百分比。（都用比例模式）
我们将左边的层容器（Panel）的子控件布局模式设置为相对布局，右边的设置为纵向线性布局。（目前只有（panel）和(scrollview)能设置子控件布局，其他的控件的子控件布局仍然只有绝对布局模式。）
这里的每个装备都是很类似的东西，我们先做一个模板(注意要将里面的控件大小都设置为使用比例模式，否则外框被放大了，而内容却很小)，然后复制到panel_left里面。
这个模板的东西是都放在同一个image内的，你这里可以将它当做一个整体来处理。
直接Ctrl+C、Ctrl+V复制几个并分别放到两个ScrollView里大概放置好位置。如下图：
<img title = '0005.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_48/48_183396_928443ab47f49ee.png' >
下面将左边的panel_left设置为相对布局，然后看一下对象列表，我们这里将左上角的作为一个标准位置，其余控件都是相对这个panel_left作为标准位置（即相对这个控件而不再是父节点）
在panel_left这个层做相对同级子控件的布局，就必须有一个子控件作为参考目标，这个目标必须是相对于父控件的坐标。在这里就是将P_L1设置为相对父控件向左对齐，顶端对齐：（注释：因为我截图版本的原因，纵向对齐显示的纵向布局，1.2.0.0版本将会统一为对齐）
下面是P_L2的布局设置： （停靠在P_L1，停靠边界是右边；还有向左像10素的边缘；因为大小都一样所以对齐忽略掉）
再看下P_L3的：
（停靠在P_L1，停靠边界是下边；还有向上的47像素的边缘；因为大小都一样所以对齐忽略掉）
P_L4/5/6也同理布局，分别是P_L4/5向P_L3对齐，P_L6向P_L4对齐。最终效果如下图：
下面修改右边的滚动层，这里我用线性布局来处理。
将Panel_right子控件布局修改为纵向线性布局模式：
然后将子控件统一设置居中，这里的居中是相对父控件的。边缘可以向上做10个像素的间隔。看下显示效果：
每一个子栏目都会居中对齐，且中间间隔都为10 ，当然如果你的控件真的如同这样的话可以考虑使用ListView，在1.2.0.0版本新加了ListView控件，这个列表型将会变得更加简单。
小结
我想上面的示例大家应该对布局系统有一定的了解了，简单的说是靠相对布局和百分比的组合。相对布局是绑定各个控件之间的关系，只要作为被停靠的阶段能够确定位置，那么其余的控件都将能够找到自己所在的位置。百分比则可以自由的控制一个控件的大小，能让他跟随屏幕的大小来自适应。
----------2014/01/14-----------大家注意“back”背景层应该是相对布局模式，且开启尺寸大小百分比模式。百分比尺寸是和父节点直接相关联的，任何一个父级没有跟随它的上一个父级，那么这个父级就具有绝对的大小，它的子控件也同样是具有的同样的固定的大小。所以尺寸的百分比模式具有不可中断性。
公司做的demo我全用绝对布局了。。。这下麻烦了