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