Cocos Studio的布局系统简介

为了让程序在发布到不同分辨率的设备上时能更便捷地呈现出良好的显示效果，Cocos Studio新增了自适应布局功能。

布局效果演示

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

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

布局功能实现原理

新布局功能的关键在于控件属性工具：

通过控制该工具上下左右四个图钉和中间的两个拉伸条，就能实现图1中的效果。下面详细介绍图钉和拉伸条的作用：

图钉

• 开启单个图钉：当开启图钉中的任意一个时，控件会被固定到父控件相对应的边上。在改变父控件大小时，控件与该边的距离始终保持固定。
• 开启两个相对图钉：当开启任意两个相对的图钉时，控件会被固定到父控件相对应的两条边上。改变父控件大小时，控件与对应的两条边的距离比例始终保持不变。
• 默认情况：默认情况下，控件相对左下角位置固定不变。

拉伸条

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

示例操作

下面我们来实现图1所示的布局效果，具体步骤如下：

1. 控件初始摆放：先不使用布局工具，将各个控件摆放好。中间是一个包含3个page的PageView。
2. 按钮布局设置：为周围8个按钮设置固定到对应的边角上。例如，左上角的按钮开启左、上两个图钉；正上方的按钮开启左、右、上三个图钉。按照此规则依次设置所有按钮。
3. PageView图钉设置：为中间的PageView开启所有四个图钉。开启后，PageView的大小与父控件四边距离两两保持比例，此时PageView会被固定在屏幕正中。
4. PageView拉伸条设置：开启PageView的横向拉伸条。开启后，PageView的宽度与父控件宽度成固定比例。当父控件大小改变时，PageView的宽度会随之变化，但高度保持不变。
5. 子控件修改：类似地，修改PageView中的子控件，完成布局设置。

完成上述步骤后，我们就可以通过修改左上角的分辨率来观察到图1的效果。

注意事项

1. 锚点无关性：控件的位置布局与锚点无关。
2. 默认固定位置：控件默认与右下角固定。
3. Node尺寸设置：在程序中，直接加载出来的是Node，Reader会给Node设置尺寸。但目前没有自动根据设备尺寸来调整Node的尺寸（后续版本会支持），所以需要程序手动获取设备尺寸，再去设置加载出来的Node的尺寸大小。具体代码如下：

   auto node = CSLoader::createNode("xxxx.csb");
   Size frameSize = Director::getInstance()->getVisibleSize();
   node->setContentSize(frameSize);
   ui::Helper::doLayout(node);