Classification and application of cocos2dx-ui

Classification and application of cocos2dx-ui
Use of the container Layer

GUI controls can be roughly divided into ** common controls ** and container controls. common controls refer to common controls, such as UIButton, UILabel, UISlider, and UITextField, container controls, such as UILayout, UIScrollView, UIListView, and UIPageView, all of these container controls have a feature that can be used as containers and contain other controls. Although all controls can contain other controls, however, some controls have a single responsibility, such as button labels, and do not often add other controls to them. The following describes how to use container controls.

UILayout (Panel)

Panel is the most important container layer. As we mentioned earlier, the UI created by the CocoStudio UI editor is based on Panel layout. To use the UI control skillfully, understanding Panel and its attributes are also the top priority. Since it is a container, there must be some content in the container, and the Control name corresponding to Panel is UILayout.

    Size widgetSize = m_pWidget->getSize();    UILayout *background = dynamic_cast
 
  (m_pUiLayer->getWidgetByName(background_Panel));    // Create the layout    UILayout* layout = UILayout::create();    layout->setSize(Size(280, 150));    Size backgroundSize = background->getSize();    layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +                            (backgroundSize.width - layout->getSize().width) / 2,                            (widgetSize.height - backgroundSize.height) / 2 +                            (backgroundSize.height - layout->getSize().height) / 2));    m_pUiLayer->addWidget(layout);    UIButton* button = UIButton::create();    button->setTouchEnabled(true);    button->loadTextures(cocosgui/animationbuttonnormal.png, cocosgui/animationbuttonpressed.png, );    button->setPosition(Point(button->getSize().width / 2, layout->getSize().height - button->getSize().height / 2));    layout->addChild(button);    UIButton* textButton = UIButton::create();    textButton->setTouchEnabled(true);    textButton->loadTextures(cocosgui/backtotopnormal.png, cocosgui/backtotoppressed.png, );    textButton->setTitleText(Text Button);    textButton->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));    layout->addChild(textButton);    UIButton* button_scale9 = UIButton::create();    button_scale9->setTouchEnabled(true);    button_scale9->loadTextures(cocosgui/button.png, cocosgui/buttonHighlighted.png, );    button_scale9->setScale9Enabled(true);    button_scale9->setSize(Size(100, button_scale9->getContentSize().height));    button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2, button_scale9->getSize().height / 2));    layout->addChild(button_scale9);
 

As shown in the code above, we createdlayoutControl, and then added three controls.m_pUiLayerIt is a UILayer in the current scenario. We have previously introduced that all the UI controls are placed in UILayer. UILayer manages all the controls and adds them to the current scenario. The display effect is as follows:

We set the size attribute of layout, that is, to give it a size, but it does not show the effect. The default value is transparent. We can set the color for this layer:

    layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);    layout->setBackGroundColor(Color3B(128, 128, 128));

Vcg = "src =" http://www.bkjia.com/uploads/allimg/150908/04233JA5-1.png "/>

In addition to setting solid colors, you can also design gradient colors:

    layout->setBackGroundColorType(LAYOUT_COLOR_GRADIENT);    layout->setBackGroundColor(Color3B(64, 64, 64), Color3B(192, 192, 192));

Of course, in addition to setting the color, you can also set the desired background image:

    layout->setSize(Size(280, 150));    layout->setClippingEnabled(true);    layout->setBackGroundImage(cocosgui/Hello.png);

As shown in, we set the size and the background image, but do not forget to callsetClippingEnabledThe method is cropped according to the size. If you forget to call the method, it will be shown as follows.

In addition to the above usage, there are other methods:

    layout->setBackGroundImageScale9Enabled(true);    layout->setBackGroundImage(cocosgui/green_edit.png);

Use the jiugongge image as the background. Enable this function.

There are three color display modes for UILayout.

LayoutBackGroundColorType	Description
LAYOUT_COLOR_NONE	Transparent, no color display
LAYOUT_COLOR_SOLID	Object, you can set the color
LAYOUT_COLOR_GRADIENT	Gradient color

UIPanel control Layout Scheme

UILayout is used for layout. All of the preceding operations are to modify the background image. In addition to the absolute positioning of the coordinates, which layout schemes are provided below.

LayoutType	Description
LAYOUT_ABSOLUTE	Absolute Layout
LAYOUT_LINEAR_VERTICAL	Vertical Tile
LAYOUT_LINEAR_HORIZONTAL	Horizontal Tile
LAYOUT_RELATIVE	Relative Layout

