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

最新推荐文章于 2023-06-14 18:04:22 发布

linking530

最新推荐文章于 2023-06-14 18:04:22 发布

阅读量1.7k

点赞数

Quick-Cocos2d-x开发经验专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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

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

 
         panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

添加三个子级图片

 
         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(…) 这行代码为

 
         panel:setLayoutType(LAYOUT_LINEAR_HORIZONTAL)

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

UILayout从垂直布局

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

 
         panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

UILayout相对布局

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

 
         panel:setLayoutType(LAYOUT_LINEAR_VERTICAL)

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

 
         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)