标签：

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.   
3. private:  
4.     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.       
10.     Size visibleSize = Director::getInstance()->getVisibleSize();  
11.     Point origin = Director::getInstance()->getVisibleOrigin();  
12.       
13.     //Load Layout  
14.     m_layout = dynamic_cast<UILayout*>(cocostudio::GUIReader::shareReader()->widgetFromJsonFile("testLayout.json"));  
15.     auto layer = UILayer::create();  
16.     layer->addWidget(m_layout);  
17.     this->addChild(layer);  
18.       
19.     //set button react  
20.     UIButton* buttonA = dynamic_cast<UIButton*>(m_layout->getChildByName("TextButtonA"));  
21.     buttonA->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));  
22.     UIButton* buttonB = dynamic_cast<UIButton*>(m_layout->getChildByName("TextButtonB"));  
23.     buttonB->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));  
24.   
25.   
26.     return true;  
27. }  

    添加一个响应函数

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

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

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

    最后编译运行即可。

5、总结

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

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

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

实习小白：：(转) Cocos2d-x 3.0 开发（十五）使用UILayout布局，制作对话界面

标签：

原文地址：http://www.cnblogs.com/dudu580231/p/4983789.html