Layout-> setLayoutType (LAYOUT_LINEAR_VERTICAL); // or layout-> setLayoutType (LAYOUT_LINEAR_HORIZONTAL); // or layout-> setLayoutType (LAYOUT_RELATIVE );

Note: Apart from absolute positioning, if other layout schemes are set, UIPanel ignores the positions set by its internal controls. At this time, you can use the providedUILayoutParameterTo set the location relationship. Several layout parameters are provided according to the layout scheme,UILinearLayoutParameterAndUIRelativeLayoutParameter. The following describes how to use layout parameters to display the layout design interface.

Layout-> setLayoutType (LAYOUT_LINEAR_VERTICAL );//.... the control creation code is omitted. Same as the previous control, UILinearLayoutParameter * lp1 = UILinearLayoutParameter: create (); lp1-> setGravity (bytes); lp1-> setMargin (UIMargin (0, 10, 0, 10); UILinearLayoutParameter * lp2 = UILinearLayoutParameter: create (); lp2-> setGravity (bytes); lp2-> setMargin (UIMargin (20, 20, 0, 5); UILinearLayoutParameter * lp3 = UILinearLayoutParameter: create (); lp3-> setGravity (priority); lp3-> setMargin (UIMargin (0, 10, 0, 10 )); button-> setLayoutParameter (lp1); textButton-> setLayoutParameter (lp2); button_scale9-> setLayoutParameter (lp3 );

The display effect is as follows:

We can see that three layout parameters are created respectively.UILinearLayoutParameter, SetGravityAndMarginParameters, and then set the layout parameter values for the three UIPanel internal controls, respectively, to achieve the above effect.

The scheme used here is vertical tile, and each layout parameter is setGravityThe value isLINEAR_GRAVITY_CENTER_HORIZONTALThat is to say, it is displayed in the horizontal play, while Margin indicates the Margin between the four edges of the Control. Pay attention to the precedinglp2IsUIMargin(20, 20, 0, 5)It indicates the meaning of the distance between the left, top, right, and bottom. The value on the left is 20.textButtonIt is cheaper than the center position to the right. This is a vertical layout, and the horizontal layout has different directions. The basic usage is the same as the vertical layout. Both are called linear la S and use the same linear la S. Next let's look at the relative layout:

Layout-> setLayoutType (LAYOUT_RELATIVE); // The creation step of the control is omitted here... required * rp1 = UIRelativeLayoutParameter: create (); rp1-> setAlign (values); UIRelativeLayoutParameter * rp2 = UIRelativeLayoutParameter: create (); rp2-> setAlign (values ); UIRelativeLayoutParameter * rp3 = UIRelativeLayoutParameter: create (); rp3-> setAlign (parameters); button-> setLayoutParameter (rp1); textButton-> setLayoutParameter (rp2 ); button_scale9-> setLayoutParameter (rp3 );

Three layout attributes are created and different dock parameters are set.Align.

UIScrollView rolling View

In addition to the layout container, we also commonly use the scroll layer container, which can expand our display control, especially when there are many content elements. It can be set to either horizontal or vertical.

