cocos2dv3 new GUI Usage of Container

原文

Usage of Container

GUI widgets can be divided into two general kinds- normal Widget and Container Widget. normal widgets are some common widgets such as Button,Text,Slider and TextField,etc. Container widgets are Layout,ScrollView and PageView,etc. Container widgets are special as they are widgets that can contain other widgets to enhance the user interface.

Layout (Panel)

Panel as primary container,it's the base to create UI by the CocoStudio editor. It's important to kNow Panel and its properties. The corresponding widget of Panel is named Layout.

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

   Layout* background = static_cast<Layout*>(root->getChildByName("background_Panel"));

        // Create the layout
        Layout* layout = Layout::create();
        layout->setContentSize(Size(280,150));
        Size backgroundSize = background->getContentSize();
        layout->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - layout->getContentSize().width) / 2.0f,(widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - layout->getContentSize().height) / 2.0f));
        _uiLayer->addChild(layout);

        Button* button = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        button->setPosition(Vec2(button->getContentSize().width / 2.0f,layout->getContentSize().height - button->getContentSize().height / 2.0f));
        layout->addChild(button);

        Button* titleButton = Button::create("cocosui/backtotopnormal.png","cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Vec2(layout->getContentSize().width / 2.0f,layout->getContentSize().height / 2.0f));
        layout->addChild(titleButton);

        Button* button_scale9 = Button::create("cocosui/button.png","cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setContentSize(Size(100.0f,button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Vec2(layout->getContentSize().width - button_scale9->getContentSize().width / 2.0f,button_scale9->getContentSize().height / 2.0f));

        layout->addChild(button_scale9);

In Lua:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

  local background = root:getChildByName("background_Panel")

    local layout = ccui.Layout:create()
    layout:setContentSize(cc.size(280,150))
    local backgroundSize = background:getContentSize()
    layout:setPosition(cc.p((widgetSize.width - backgroundSize.width) / 2 +
                                (backgroundSize.width - layout:getContentSize().width) / 2,(widgetSize.height - backgroundSize.height) / 2 +
                                (backgroundSize.height - layout:getContentSize().height) / 2))
    self._uiLayer:addChild(layout)

    local button = ccui.Button:create()
    button:setTouchEnabled(true)
    button:loadTextures("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png","")
    button:setPosition(cc.p(button:getContentSize().width / 2,layout:getContentSize().height - button:getContentSize().height / 2))
    layout:addChild(button)

    local textButton = ccui.Button:create()
    textButton:setTouchEnabled(true)
    textButton:loadTextures("cocosui/backtotopnormal.png","cocosui/backtotoppressed.png","")
    textButton:setTitleText("Text Button")
    textButton:setPosition(cc.p(layout:getContentSize().width / 2,layout:getContentSize().height / 2))
    layout:addChild(textButton)

    local button_scale9 = ccui.Button:create()
    button_scale9:setTouchEnabled(true)
    button_scale9:loadTextures("cocosui/button.png","cocosui/buttonHighlighted.png","")
    button_scale9:setScale9Enabled(true)
    button_scale9:setContentSize(cc.size(100,button_scale9:getVirtualRendererSize().height))
    button_scale9:setPosition(cc.p(layout:getContentSize().width - button_scale9:getContentSize().width / 2,button_scale9:getContentSize().height / 2))
    layout:addChild(button_scale9)

We created a layout widget and then added three widgets to it.

We give a size of the layout by setting size value,but we don't get what we want because the color of the layout default is transparent. However,we can set color for this layout:

In C++:

 
 
1
2

    layout->setBackGroundColorType(BackGroundColorType::SOLID);
    layout->setBackGroundColor(Color3B(128,128,128));

In Lua:

 
 
1
2

 layout:setBackGroundColorType(ccui.LayoutBackGroundColorType.solid)
    layout:setBackGroundColor(cc.c3b(128,128))

You can also set background image:

In C++:

 
 
1

    layout->setBackGroundImage("cocosgui/Hello.png");

In Lua:

 
 
1

    layout:setBackGroundImage("cocosui/Hello.png")

As shown above,we set the size and background image,but remember to call setClippingEnabled method to clip by size,if you forget to call this method you will see:

There are other ways to do the same thing:

In C++:

 
 
1
2

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

In Lua:

 
 
1
2

 layout:setBackGroundImageScale9Enabled(true)
    layout:setBackGroundImage("cocosui/green_edit.png")

When using square images as background image,remember to enable this function.

UILayout has three modes to display color.

LayoutBackGroundColorType Desription
BackGroundColorType::NONE Transparent,no displaying color
BackGroundColorType::SOLID Solid,set displaying color
BackGroundColorType::GRADIENT displaying gradient color

UIPanel Widget's Layout Strategies

Layout is for layout. Above we are just changing the background image. The table below shows you how to set the absolute position manually for other layout schemes:

LayoutType Description
Type::ABSOLUTE Absolute Layout Scheme
Type::VERTICAL Linear Vertical Scheme
Type::HORIZONTAL Linear Horizontal Scheme
Type::RELATIVE Relative Layout Scheme

In C++:

 
 
1
2
3
4
5
6
7

    layout->setLayoutType(Type::VERTICAL);

    // Another way 
    layout->setLayoutType(Type::HORIZONTAL);

    // Another way 
    layout->setLayoutType(Type::RELATIVE);

In Lua:

 
 
1
2
3

    layout:setLayoutType(ccui.LayoutType.VERTICAL)
    layout:setLayoutType(ccui.LayoutType.HORIZONTAL)
    layout:setLayoutType(ccui.LayoutType.RELATIVE)

Note: In addition to absolute layout scheme,if you set other scheme then UIPanel will ignore the position setting of the inside widget. You can use LayoutParameter to set position in this situation,the layout schemes provide serval parameters-LinearLayoutParameter and RelativeLayoutParameter. The following code shows how to combine these parameters and layout to design the UI.

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

      // Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LayoutType::VERTICAL);
        layout->setContentSize(Size(280,(widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - layout->getContentSize().height) / 2.0f));
        _uiLayer->addChild(layout);


        Button* button = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button);

        LinearLayoutParameter* lp1 = LinearLayoutParameter::create();
        button->setLayoutParameter(lp1);
        lp1->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
        lp1->setMargin(Margin(0.0f,5.0f,0.0f,10.0f));


        Button* titleButton = Button::create("cocosui/backtotopnormal.png","cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        layout->addChild(titleButton);

        LinearLayoutParameter* lp2 = LinearLayoutParameter::create();
        titleButton->setLayoutParameter(lp2);
        lp2->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
        lp2->setMargin(Margin(0.0f,10.0f,10.0f));


        Button* button_scale9 = Button::create("cocosui/button.png",button_scale9->getVirtualRendererSize().height));
        layout->addChild(button_scale9);

        LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
        button_scale9->setLayoutParameter(lp3);
        lp3->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
        lp3->setMargin(Margin(0.0f,10.0f));

In Lua:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

local layout = ccui.Layout:create()
    layout:setLayoutType(ccui.LayoutType.VERTICAL)
    layout:setContentSize(cc.size(280,"")
    layout:addChild(button)

    local lp1 = ccui.LinearLayoutParameter:create()
    button:setLayoutParameter(lp1)
    lp1:setGravity(ccui.LinearGravity.centerHorizontal)
    lp1:setMargin({ left = 0,top = 5,right = 0,bottom = 10 })


    local textButton = ccui.Button:create()
    textButton:setTouchEnabled(true)
    textButton:loadTextures("cocosui/backtotopnormal.png","")
    textButton:setTitleText("Text Button")
    layout:addChild(textButton)

    local lp2 = ccui.LinearLayoutParameter:create()
    textButton:setLayoutParameter(lp2)
    lp2:setGravity(ccui.LinearGravity.centerHorizontal)
    lp2:setMargin({left = 0,top = 10,bottom  = 10} )


    local button_scale9 = ccui.Button:create()
    button_scale9:setTouchEnabled(true)
    button_scale9:loadTextures("cocosui/button.png",button_scale9:getVirtualRendererSize().height))
    layout:addChild(button_scale9)

    local lp3 = ccui.LinearLayoutParameter:create()
    button_scale9:setLayoutParameter(lp3)
    lp3:setGravity(ccui.LinearGravity.centerHorizontal)
    lp3:setMargin({ left = 0,bottom  = 10 } )

Setting three parameters for layout - LinearLayoutParameter, Gravity and Margin,then set layout parameters for three UIPanel's inner widgets.

Here we used Linear Vertical scheme,but every Gravity set as LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL that is displaying as center horizontally. Margin shows the spacing around the edges,notice that the value of lp2 is UIMargin(20,20,5),which means the spacing from left,top,right and button. When left spacing is 20 you can see textButton's position has little offset to right. Except for the direction,other setting of layout vertical scheme is same as horizontal scheme. And two schemes are called Linear Layout,they using the same parameters. Checking out following layout:

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

   // Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LayoutType::RELATIVE);
        layout->setContentSize(Size(280,150));
        layout->setBackGroundColorType(Layout::BackGroundColorType::SOLID);
        layout->setBackGroundColor(Color3B::GREEN);
        Size backgroundSize = background->getContentSize();
        layout->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                                (backgroundSize.width - layout->getContentSize().width) / 2.0f,(widgetSize.height - backgroundSize.height) / 2.0f +
                                (backgroundSize.height - layout->getContentSize().height) / 2.0f));
        _uiLayer->addChild(layout);

        // top left
        Button* button_TopLeft = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_TopLeft);

        RelativeLayoutParameter* rp_TopLeft = RelativeLayoutParameter::create();
        rp_TopLeft->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT);
        button_TopLeft->setLayoutParameter(rp_TopLeft);


        // top center horizontal
        Button* button_TopCenter = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_TopCenter);

        RelativeLayoutParameter* rp_TopCenter = RelativeLayoutParameter::create();
        rp_TopCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL);
        button_TopCenter->setLayoutParameter(rp_TopCenter);


        // top right
        Button* button_TopRight = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_TopRight);

        RelativeLayoutParameter* rp_TopRight = RelativeLayoutParameter::create();
        rp_TopRight->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT);
        button_TopRight->setLayoutParameter(rp_TopRight);


        // left center
        Button* button_LeftCenter = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_LeftCenter);

        RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();
        rp_LeftCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL);
        button_LeftCenter->setLayoutParameter(rp_LeftCenter);


        // center
        Button* buttonCenter = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(buttonCenter);

        RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create();
        rpCenter->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
        buttonCenter->setLayoutParameter(rpCenter);


        // right center
        Button* button_RightCenter = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_RightCenter);

        RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();
        rp_RightCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL);
        button_RightCenter->setLayoutParameter(rp_RightCenter);


        // left bottom
        Button* button_LeftBottom = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_LeftBottom);

        RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create();
        rp_LeftBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BottOM);
        button_LeftBottom->setLayoutParameter(rp_LeftBottom);


        // bottom center
        Button* button_BottomCenter = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_BottomCenter);

        RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create();
        rp_BottomCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_BottOM_CENTER_HORIZONTAL);
        button_BottomCenter->setLayoutParameter(rp_BottomCenter);


        // right bottom
        Button* button_RightBottom = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        layout->addChild(button_RightBottom);

        RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create();
        rp_RightBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BottOM);
        button_RightBottom->setLayoutParameter(rp_RightBottom);

Here created three layout properties,and setted different Align parameters.

ScrollView

In addition to layout container,scroll view is always been used,it can enlarge the displaying widget and it's very useful when content elements increased. You can set different direction as you like.

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

   // Create the scrollview by vertical
        ui::ScrollView* scrollView = ui::ScrollView::create();
        scrollView->setContentSize(Size(280.0f,150.0f));
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                               (backgroundSize.width - scrollView->getContentSize().width) / 2.0f,(widgetSize.height - backgroundSize.height) / 2.0f +
                               (backgroundSize.height - scrollView->getContentSize().height) / 2.0f));
        _uiLayer->addChild(scrollView);

        ImageView* imageView = ImageView::create("cocosui/ccicon.png");

        float innerWidth = scrollView->getContentSize().width;
        float innerHeight = scrollView->getContentSize().height + imageView->getContentSize().height;

        scrollView->setInnerContainerSize(Size(innerWidth,innerHeight));                

        Button* button = Button::create("cocosui/animationbuttonnormal.png","cocosui/animationbuttonpressed.png");
        button->setPosition(Vec2(innerWidth / 2.0f,scrollView->getInnerContainerSize().height - button->getContentSize().height / 2.0f));
        scrollView->addChild(button);

        Button* titleButton = Button::create("cocosui/backtotopnormal.png","cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Vec2(innerWidth / 2.0f,button->getBottomBoundary() - button->getContentSize().height));
        scrollView->addChild(titleButton);

        Button* button_scale9 = Button::create("cocosui/button.png",button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Vec2(innerWidth / 2.0f,titleButton->getBottomBoundary() - titleButton->getContentSize().height));
        scrollView->addChild(button_scale9);

        imageView->setPosition(Vec2(innerWidth / 2.0f,imageView->getContentSize().height / 2.0f));
        scrollView->addChild(imageView);

In Lua:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  local scrollView = ccui.ScrollView:create()
    scrollView:setTouchEnabled(true)
    scrollView:setContentSize(cc.size(280,150))        
    local backgroundSize = background:getContentSize()
    scrollView:setPosition(cc.p((widgetSize.width - backgroundSize.width) / 2 +
                               (backgroundSize.width - scrollView:getContentSize().width) / 2,(widgetSize.height - backgroundSize.height) / 2 +
                               (backgroundSize.height - scrollView:getContentSize().height) / 2))
    self._uiLayer:addChild(scrollView)

    local imageView = ccui.ImageView:create()
    imageView:loadTexture("cocosui/ccicon.png")

    local innerWidth = scrollView:getContentSize().width
    local innerHeight = scrollView:getContentSize().height + imageView:getContentSize().height

    scrollView:setInnerContainerSize(cc.size(innerWidth,innerHeight))                

    local button = ccui.Button:create()
    button:setTouchEnabled(true)
    button:loadTextures("cocosui/animationbuttonnormal.png","")
    button:setPosition(cc.p(innerWidth / 2,scrollView:getInnerContainerSize().height - button:getContentSize().height / 2))
    scrollView:addChild(button)

    local textButton = ccui.Button:create()
    textButton:setTouchEnabled(true)
    textButton:loadTextures("cocosui/backtotopnormal.png","")
    textButton:setTitleText("Text Button")
    textButton:setPosition(cc.p(innerWidth / 2,button:getBottomBoundary() - button:getContentSize().height))
    scrollView:addChild(textButton)

    local button_scale9 = ccui.Button:create()
    button_scale9:setTouchEnabled(true)
    button_scale9:setScale9Enabled(true)
    button_scale9:loadTextures("cocosui/button.png","")
    button_scale9:setContentSize(cc.size(100,button_scale9:getVirtualRendererSize().height))
    button_scale9:setPosition(cc.p(innerWidth / 2,textButton:getBottomBoundary() - textButton:getContentSize().height))
    scrollView:addChild(button_scale9)

    imageView:setPosition(cc.p(innerWidth / 2,imageView:getContentSize().height / 2))
    scrollView:addChild(imageView)

As the image shows,we created a ScrollView widget and added some inner elements to it. The content is too much that out of the display area,in this situation we can drag the view up and down to show the content.

Note: imageView's position is set outside of scrollview,besides you can call the scrollview's setInnerContainerSize method resize the content displaying area. Checking boundary when dragging.

If horizontal drag is set,then we just need to set InnerContainerSize's width larger than widget's,height equal to widget's. In this way you can drag it horizontally.

ListView

ListView inherited from ScrollView,so ScrollView's characters also can be shown in ListView. Let's see the difference between ListView and ScrollView:

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    ListView* lv = UIListView::create();
    Button* model = Button::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);

