v1.1新功能教程——ui布局系统

Studio
#1

UI编辑器自发布以来一直算编辑器中用户最多的一个产品，所见即所得的可视化操作减少了程序员大量乏味枯燥重复的劳动。能为广大开发者提供服务是我们一直很欣慰的，可每每被问及适应多分辨率的问题我们都只能弱弱的说“缩放屏幕”又或“手动写代码”。
面对安卓平台各种各样的屏幕分辩率，如果说不停的手动来更新这些数据的话，那也太浪费广大用户的时间了。做最好的产品才是我们的理念。所以我们次版本就开始添加多分辨率自适应功能。

支持的内容：

目前我们提供的是百分比布局和相对布局。属性上主要体现在尺寸和位置和子控件布局三部分。
如图

1.png412×528

其中尺寸和坐标两步分是每一个控件任何条件下都有的属性。子控件布局则
稍复杂些，需要一定的条件。下面做详细的讲解.

尺寸：
想要对尺寸设置百分比，有两个前提要求：
1：开启尺寸百分比状态
2：模式修改为Custom

开启这两个状态后，我们再在渲染区中拖拽控件，记录的属性将是尺寸比例的两个值。

注意：
比例尺寸x/y和控件宽/高都会一直显示当然的状态值，但是最终保存到配置文件中的属性石尺寸比例。

布局：
对布局的修改和尺寸是类似的，但比尺寸要求少些。只需要勾选百分比即可，同理该组的值也会同时更新，若勾选百分比，保存的属性为比例，不勾选则为坐标x/y。

子控件布局：
子控件布局是针对层容器（UIPanel）和滚动层（UIScrollView），目前作为父控件最多的就是这两个容器。虽然两个的容器实现方式不同，但是提供的布局功能是相同的，如下图：

      <img title = '4.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_48/48_183396_b26ffa9773e1dbd.png' >

这个四个选项虽然是在层容器上设置的，但是影响的是子控件。
（注意：下面讲的四个布局都是在不调整边缘的情况下，下面四种模式下设置完了相当与设置了一个相对的起始点。边缘是配合这个起始点再次编辑位置信息的，相对普通模式下的位置，但是边缘的部分属性在不同状态下可能只有一部分起作用！）

一、绝对布局

绝对布局是默认布局，子控件的属性栏无明显变化。

二、相对布局

选择相对布局时，我们选择子控件可以看到布局这部分就有了明显变化。
停靠：我们可以针对每个控件设置相对的控件（即指定停靠的对象），默认情况下为父控件，我们可以选择同级的控件为停靠对象。
注意：自己和已将自己设为停靠的对象的控件将不能被设置为停靠对象。
选择不同类型的停靠对象，属性也有一定的不同.
如果停靠对象为父控件：

6.png842×337

此模式下都是相对父控件的对齐，两种模式下共能组合3*3中位置，如下图

如果停靠的为同级控件：

8.png850×351

这个模式下主要是停靠，分为上下左右，也就是分别在停靠对象的上下左右边上。
在左右两边时配套的时对齐是纵向对齐，上下两边是横向对齐。（对齐对象为停靠指定的对象!）

三、线性横向

9.png873×315

线性横向模式下所有的控件被根据添加顺序一个挨一个的拍成一行，然后可以单独对每一个设置纵向布局，这个属性是相对父控件的上中下。

四、线性纵向

10.png929×310

线性纵向模式下所有的控件被根据添加顺序一个挨一个的拍成一列，然后可以单独对每一个设置纵向布局，这个属性是相对父控件的左中右。

总结：
布局系统对于制作多分辨工程的作用是非常大的，但是它也是比较复杂的，需要多加练习才能熟练掌握，要想做到灵活控制更是需要细心观察。

#2

mark~ 期待已久的特性

#3

谢谢支持:14::14::14::14:

#4

很好，很强大，一直在用…

#5

