为了方便大家在将程序发布到不同分辨率的设备上时可以更方便地得到更好的显示效果。Cocos Studio新增了自适应布局方面的支持。

下图演示了在使用了布局功能后，切换不同分辨率时，各个控件的位置变化。

图1

如上图所示，在调整分辨率时，图中的所有控件都能够自动改变。中间的PageView还能根据屏幕大小自动调整尺寸(竖向大小固定，横向大小与屏幕宽度成固定比例)。

怎么做到的呢?

新的布局功能的精髓就在这么个控件属性工具里头：

图2

通过开关这个工具上下左右四个图钉和中间的两个拉伸条，就能实现图1的效果。

对于图钉：

当开启图钉中的任意一个时，控件会被固定到父控件相对应的边上，改变父控件大小时，控件与该边的距离总是固定不变的。

当开启任意两个相对的图钉时，控件就被固定到父控件相对应的两条边上，改变父控件大小时，控件与对应的两条边的距离的总是比例固定不变。

默认情况下，控件相对左下角位置固定不变

对于拉伸条：

开启任意一个拉伸条时，控件对应方向的大小(宽度、高度)固定与父控件的宽度、大小成比例。

示例

让我们一起来实现图1所示的结果吧：

1. 先不管布局工具，将各个控件码放好。

(中间是一个PageView里头使用了3个page。)

2. 为周围8个按钮设置固定到对应的边角上：

如左上角的按钮则开启左、上两个图钉。

正上方的按钮则开启左、右、上三个图钉。

按此规则依次设置所有按钮。

3.为中间的PageView开启所有四个图钉。

开启后PageView的大小与父控件四边距离两两保持比例。(当前情况下，PageView被固定在屏幕正中)

4.开启PageView的横向拉伸条。

开启后，PageView的宽度与父控件宽度成固定比例，当父控件大小改变时，PageView的宽度也会跟着变化，但高度不变。

5.类似的，修改PageView中的子控件，完成。

然后，我们就可以通过修改左上角的分辨率来观察到图1的效果啦。

注意：

1.控件的位置布局是与锚点无关的。

2.控件默认与右下角固定。

3.程序中，直接加载出来的是Node，Reader会给Node设置尺寸。但目前没有自动根据设备尺寸来调整Node的尺寸(以后会支持)，所以需要程序手动获取设备尺寸再去设置加载出来的Node的尺寸大小。

具体代码：

1

2

3

4auto node = CSLoader::createNode("xxxx.csb")

Size frameSize = Director::getInstance()->getVisibleSize();

node->setContentSize(frameSize);

ui::Helper::doLayout(node);