In Lua:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

  local listView = ccui.ListView:create()
    -- set list view ex direction
    listView:setDirection(ccui.ScrollViewDir.vertical)
    listView:setBounceEnabled(true)
    listView:setBackGroundImage("cocosui/green_edit.png")
    listView:setBackGroundImageScale9Enabled(true)
    listView:setContentSize(cc.size(240,130))
    listView:setPosition(cc.p((widgetSize.width - backgroundSize.width) / 2.0 +
                              (backgroundSize.width - listView:getContentSize().width) / 2.0,(widgetSize.height - backgroundSize.height) / 2.0 +
                              (backgroundSize.height - listView:getContentSize().height) / 2.0))
    listView:addEventListener(listViewEvent)
    listView:addScrollViewEventListener(scrollViewEvent)
    self._uiLayer:addChild(listView)


    -- create model
    local default_button = ccui.Button:create("cocosui/backtotoppressed.png","cocosui/backtotopnormal.png")
    default_button:setName("Title Button")

    local default_item = ccui.Layout:create()
    default_item:setTouchEnabled(true)
    default_item:setContentSize(default_button:getContentSize())
    default_button:setPosition(cc.p(default_item:getContentSize().width / 2.0,default_item:getContentSize().height / 2.0))
    default_item:addChild(default_button)

    --set model
    listView:setItemmodel(default_item)

    --add default item
    local count = table.getn(array)
    for i = 1,math.floor(count / 4) do
        listView:pushBackDefaultItem()
    end