程序中需要怎么才能使布局得到体现？比如960640的画布，放到1280720的设备中，放在画布最上方的按钮依然看不到踪影。
我自己适配采用的代码是这样的：
Size fs = eglView->getFrameSize();
float fw = fs.width;
float fh = fs.height;
const float dw = 960;
const float dh = 640;

float dl = (dw / dh);
float fl = (fw / fh);

if (dl>fl){
    //eglView->setDesignResolutionSize(dh*(fw / fh), dh, ResolutionPolicy::FIXED_HEIGHT);
}
else{
    eglView->setDesignResolutionSize(dw, dw*(fh / fw), ResolutionPolicy::FIXED_WIDTH);
    //eglView->setDesignResolutionSize(dw, dw*(fh / fw), ResolutionPolicy::NO_BORDER);
}
#6

请问楼主，相对布局需要的cocos2d-x的版本是多少？我们目前是2.2,2.2支持相对布局么

#7

fuck，又要升级版本，

#8

呵呵，貌似你们这个相对布局没有什么用，如果我设置了父节点panel的大小，相对布局是相对父节点的大小来设置位置的，

在程序种是根据父节点的大小来相对适配的，

在缩放的时候，也是根据这个父节点的大小来相对适配的，达不到缩放时候真正的相对布局的效果，比我我android手机屏幕1280720，UI设计也是1280720，把布局搞成相对布局，在带有软键盘的anddroid手机上，实际的View大小只有1196720，然后根据高度缩放，结果就是，右边一部分的相对布局还是会出现在屏幕外边，原因是我把父节点画布大小
设计为1280720.，在代码设置位置中还是1280720，而不是1196720，直接导致的结果就是缩放相对位置不是根据手机屏幕的实际显示的View尺寸来缩放的

#9

这是你们的一个bug?，快点解决吧，目前自己的解决办法：

UIWidget* example_root = GUIReader::shareReader()->widgetFromJsonFile("gameOver.json");
UIPanel *panel  = dynamic_cast<UIPanel*>(example_root->getChildByName("Panel"));
panel->setSize(visibleSize);/*手动重设根节点的panel的大小*/
UIPanel *panelBkg  = dynamic_cast<UIPanel*>(panel->getChildByName("Panel1"));
panelBkg->setSize(visibleSize);/*手动重设根节点的panel的大小*/
layerfff->addWidget(example_root);
#10

这样啊~ 楼上的方法我明天试试看

#11

需要cocos2d-x2.2.1，这个是2.2.1新增的功能。

#12

我要早点知道就好了！ 我也不用改来改去的了~~

#13

这个功能能不能来个例子啊。代码里不知道怎么写。

#14

我觉得场景编辑器里也应该加入 多分辨率支持 的功能。比如我想让一个ui组件居中，现在貌似只能在代码里控制。

#15

虽然没看懂7楼描述的问题，但8楼的代码的确有用。
比如我想让屏幕的四个角落都有一个按钮，只有 将根Panel的尺寸设置为visibleSize 才能在所有分辨率下都实现这个功能。

this._loginUILayer = this.getComponentNode(10005, “GUIComponent”);
this._panel = this._loginUILayer.getWidgetByName(“Panel”);
this._panel.setSize(cc.Director.getInstance().getVisibleSize());

设置为VisibleSize后还能解决我在13楼提的问题，hoho，不错！

#16

7楼的疑惑跟我一样，看来还需要手动调节一下Panel的Size了
话说现在的分辨率适配都不用DesignResolutio了么

#17

:8:，要早看见这个贴就好了！我尝试了一下午，才发现需要在程序中对panel重新setSize。坑。。。

#18

挺赞的功能。继续支持cocostudio！

希望楼主可以给个代码实例。是否如8楼所说的，要设置root panel的大小？

谢谢

#19

能不能新加一个自定义坐标体系的功能？有的时候做的项目跟这个坐标体系不一样的话就很麻烦了

#20

是的~:2::2: