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

最新推荐文章于 2020-12-24 15:50:10 发布

转载最新推荐文章于 2020-12-24 15:50:10 发布 · 1.8k 阅读

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

52 篇文章

订阅专栏

本文介绍如何使用Lua创建CocoStudioGUI，并通过实例详细讲解容器控件UILayout的不同布局方式，包括绝对布局、水平布局、垂直布局及相对布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍如何用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)