UIScrollView * scrollView = UIScrollView: create (); scrollView-> setTouchEnabled (true); scrollView-> setSize (Size (280,150); Size backgroundSize = background-> getContentSize (); scrollView-> setPosition (Point (widgetSize. width-backgroundSize. width)/2 + (backgroundSize. width-scrollView-> getSize (). width)/2, (widgetSize. height-backgroundSize. height)/2 + (backgroundSize. height-scrollView-> getSize (). height)/2); m_pUiLayer-> addWidget (scrollView); UIImageView * imageView = UIImageView: create (); imageView-> loadTexture (cocosgui/ccicon.png ); float innerWidth = scrollView-> getSize (). width; float innerHeight = scrollView-> getSize (). height + imageView-> getSize (). height; scrollView-> setInnerContainerSize (Size (innerWidth, innerHeight); imageView-> setPosition (Point (innerWidth/2, imageView-> getSize (). height/2); scrollView-> addChild (imageView); // Add other controls for scrollview, omitted

See the results. Here, a ScrollView control is created and some internal elements are added to complete the layout. If the control content exceeds the display area, we can drag it up or down, to display up or down not displayed.

Note: The position of imageView is outside scrollview. You can use the setInnerContainerSize method of scrollview to set the size of the area containing the content. During the drag process, the boundary check is performed.

If you want to set the horizontal drag effect, you only need to set the InnerContainerSize width to be greater than the control size, the height is the same, you can achieve the horizontal drag effect.

UIListView

ListView inherits from ScrollView, so the functions and features in ScrollView can also be reflected in ListView. So what are more ListView than ScrollView? Or start from the usage method:

    UIListView* lv = UIListView::create();    UIButton* model = UIButton::create();    model->loadTextures(cocosgui/animationbuttonnormal.png, cocosgui/animationbuttonpressed.png, );    lv->setItemModel(model);    for (int i=0; i<20; i++)    {        lv->pushBackDefaultItem();    }    lv->setItemsMargin(10);    lv->setGravity(LISTVIEW_GRAVITY_CENTER_HORIZONTAL);    lv->setSize(Size(100, 100));    lv->setBackGroundColorType(LAYOUT_COLOR_SOLID);    lv->setBackGroundColor(Color3B::GREEN);    lv->setPosition(Point(100, 100));    m_pUiLayer->addWidget(lv);

But the effect cannot be seen very well. Here is similar to the implementation of ScrollView, you can achieve drag, and there are 20 buttons in it. First, let's talk about common attributes.ItemsMarginSet the spacing of each element.GravitySet the layout scheme, which is displayed in the horizontal play.

lv->setItemModel(model)Set the Default Item for ListView, and add 20 Default items through a for loop, model has been added 20 times. During each addition, model is cloned. They have the same attributes but are not the same object.

BesidespushBackDefaultItem()In addition to adding items to ListView, we can also add items using the following methods:

Method	Description
PushBackDefaultItem ()	Add a default item
InsertDefaultItem (int index)	Insert a default entry, ordered
PushBackCustomItem (UIWidget * item)	Add a new item
InsertCustomItem (UIWidget * item, int index)	Insert a new item

The above are some methods for adding items. In addition to the above methods for deleting and obtaining items, we can flexibly operate on each element:

Method	Description
RemoveItem (int index)	Remove an item
RemoveLastItem ()	Remove the last item
GetItem (unsigned int index)	Obtain an item based on the index
GetItems ()	Get all items and return the Array set
GetIndex (UIWidget * item)	Obtain the index of an item

UIPageView

In addition to ScrollView that can be displayed in a scrolling manner, the control that displays the list based on items also displays PageView Based on pages. PageVew allows us to display the content on the entire page and performs automatic alignment. What is automatic alignment, just like turning your book to the page, is half done, it will automatically help you roll it back.

    UIPageView* pageView = UIPageView::create();    pageView->setTouchEnabled(true);    pageView->setSize(Size(240, 130));    Size backgroundSize = background->getContentSize();    pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +                              (backgroundSize.width - pageView->getSize().width) / 2,                              (widgetSize.height - backgroundSize.height) / 2 +                              (backgroundSize.height - pageView->getSize().height) / 2));    for (int i = 0; i < 3; ++i)    {        UILayout* layout = UILayout::create();        layout->setSize(Size(240, 130));        UIImageView* imageView = UIImageView::create();        imageView->setTouchEnabled(true);        imageView->setScale9Enabled(true);        imageView->loadTexture(cocosgui/scrollviewbg.png);        imageView->setSize(Size(240, 130));        imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));        layout->addChild(imageView);        UILabel* label = UILabel::create();        label->setText(CCString::createWithFormat(page %d, (i + 1))->getCString());        label->setFontName(font_UIPageViewTest);        label->setFontSize(30);        label->setColor(Color3B(192, 192, 192));        label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));        layout->addChild(label);        pageView->addPage(layout);    }    pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));    m_pUiLayer->addWidget(pageView);

Display: Creates a PageView object, and sets the Size to Size (240,130), which is the Size of its display area. We use a for loop and add three identical elements UILayout. The size of each UILayout is alsoSize(240, 130)So PageView can display the content of an item at a time, that is, a page. What is contained in UILayout on each page is determined based on your own needs. Then usepageView->addPage(layout)To add a page, you must note thatUILayoutType object or its derived class object.

Although PageView achieves sliding and scrolling effects, it does not inherit from ScrollView, but directly inherits from UILayout. How can we implement scrolling? It integrates and implementsUIScrollInterfaceType, which gives it attributes that can be rolled. The same is true for ScrollView.

Each control forms a rich GUI, and the container layer is its skeleton. Through its layout, we can achieve the desired effect. From Panel to ScrollView, Listview and PageView, flexible organization based on actual needs can make our interface display more friendly.