1、概述

上一篇我们在编辑器中设计了一个静态的UIScrollView，而通常我们都需要在程序中动态增加信息。插入元素的位置怎么确定？在3.0中UILayout已经实现了基本的布局，一起来看看吧：

2、编辑界面

打开CocoStudio的UIEditor 编辑一个界面，创建一个ScrollView和两个Button。因为ScrollView继承自UILayout，这里我们采用它。不太能搞定的童鞋可参考：Cocos2d-x 3.0 开发（十四）使用UIScrollView 实现大小不同物品拖动展示

注意此处ScrollView子控件布局中，我们选择“线性纵向”，并且在“特性->滑动方向”也选择为“vertical”。编辑好后保存导出。

3、关联程序

运行脚本，创建一个testLayout程序，将导出的文件复制到Resource目录下。

声明一个UILayout:

[cpp] view plaincopyprint?

1. #include "gui\CocosGUI.h"
2. private:
3. gui::UILayout* m_layout;

更改init:

[cpp] view plaincopyprint?

1. bool HelloWorld::init()
2. {
3. //////////////////////////////
4. // 1. super init first
5. if ( !Layer::init() )
6. {
7. return false;
8. }
9. Size visibleSize = Director::getInstance()->getVisibleSize();
10. Point origin = Director::getInstance()->getVisibleOrigin();
11. //Load Layout
12. m_layout = dynamic_cast<UILayout*>(cocostudio::GUIReader::shareReader()->widgetFromJsonFile("testLayout.json"));
13. auto layer = UILayer::create();
14. layer->addWidget(m_layout);
15. this->addChild(layer);
16. //set button react
17. UIButton* buttonA = dynamic_cast<UIButton*>(m_layout->getChildByName("TextButtonA"));
18. buttonA->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));
19. UIButton* buttonB = dynamic_cast<UIButton*>(m_layout->getChildByName("TextButtonB"));
20. buttonB->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));
21. return true;
22. }

添加一个响应函数

[cpp] view plaincopyprint?

1. void HelloWorld::touchButton(cocos2d::Object* obj,TouchEventType type)
2. {
3. if(type == TOUCH_EVENT_ENDED)
4. {
5. auto button = dynamic_cast<UIButton*>(obj);
6. if(strcmp(button->getName(),"TextButtonA") == 0)
7. {
8. //add element on left
9. addLeft();
10. }
11. else
12. {
13. //add element on right
14. addRight();
15. }
16. }
17. }

编译运行，可以看到如下界面：

4、添加控件

实现addLeft() 和addRight():

[cpp] view plaincopyprint?

1. void HelloWorld::addLeft()
2. {
3. auto layoutParameter = UILinearLayoutParameter::create();
4. layoutParameter->setGravity(UILinearGravity::LINEAR_GRAVITY_LEFT);
5. auto scrollView = ((UIScrollView*)m_layout->getChildByName("ScrollView"));
6. UIWidget*  widget = makeWords();
7. widget->setLayoutParameter(layoutParameter);
8. scrollView->addChild(widget);
9. scrollView->doLayout();
10. }
11. void HelloWorld::addRight()
12. {
13. auto layoutParameter = UILinearLayoutParameter::create();
14. layoutParameter->setGravity(UILinearGravity::LINEAR_GRAVITY_RIGHT);
15. auto scrollView = ((UIScrollView*)m_layout->getChildByName("ScrollView"));
16. UIWidget*  widget = makeWords();
17. widget->setLayoutParameter(layoutParameter);
18. widget->setColor(Color3B(0,255,0));
19. scrollView->addChild(widget);
20. scrollView->doLayout();
21. }
22. gui::UIWidget* HelloWorld::makeWords()
23. {
24. UIButton* button = UIButton::create();
25. button->loadTextureNormal("button.png");
26. button->setTitleText("Hello UILayout \n I‘m Cocos2d-x");
27. button->setTitleColor(Color3B(0,0,0));
28. return button;
29. }

使用重写的addChild来添加子控件。通过调整它的UILinearLayoutParameter来控制控件的显示位置。

要注意的一点是，在UIScrollView中添加子控件后，要调用doLayout这个函数整理子控件的位置。

最后编译运行即可。

5、总结

使用UILayout进行布局，可以方便的控制动态添加元素的位置。

Demo 下载：http://download.csdn.net/detail/fansongy/6730481

本篇博客出自阿修罗道，转载请注明出处，禁止用于商业用途：http://blog.csdn.net/fansongy/article/details/17382049