Quick-Cocos2d-x学习手册（二）： 纯Lua实现CocoStudioGUI布局

本文主要介绍如何用Lua创建CocoStudioGUI，并实现各种布局方式。

此文中，将用CocoStudio的UI编辑器制作、并能导入Cocos2d-x中使用的UI系统，称为CocoStudioGUI。以区别于Cocos2d-x中不完善的CC前缀UI系统。

就目前来说CocoStudioGUI当属所有Cocos UI系统中最佳的选择。

• 作为Cocos2d-x内置的完整UI系统，它必然有着最大的用户群体，可以认为它经受住了严格的测试；

• CocoStudioGUI可在编辑器中制作，这表示它的各属性已经在内部处理好依赖关系，任何的setter调用次序都不会有任何问题；

• 使用CocoStudioGUI的工作流，能得到最高的开发效率。

考虑到Quick框架仍然处于不稳定开发状态，但其中的Cocos2d-x部分确是较为稳定的。因此个人认为使用CocoStudioGUI要优于quick自己的一套cc.ui.*包。

此文的内容介于基本控件和高级容器控件之间，通过例子，讲解容器控件UILayout的布局方式。

布局方式是制作前端界面的关键。浮动控件，变长控件列表以及UI屏幕适应都与此有关。理解不清楚CocoStudio的布局方式，后面的事情会很难做 ，甚至造成前期UI返工。因此专门测试其玩法，我也会比较放心。

基础容器UILayout

首先要建立一个容器控件，UILayout是最基本的容器类。在后面的例子中，它是场景居中的白色区域

1

2

3

4

5

6

7

8

local panel = Layout:create()

panel:setAnchorPoint(CCPoint(0, 0))

panel:setPosition(CCPoint(80, 80))

panel:setSize(CCSize(480-160, 320-160))

panel:setBackGroundColorType(LAYOUT_COLOR_SOLID)

panel:setBackGroundColor(ccc3(240, 240, 240))

panel:setLayoutType(LAYOUT_ABSOLUTE)

uiLayer:addChild(panel)

UILayout绝对布局

确保上述UILayout设置为水平模式

1

panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

添加三个子级图片

1

2

3

4

5

6

for i=1,3 do

    local img = ImageView:create()

    img:loadTexture("40.png")

    panel:addChild(img)

    img:setPosition(ccp(40 * i, 40 * i))

end

效果如图：

UILayout水平布局

仅需修改panel:setLayoutType(…) 这行代码为

1

panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

大家会发现此时img:setPosition的调用变得不起作用了：

UILayout从垂直布局

和上面一样，只需修改panel的布局模式

1

panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

UILayout相对布局

首先将panel改为相对布局模式

1

panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

但是，在设置字控件的布局参数时遇到了问题

1

2

3

4

5

6

local img = ImageView:create() 

img:loadTexture("40.png") 

local layoutParam = UIRelativeLayoutParameter:create() 

layoutParam:setAlign(RELATIVE_ALIGN_PARENT_TOP_RIGHT) 

img:setLayoutParameter(layoutParam)   

panel:addChild(img)

layoutParam:setAlign(…) 参数需要时一个UIRelativeAlign（C++中被typedef过的枚举），但是实际的枚举项RELATIVE-ALIGN-PARENT-TOP-RIGHT已被tolua转换为一个number。造成类型不匹配报错。

此问题有两种解法：

1. 回避掉代码书写的方式，直接用CocoStudio的UI编辑器来设置好相对坐标

2. 理解typedef枚举的转换方式。

推荐阅读：

Quick-Cocos2d-x 生存手册（一）：游戏元素

来源网址：http://www.lolofinil.com/2014/07/09/icocos_02/#textlogo