【教程】布局系统使用简介

这篇大家的放映不太好,我重写了一篇:
http://www.cocoachina.com/bbs/read.php?tid-288123.html

布局系统(2.1beta起支持)

为了方便大家在将程序发布到不同分辨率的设备上时可以更方便地得到更好的显示效果。CocosStudio新增了自适应布局方面的支持。
下图演示了在使用了布局功能后,切换不同分辨率时,各个控件的位置变化。


图1
如上图所示,当调整场景分辨率时,图中的所有控件都能够自动调整位置和尺寸信息,使界面在不同分辨率下一直保持比较好的显示效果。

怎么做到的呢?
新的布局功能的精髓就在这么个控件属性工具里头:

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

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

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

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

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

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

1.先不管布局工具,将各个控件码放好。
(中间是一个PageView里头使用了3个page。)

2.为周围8个按钮设置固定到对应的边角上:
如左上角的按钮则开启左、上两个图钉。

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

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

3.为中间的PageView开启所有四个图钉。
开启后PageView的大小与父控件四边距离两两保持比例。(当前情况下,PageView被固定在屏幕正中)

4.开启PageView的横向拉伸条。
开启后,PageView的宽度与父控件宽度成固定比例,当父控件大小改变时,PageView的宽度也会跟着变化,但高度不变。

5.类似的,修改PageView中的子控件。完成。
然后,我们就可以通过修改左上角的分辨率来观察到图1的效果啦。

注意:
1.控件的位置布局是与锚点无关的。
2.控件默认与右下角固定。
3.基础对象(精灵、节点、图片地图等)不支持布局,需要套一个容器或者放到其他支持布局的控件上来进行布局支持。好吧支持了。
4.程序中,直接加载出来的是Node,Reader会给Node设置尺寸。但目前没有自动根据设备尺寸来调整Node的尺寸(以后会支持),所以需要程序手动获取设备尺寸再去设置加载出来的Node的尺寸大小。
具体代码:
auto node = CSLoader::createNode(“xxxx.csb”)
Size frameSize = Director::getInstance()->getVisibleSize();
node->setContentSize(frameSize);
ui::Helper::doLayout(node);

5.注意适配是根据你在程序中设置的设计分辨率来的,因此对于程序童鞋,可能还需要阅读下这篇教程:
http://cn.cocos2d-x.org/tutorial/show?id=1366

2.1啥时候出呢,等着用捏。。

我试了一下,图片控件有布局选项啊,而且把图片作为子控件放在容器下面,容器打开布局,图片控件也不会跟着容器的拉伸产生变化啊…

刚试用了下,发现一个问题,就是创建的Scene和Layer文件的根节点无法设置布局。这样的话我创建的Scene文件就没有办法设置成充满屏幕了,根节点不能充满屏幕的话里面的子节点就没有办法根据屏幕大小做UI布局了。

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

抱歉,图片是支持的,我写错了。 @xuechao8584

我试了一下精灵也支持啊,而且能说一下锁定长宽比的等比缩放效果如何实现吗?还是现在实现不了?否则针对4:3和16:9这两种尺寸要如何适配呢…更何况在安卓上各色奇葩长宽比

你的名字是非法字符,完全回复不了好吗

为毛呢…只是汉语拼音啊…不过大哥还是想说说锁定长宽比的问题的吧…我人肉刷新这看

node在加载的时候子节点就已经根据父节点进行布局了,等node加载完再修改大小的话子节点的位置不会刷新,就达不到想要的效果了,这个目前有木有什么办法解决。

— Begin quote from ____

引用第9楼liuxiaoyi135于2015-01-05 16:17发表的 回 4楼(东扬冬阳) 的帖子 :
node在加载的时候子节点就已经根据父节点进行布局了,等node加载完再修改大小的话子节点的位置不会刷新,就达不到想要的效果了,这个目前有木有什么办法解决。 http://www.cocoachina.com/bbs/job.php?action=topost&tid=280071&pid=1213848

— End quote

同问

fnt字体有问题呀,fnt文件是红色的是什么意思,而且无法给fnt控件设置字体。。

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

fnt红色说明这个fnt字体有问题

位置按百分比设置的没起作用。。

已这样设置了 没有用

var csbNode = ccs.csLoader.createNode(“res/sd/Layer.csb”);
var size = Utils.GetWinSize();
cc.log(“size” + JSON.stringify(size));
csbNode.setContentSize(size);
ccui.Helper.doLayout(csbNode);

this.addChild(csbNode,100);
cc.log("csbNode======size= " + JSON.stringify(csbNode.getContentSize()));

毫无变化

来个截图?
来个工程?

你看下 分别是 cocostdio 的 和 Xcode的模拟器的

这个 4 的尺寸