As shown above,it's the implementation like ScrollView. There are twenty buttons can be dragged,by setting every element's space with ItemsMargin and Gravity make them displaying in the center horizontally.

lv->setItemmodel(model) set Default Item for ListView,then added twenty times this Default Item by a for loop. Notice that it doesn't mean the same model has been added twenty times but there are twenty new object which are the clone of the original model.

pushBackDefaultItem() is not the only item that can be added to ListView,there are others:

Method Description
pushBackDefaultItem() Add a Default Item
insertDefaultItem(int index) Insert a sorted Default Item
pushBackCustomItem(UIWidget* item) Add a new Item
insertCustomItem(UIWidget* item,int index) Insert a new Item

Some method to add Item already described in above table,Now introduce you some delete and get method:

Method Description
removeItem(int index) Remove a Item
removeLastItem() Remove the last Item
getItem(unsigned int index) Get a Item by Index
getItems() Get all the Items and return Array
getIndex(UIWidget *item) Get a Item's Index

PageView

We talked about ScrollView and some widget can display list,still PageView can display entire page one time. Moreover,it can auto align-just like when you turning the over page it will help you done it.

In C++:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    // Create the page view
        PageView* pageView = PageView::create();
        pageView->setContentSize(Size(240.0f,130.0f));
        Size backgroundSize = background->getContentSize();
        pageView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - pageView->getContentSize().width) / 2.0f,(widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - pageView->getContentSize().height) / 2.0f));

        pageView->removeAllPages();

        int pageCount = 4;
        for (int i = 0; i < pageCount; ++i)
        {
            Layout* layout = Layout::create();
            layout->setContentSize(Size(240.0f,130.0f));

            ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png");
            imageView->setScale9Enabled(true);
            imageView->setContentSize(Size(240,130));
            imageView->setPosition(Vec2(layout->getContentSize().width / 2.0f,layout->getContentSize().height / 2.0f));
            layout->addChild(imageView);

            Text* label = Text::create(StringUtils::format("page %d",(i+1)),"fonts/Marker Felt.ttf",30);
            label->setColor(Color3B(192,192,192));
            label->setPosition(Vec2(layout->getContentSize().width / 2.0f,layout->getContentSize().height / 2.0f));
            layout->addChild(label);

            pageView->insertPage(layout,i);
        }

        pageView->removePageAtIndex(0);
        pageView->scrollToPage(pageCount-2);

        pageView->addEventListener(CC_CALLBACK_2(UIPageViewTest::pageViewEvent,this));

        _uiLayer->addChild(pageView);

