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_cast<UILayout*>(cocostudio::GUIReader::shareReader()->widgetFromJsonFile("testLayout.json"));
- auto layer = UILayer::create();
- layer->addWidget(m_layout);
- this->addChild(layer);
- //set button react
- UIButton* buttonA = dynamic_cast<UIButton*>(m_layout->getChildByName("TextButtonA"));
- buttonA->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));
- UIButton* buttonB = dynamic_cast<UIButton*>(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_cast<UIButton*>(obj);
- if(strcmp(button->getName(),"TextButtonA") == 0)
- {
- //add element on left
- addLeft();
- }
- else
- {
- //add element on right
- addRight();
- }
- }
- }
编译运行,可以看到如下界面:
4、添加控件
实现addLeft() 和addRight():
- void HelloWorld::addLeft()
- {
- auto layoutParameter = UILinearLayoutParameter::create();
- layoutParameter->setGravity(UILinearGravity::LINEAR_GRAVITY_LEFT);
- auto scrollView = ((UIScrollView*)m_layout->getChildByName("ScrollView"));
- UIWidget* widget = makeWords();
- widget->setLayoutParameter(layoutParameter);
- scrollView->addChild(widget);
- scrollView->doLayout();
- }
- void HelloWorld::addRight()
- {
- auto layoutParameter = UILinearLayoutParameter::create();
- layoutParameter->setGravity(UILinearGravity::LINEAR_GRAVITY_RIGHT);
- auto scrollView = ((UIScrollView*)m_layout->getChildByName("ScrollView"));
- UIWidget* widget = makeWords();
- widget->setLayoutParameter(layoutParameter);
- widget->setColor(Color3B(0,255,0));
- scrollView->addChild(widget);
- scrollView->doLayout();
- }
- gui::UIWidget* HelloWorld::makeWords()
- {
- UIButton* button = UIButton::create();
- button->loadTextureNormal("button.png");
- button->setTitleText("Hello UILayout \n I'm Cocos2d-x");
- button->setTitleColor(Color3B(0,0,0));
- return button;
- }
使用重写的addChild来添加子控件。通过调整它的UILinearLayoutParameter来控制控件的显示位置。
要注意的一点是,在UIScrollView中添加子控件后,要调用doLayout这个函数整理子控件的位置。
最后编译运行即可。
5、总结
使用UILayout进行布局,可以方便的控制动态添加元素的位置。
Demo 下载:http://download.csdn.net/detail/fansongy/6730481
本篇博客出自阿修罗道,转载请注明出处,禁止用于商业用途:http://blog.csdn.net/fansongy/article/details/17382049