龙图教育：Cocos2dx3.0使用UILayout布局,制作对话界面.doc

Cocos2dx-3.0使用UILayout布局，制作对话界面 1、概述 ? ? 上一篇我们在编辑器中设计了一个静态的UIScrollView，而通常我们都需要在程序中动态增加信息。插入元素的位置怎么确定？在3.0中UILayout已经实现了基本的布局，一起来看看吧： 2、编辑界面 ? ??打开CocoStudio的UIEditor 编辑一个界面，创建一个ScrollView和两个Button。因为ScrollView继承自UILayout，这里我们采用它。不太能搞定的童鞋可参考：Cocos2d-x 3.0 开发（十四）使用UIScrollView 实现大小不同物品拖动展示 ? ? ??注意此处ScrollView子控件布局中，我们选择“线性纵向”，并且在“特性-滑动方向”也选择为“vertical”。编辑好后保存导出。 ? 3、关联程序 ? ? 运行脚本，创建一个testLayout程序，将导出的文件复制到Resource目录下。 ? ? 声明一个UILayout: #include?gui\CocosGUI.h?? ?? private:?? ????gui::UILayout*?m_layout;?? ? ? 更改init: bool?HelloWorld::init()?? {?? ????//////////////////////////////?? ????//?1.?super?init?first?? ????if?(?!Layer::init()?)?? ????{?? ????????return?false;?? ????}?? ?????? ????Size?visibleSize?=?Director::getInstance()-getVisibleSize();?? ????Point?origin?=?Director::getInstance()-getVisibleOrigin();?? ?????? ????//Load?Layout?? ????m_layout?=?dynamic_castUILayout*(cocostudio::GUIReader::shareReader()-widgetFromJsonFile(testLayout.json));?? ????auto?layer?=?UILayer::create();?? ????layer-addWidget(m_layout);?? ????this-addChild(layer);?? ?????? ????//set?button?react?? ????UIButton*?buttonA?=?dynamic_castUIButton*(m_layout-getChildByName(TextButtonA));?? ????buttonA-addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));?? ????UIButton*?buttonB?=?dynamic_castUIButton*(m_layout-getChildByName(TextButtonB));?? ????buttonB-addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));?? ?? ?? ????return?true;?? }?? ? ? 添加一个响应函数 void?HelloWorld::touchButton(cocos2d::Object*?obj,TouchEventType?type)?? {?? ????if(type?==?TOUCH_EVENT_ENDED)?? ????{?? ????????auto?button?=?dynamic_castUIButton*(obj);?? ????????if(strcmp(button-getName(),TextButtonA)?==?0)?? ????????{?? ????????????//add?element?on?left?? ????????????addLeft();?? ????????}?? ????????else?? ????????{?? ????????????//add?element?on?right?? ????????????addRight();?? ????????}?? ????}?? }?? ? ? 编译运行，可以看到如下界面： 4、添加控件 ? ? 实现addLeft() 和addRight(): void?HelloWorld::addLeft()?