In Lua:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

 local pageView = ccui.PageView:create()
    pageView:setTouchEnabled(true)
    pageView:setContentSize(cc.size(240,130))
    local backgroundSize = background:getContentSize()
    pageView:setPosition(cc.p((widgetSize.width - backgroundSize.width) / 2 +
                                  (backgroundSize.width - pageView:getContentSize().width) / 2,(widgetSize.height - backgroundSize.height) / 2 +
                                  (backgroundSize.height - pageView:getContentSize().height) / 2))

    for i = 1,3 do
        local layout = ccui.Layout:create()
        layout:setContentSize(cc.size(240,130))

        local imageView = ccui.ImageView:create()
        imageView:setTouchEnabled(true)
        imageView:setScale9Enabled(true)
        imageView:loadTexture("cocosui/scrollviewbg.png")
        imageView:setContentSize(cc.size(240,130))
        imageView:setPosition(cc.p(layout:getContentSize().width / 2,layout:getContentSize().height / 2))
        layout:addChild(imageView)

        local label = ccui.Text:create()
        local pageInfo = string.format("page %d",i)
        label:setString(pageInfo)
        label:setFontName(font_UIPageViewTest)
        label:setFontSize(30)
        label:setColor(cc.c3b(192,192))
        label:setPosition(cc.p(layout:getContentSize().width / 2,layout:getContentSize().height / 2))
        layout:addChild(label)

        pageView:addPage(layout)

    end 

    local function pageViewEvent(sender,eventType)
        if eventType == ccui.PageViewEventType.turning then
            local pageView = sender
            local pageInfo = string.format("page %d ",pageView:getCurPageIndex() + 1)
            self._displayValueLabel:setString(pageInfo)
        end
    end 

    pageView:addEventListener(pageViewEvent)

    self._uiLayer:addChild(pageView)

