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是最基本的容器类。在后面的例子中，它是场景居中的白色区域

 
         localpanel=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设置为水平模式

 
         panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

添加三个子级图片

 
         for 
         i=1,3 
         do 
        
         localimg=ImageView:create() 
        
         img:loadTexture( 
         "40.png" 
         ) 
        
         panel:addChild(img) 
        
         img:setPosition(ccp(40*i,40*i)) 
        
         end

效果如图：

UILayout水平布局

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

 
         panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

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

UILayout从垂直布局

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

 
         panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

UILayout相对布局

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

 
         panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

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

 
         localimg=ImageView:create() 
        
         img:loadTexture( 
         "40.png" 
         ) 
        
         locallayoutParam=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。造成类型不匹配报错。

此问题有两种解法：

回避掉代码书写的方式，直接用CocoStudio的UI编辑器来设置好相对坐标
理解typedef枚举的转换方式。

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

相关文章

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