内容发布更新时间 : 2024/5/3 11:55:52星期一 下面是文章的全部内容请认真阅读。

龙图教育：如何使用使用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(cocostudio::GUIReader::shareReader()->widgetFromJsonFile(\));

15. auto layer = UILayer::create(); 16. layer->addWidget(m_layout);

17. this->addChild(layer); 18.

19. //set button react

20. UIButton* buttonA = dynamic_cast(m_layout->getChildByName(\

xtButtonA\));

21. buttonA->addTouchEventListener(this,toucheventselector(HelloWorld::touch

Button));

22. UIButton* buttonB = dynamic_cast(m_layout->getChildByName(\

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(obj); if(strcmp(button->getName(),\) == 0) {

//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();