Internship Small white:: (EXT) Cocos2d-x 3.0 Development (15) using the Uilayout layout, create a dialogue interface

1. Overview

In the previous article we designed a static uiscrollview in the editor, and usually we need to add information dynamically in the program. How is the position of the inserted element determined? In 3.0 Uilayout has implemented the basic layout, take a look at it:

2. Editing interface

Open Cocostudio uieditor Edit an interface to create a ScrollView and two button. Because ScrollView inherits from Uilayout, we use it here. It's not too good. Children's shoes can be consulted: Cocos2d-x 3.0 Development (14) using Uiscrollview to achieve the size of different items drag display

note here that scrollview the child control layout, we select Linear Portrait, and the slide direction with properties is also selected as "vertical". Save the export after editing it well.

3. Related Programs

Run the script, create a testlayout program, and copy the exported files to the resource directory.

Declare a uilayout:

[CPP]View Plaincopyprint?

1. #include "gui\cocosgui.h"
3. Private
4. gui::uilayout* m_layout;

Change init:

[CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
20. Size visiblesize = director::getinstance ()->getvisiblesize ();
22. Point origin = Director::getinstance ()->getvisibleorigin ();
26. //load Layout
28. M_layout = dynamic_cast<uilayout*> (Cocostudio::guireader::sharereader ()->widgetfromjsonfile ("  Testlayout.json "));
30. Auto layer = Uilayer::create ();
32. Layer->addwidget (m_layout);
34. this->addchild (layer);
38. //set button React
40. uibutton* Buttona = dynamic_cast<uibutton*> (m_layout->getchildbyname ("Textbuttona"));
42. Buttona->addtoucheventlistener (this,toucheventselector (Helloworld::touchbutton));
44. uibutton* buttonb = dynamic_cast<uibutton*> (m_layout->getchildbyname ("textbuttonb"));
46. Buttonb->addtoucheventlistener (this,toucheventselector (Helloworld::touchbutton));
52. return true;
54. }

Add a response function

[CPP]View Plaincopyprint?

2. void Helloworld::touchbutton (cocos2d::object* obj,toucheventtype type)
4. {
6. if (type = = touch_event_ended)
8. {
10. Auto button = dynamic_cast<uibutton*> (obj);
12. if (strcmp (Button->getname (),"Textbuttona") = = 0)
14. {
16. //add element on left
18. Addleft ();
20. }
22. Else
24. {
26. //add element on right
28. Addright ();
30. }
32. }
34. }

Compile and run, you can see the following interface:

4. Adding controls

Implement Addleft () and Addright ():

[CPP]View Plaincopyprint?

2. void Helloworld::addleft ()
4. {
8. Auto Layoutparameter = Uilinearlayoutparameter::create ();
10. Layoutparameter->setgravity (Uilineargravity::linear_gravity_left);
14. Auto ScrollView = ((uiscrollview*) m_layout->getchildbyname ("ScrollView"));
16. uiwidget* widget = Makewords ();
18. Widget->setlayoutparameter (Layoutparameter);
20. Scrollview->addchild (widgets);
22. Scrollview->dolayout ();
24. }
28. void Helloworld::addright ()
30. {
32. Auto Layoutparameter = Uilinearlayoutparameter::create ();
34. Layoutparameter->setgravity (Uilineargravity::linear_gravity_right);
38. Auto ScrollView = ((uiscrollview*) m_layout->getchildbyname ("ScrollView"));
40. uiwidget* widget = Makewords ();
42. Widget->setlayoutparameter (Layoutparameter);
44. Widget->setcolor (color3b (0,255,0));
46. Scrollview->addchild (widgets);
48. Scrollview->dolayout ();
50. }
56. gui::uiwidget* Helloworld::makewords ()
58. {
60. uibutton* button = Uibutton::create ();
62. Button->loadtexturenormal ("button.png");
64. Button->settitletext ("Hello uilayout \ n I ' m cocos2d-x");
66. Button->settitlecolor (color3b (0,0,0));
68. return button;
70. }

Use the overridden Addchild to add child controls. Controls the display position of the control by adjusting its uilinearlayoutparameter.

One thing to note is that when you add a child control in Uiscrollview, you call the Dolayout function to organize the location of the child controls.

The final compilation runs.

5. Summary

with Uilayout layout, you can easily control the location of dynamically added elements.

Demo Download: http://download.csdn.net/detail/fansongy/6730481

This blog from the Asura road , reproduced please indicate the source, prohibited for commercial use: http://blog.csdn.net/fansongy/article/details/17382049

Internship Small white:: (EXT) Cocos2d-x 3.0 Development (15) Use Uilayout Layout, make dialog interface