As shown,a PageView object created and size is "Size(240,130)",which is display area. We added three same Layout and each of them has the same size "Size(240,130)" so PageView can display the entire content of a Item one time. You can added what you need in Layout,then add a page by pageView->addPage(layout). You should remember you have to add Layout object or its derived class object.

Although PageView implemented scroll,it is not inherited from ScrollView but Layout. So does ScrollView.

Every single widget make a GUI scene,the container is the skeleton,according to its layout to reach out expectation. Using Panel,ScrollView,ListView and PageView can make a better and friendly GUI.

uipanel_gradient.png (95 kB) owen,2014-04-02 07:10

uipanel_relative.png (91.4 kB) owen,2014-04-02 07:10

uipanel_scale9.png (92.8 kB) owen,2014-04-02 07:10

uipanel_test.png (91.1 kB) owen,2014-04-02 07:10

uilistview_vertical.png (96.3 kB) owen,2014-04-02 07:10

uipageview.png (97.1 kB) owen,2014-04-02 07:10

uipanel_background1.png (121.6 kB) owen,2014-04-02 07:10

uipanel_background2.png (115.3 kB) owen,2014-04-02 07:10

uipanel_vertical.png (91.7 kB) owen,2014-04-02 07:10

uipanel_color.png (91.5 kB) owen,2014-04-02 07:10

uipanel_vertical.png (91.7 kB) owen,2014-04-02 07:10

uiscrollview_vertical.png (101.5 kB) owen,2014-04-02 07:10

cocos2dv3 new GUI Usage of Container的更多相关文章

  1. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

  2. HTML5 input新增type属性color颜色拾取器的实例代码

    type 属性规定 input 元素的类型。本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码，感兴趣的朋友跟随脚本之家小编一起看看吧

  3. HTML5自定义mp3播放器源码

    这篇文章主要介绍了HTML5自定义mp3播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

  4. html5自定义video标签的海报与播放按钮功能

    这篇文章主要介绍了html5自定义video标签的海报与播放按钮功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

  5. amazeui模态框弹出后立马消失并刷新页面

    这篇文章主要介绍了amazeui模态框弹出后立马消失并刷新页面,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  6. 移动HTML5前端框架—MUI的使用

    这篇文章主要介绍了移动HTML5前端框架—MUI的使用的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  7. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下

  8. h5页面背景图很长要有滚动条滑动效果的实现

    这篇文章主要介绍了h5页面背景图很长要有滚动条滑动效果的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  9. html5借用repeating-linear-gradient实现一把刻度尺（ruler）

    这篇文章主要介绍了html5借用repeating-linear-gradient实现一把刻度尺，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  10. 如何在Canvas中添加事件的方法示例

    这篇文章主要介绍了如何在Canvas中添加事件的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. 【cocos2d-x 3.x 学习笔记】对象内存管理

    Cocos2d-x的内存管理cocos2d-x中使用的是上面的引用计数来管理内存，但是又增加了一些自己的特色。cocos2d-x中通过Ref类来实现引用计数，所有需要实现内存自动回收的类都应该继承自Ref类。下面是Ref类的定义：在cocos2d-x中创建对象通常有两种方式：这两中方式的差异可以参见我另一篇博文“对象创建方式讨论”。在cocos2d-x中提倡使用第二种方式，为了避免误用第一种方式，一般将构造函数设为protected或private。参考资料：[1]cocos2d-x高级开发教程2.3节[

  2. 利用cocos2dx 3.2开发消灭星星六如何在cocos2dx中显示中文

    由于编码的不同，在cocos2dx中的Label控件中如果放入中文字，往往会出现乱码。为了方便使用，我把这个从文档中获取中文字的方法放在一个头文件里面Chinese.h这里的tex_vec是cocos2dx提供的一个保存文档内容的一个容器。这里给出ChineseWords,xml的格式再看看ChineseWord的实现Chinese.cpp就这样，以后在需要用到中文字的地方，就先include这个头文件然后调用ChineseWord函数，获取一串中文字符串。

  3. 利用cocos2dx 3.2开发消灭星星七关于星星的算法

    在前面，我们已经在GameLayer中利用随机数初始化了一个StarMatrix，如果还不知道怎么创建星星矩阵请回去看看而且我们也讲了整个游戏的触摸事件的派发了。

  4. cocos2dx3.x 新手打包APK注意事项！

    这个在编译的时候就可以发现了比较好弄这只是我遇到的，其他的以后遇到再补充吧。。。以前被这两个问题坑了好久

  5. 利用cocos2dx 3.2开发消灭星星八游戏的结束判断与数据控制

    如果你看完之前的，那么你基本已经拥有一个消灭星星游戏的雏形。开始把剩下的两两互不相连的星星消去。那么如何判断是GameOver还是进入下一关呢。。其实游戏数据贯穿整个游戏，包括星星消除的时候要加到获得分数上，消去剩下两两不相连的星星的时候的加分政策等，因此如果前面没有做这一块的，最好回去搞一搞。

  6. 利用cocos2dx 3.2开发消灭星星九为游戏添加一些特效

    needClear是一个flag，当游戏判断不能再继续后，这个flag变为true，开始消除剩下的星星clearSumTime是一个累加器ONE_CLEAR_TIME就是每颗星星消除的时间2.连击加分信息一般消除一次星星都会有连击信息和加多少分的信息。其实这些combo标签就是一张图片，也是通过控制其属性或者runAction来实现。源码ComboEffect.hComboEffect.cpp4.消除星星粒子效果消除星星时，为了实现星星爆裂散落的效果，使用了cocos2d提供的粒子特效引擎对于粒子特效不了

  7. 02 Cocos2D-x引擎win7环境搭建及创建项目

    官网有搭建的文章，直接转载记录。环境搭建：本文介绍如何搭建Cocos2d-x3.2版本的开发环境。项目创建：一、通过命令创建项目前面搭建好环境后，怎样创建自己的Cocos2d-x项目呢？先来看看Cocos2d-x3.2的目录吧这就是Cocos2d-x3.2的目录。输入cocosnew项目名–p包名–lcpp–d路径回车就创建成功了例如：成功后，找到这个项目打开proj.win32目录下的Hello.slnF5成功了。

  8. 利用cocos2dx 3.2开发消灭星星十为游戏添加音效项目源码分享

    一个游戏，声音也是非常的重要，其实cocos2dx里面的简单音效引擎的使用是非常简单的。我这里只不过是用一个类对所有的音效进行管理罢了。Audio.hAudio.cpp好了，本系列教程到此结束，第一次写教程如有不对请见谅或指教，谢谢大家。最后附上整个项目的源代码点击打开链接

  9. 03 Helloworld

    程序都有一个入口点，在C++就是main函数了，打开main.cpp，代码如下：123456789101112131415161718#include"main.h"#include"AppDelegate.h"#include"cocos2d.h"USING_NS_CC;intAPIENTRY_tWinMain{UNREFERENCED_ParaMETER;UNREFERENCED_ParaMETER;//createtheapplicationinstanceAppDelegateapp;return

  10. MenuItemImage*图标菜单创建注意事项

    学习cocos2dx,看的是cocos2d-x3.x手游开发实例详解，这本书错误一大把，本着探索求知勇于发现错误改正错误的精神，我跟着书上的例子一起调试，当学习到场景切换这个小节的时候，出了个错误，卡了我好几个小时。

返回
顶部