Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

最近忙死了，得空发表一篇关于所有的Cocostudio中的UI组件使用的教程，其实是对所有UI组件的Api介绍，作为手册收藏下吧！！

CocosStudio UI组件

按钮UIButton
复选框UICheckBox
滑块UISlider
图片UIImageView
进度条UILoadingBar
纹理文本 UITextAtlas
字体文本 UIText
图片字体文本 UITextBMFont
文本区域 UITextField
布局组件 UILayout
滚动组件 UIScrollView
页面切换组件 UIPageView
列表组件   UIListView
所有控件都继承 UIWidget
可以通过addChild()添加UIWidget类型的节点
可以通过addRender()添加CCNode类型的节点
一、使用方法
1.1 在解决方案中添加项目并添加引用
libCocostudio
libGui
libExtensions
1.2 在项目中引用以下2个头文件
#include "extensions/cocos-ext.h"
#include "ui/CocosGUI.h"
USING_NS_CC;
using namespace ui;
1.3 使用CocosStudio UI编辑器或直接通过代码定义组件对象
二、各组件使用详解
2.1.UIButton
   2.1.1 按钮对象的创建
        // 创建按钮 button
        Button* button = Button::create("cocosui/animationbuttonnormal.png",
                                        "cocosui/animationbuttonpressed.png");
        //设置坐标
        button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        //添加事件
        button->addTouchEventListener(this, toucheventselector(UIButtonTest::touchEvent));
        //添加到图层
        _uiLayer->addChild(button);
    2.1.2 事件处理方法：
void UIButtonTest::touchEvent(Ref *pSender, TouchEventType type)
{   switch (type)
    {   case TOUCH_EVENT_BEGAN:
            _displayValueLabel->setText(String::createWithFormat("Touch Down")->getCString());
            break;            
        case TOUCH_EVENT_MOVED:
            _displayValueLabel->setText(String::createWithFormat("Touch Move")->getCString());
            break;            
        case TOUCH_EVENT_ENDED:
            _displayValueLabel->setText(String::createWithFormat("Touch Up")->getCString());
            break;            
        case TOUCH_EVENT_CANCELED:
            _displayValueLabel->setText(String::createWithFormat("Touch Cancelled")->getCString());
            break;
        default:
            break;
    }
    
}  
   2.1.3 使用9Path图片
    // Create the button
        Button* button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        // open scale9 render
        button->setScale9Enabled(true);
        button->setCapInsets(Rect(5,5,15,15));
        button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        button->setSize(Size(150, 70));
        button->addTouchEventListener(this, toucheventselector(UIButtonTest_Scale9::touchEvent));
        _uiLayer->addChild(button);
   2.1.4 实现PressedAction效果
         // Create the button
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPressedActionEnabled(true);
        button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        button->addTouchEventListener(this, toucheventselector(UIButtonTest_PressedAction::touchEvent));        
        _uiLayer->addChild(button);
   2.1.5 实现TitleButton
    // Create the button with title
        Button* button = Button::create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png");
        button->setTitleText("Title Button");
        button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        button->addTouchEventListener(this, toucheventselector(UIButtonTest_Title::touchEvent));
        _uiLayer->addChild(button);
2.2.UICheckBox
   2.2.1 添加CheckBox
   // Create the checkbox
        CheckBox* checkBox = CheckBox::create("cocosui/check_box_normal.png",
                                              "cocosui/check_box_normal_press.png",
                                              "cocosui/check_box_active.png",
                                              "cocosui/check_box_normal_disable.png",
                                              "cocosui/check_box_active_disable.png");
        checkBox->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        
        checkBox->addEventListenerCheckBox(this, checkboxselectedeventselector(UICheckBoxTest::selectedEvent));
        _uiLayer->addChild(checkBox);
    2.2.2 处理用户选中事件
    void UICheckBoxTest::selectedEvent(Ref* pSender,CheckBoxEventType type)
{
    switch (type)
    {
        case CHECKBOX_STATE_EVENT_SELECTED:
            _displayValueLabel->setText(String::createWithFormat("Selected")->getCString());
            break;
            
        case CHECKBOX_STATE_EVENT_UNSELECTED:
            _displayValueLabel->setText(String::createWithFormat("Unselected")->getCString());
            break;
            
        default:
            break;
    }
    
}    
2.3.UISlider
2.3.1 
      // Create the slider
        Slider* slider = Slider::create();
        slider->loadBarTexture("cocosui/sliderTrack.png");
        slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "");
        slider->loadProgressBarTexture("cocosui/sliderProgress.png");
        slider->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f/* + slider->getSize().height * 2.0f*/));
        slider->addEventListenerSlider(this, sliderpercentchangedselector(UISliderTest::sliderEvent));
        _uiLayer->addChild(slider); 
2.3.2 
    void UISliderTest::sliderEvent(Ref *pSender, SliderEventType type)
   {
    if (type == SLIDER_PERCENTCHANGED)
     {
        Slider* slider = dynamic_cast(pSender);
        int percent = slider->getPercent();
        _displayValueLabel->setText(String::createWithFormat("Percent %d", percent)->getCString());
     }
   }
2.3.3 
    // Create the slider
        Slider* slider = Slider::create();
        slider->loadBarTexture("cocosui/sliderTrack2.png");
        slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "");
        slider->loadProgressBarTexture("cocosui/slider_bar_active_9patch.png");
        slider->setScale9Enabled(true);
        slider->setCapInsets(Rect(0, 0, 0, 0));
        slider->setSize(Size(250.0f, 19));
        slider->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f/* + slider->getSize().height * 3.0f*/));
        slider->addEventListenerSlider(this, sliderpercentchangedselector(UISliderTest_Scale9::sliderEvent));
        _uiLayer->addChild(slider);
2.4.UIImageView
2.4.1 // Create the imageview
        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
        imageView->setPosition(Point(widgetSize.width / 2.0f,
                                     widgetSize.height / 2.0f));
        
        _uiLayer->addChild(imageView);
2.4.2 
   // Create the imageview
        ImageView* imageView = ImageView::create("cocosui/buttonHighlighted.png");
        imageView->setScale9Enabled(true);
        imageView->setSize(Size(300, 115));
        imageView->setPosition(Point(widgetSize.width / 2.0f,
                                     widgetSize.height / 2.0f));
        
2.5.UILoadingBar
2.5.1创建进度条
  // Create the loading bar
        LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png");
        loadingBar->setTag(0);
        loadingBar->setPosition(Point(widgetSize.width / 2.0f,
                                      widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));
        
        _uiLayer->addChild(loadingBar);
2.5.2 修改进度条的长度
    void UILoadingBarTest_Left::update(float delta)
{
    _count++;
    if (_count > 100)
    {
        _count = 0;
    }
    LoadingBar* loadingBar = static_cast(_uiLayer->getChildByTag(0));
    loadingBar->setPercent(_count);
}
2.5.3 修改进度条的方向
 // Create the loading bar
        LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png");
        loadingBar->setTag(0);
        loadingBar->setDirection(LoadingBarTypeRight);
        
        loadingBar->setPosition(Point(widgetSize.width / 2.0f,
                                      widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));
        
        _uiLayer->addChild(loadingBar);
2.5.4 scale9
        LoadingBar* loadingBar = LoadingBar::create("cocosui/slider_bar_active_9patch.png");
        loadingBar->setTag(0);
        loadingBar->setScale9Enabled(true);
        loadingBar->setCapInsets(Rect(0, 0, 0, 0));
        loadingBar->setSize(Size(300, 13));        
        loadingBar->setPosition(Point(widgetSize.width / 2.0f,
                                      widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));       
        _uiLayer->addChild(loadingBar);
2.6.UITextAtlas
        TextAtlas* textAtlas = TextAtlas::create("1234567890", "cocosui/labelatlas.png", 17, 22, "0");
        textAtlas->setPosition(Point((widgetSize.width) / 2, widgetSize.height / 2.0f));
        _uiLayer->addChild(textAtlas);  
2.7.UIText
   2.7.1 
        // Create the text
        Text* text = Text::create("Text", "AmericanTypewriter", 30);
        text->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f + text->getSize().height / 4.0f));
        _uiLayer->addChild(text);
   2.7.2 
        // Create the line wrap
        Text* text = Text::create("Text can line wrap","AmericanTypewriter",32);
        text->ignoreContentAdaptWithSize(false);
        text->setSize(Size(280, 150));
        text->setTextHorizontalAlignment(TextHAlignment::CENTER);
        text->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f - text->getSize().height / 8.0f));
        _uiLayer->addChild(text);
   2.7.3 create with ttf
     Text* alert = Text::create("Text line wrap","fonts/Marker Felt.ttf",30);
        alert->setColor(Color3B(159, 168, 176));
        alert->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f - alert->getSize().height * 1.75f));
        _uiLayer->addChild(alert);
2.8.UITextBMFont
     // Create the TextBMFont
        TextBMFont* textBMFont = TextBMFont::create("BMFont", "cocosui/bitmapFontTest2.fnt");
        textBMFont->setPosition(Point(widgetSize.width / 2, widgetSize.height / 2.0f + textBMFont->getSize().height / 8.0f));
        _uiLayer->addChild(textBMFont);
2.9.UITextField
 2.9.1
        // Create the textfield
        TextField* textField = TextField::create("input words here","fonts/Marker Felt.ttf",30);


        textField->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
        textField->addEventListenerTextField(this, textfieldeventselector(UITextFieldTest::textFieldEvent));
        _uiLayer->addChild(textField);
 2.9.2
      void UITextFieldTest::textFieldEvent(Ref *pSender, TextFiledEventType type)
{
    switch (type)
    {
        case TEXTFIELD_EVENT_ATTACH_WITH_IME:
        {
            TextField* textField = dynamic_cast(pSender);
            Size screenSize = CCDirector::getInstance()->getWinSize();
            textField->runAction(CCMoveTo::create(0.225f,
                                                  Point(screenSize.width / 2.0f, screenSize.height / 2.0f + textField->getContentSize().height / 2.0f)));
            _displayValueLabel->setText(String::createWithFormat("attach with IME")->getCString());
        }
            break;
            
        case TEXTFIELD_EVENT_DETACH_WITH_IME:
        {
            TextField* textField = dynamic_cast(pSender);
            Size screenSize = CCDirector::getInstance()->getWinSize();
            textField->runAction(CCMoveTo::create(0.175f, Point(screenSize.width / 2.0f, screenSize.height / 2.0f)));
            _displayValueLabel->setText(String::createWithFormat("detach with IME")->getCString());
        }
            break;
            
        case TEXTFIELD_EVENT_INSERT_TEXT:
            _displayValueLabel->setText(String::createWithFormat("insert words")->getCString());
            break;
            
        case TEXTFIELD_EVENT_DELETE_BACKWARD:
            _displayValueLabel->setText(String::createWithFormat("delete word")->getCString());
            break;
            
        default:
            break;
    }
}
2.9.2
        textField->setMaxLengthEnabled(true);
        textField->setMaxLength(3);
2.9.3 
        textField->setPasswordEnabled(true);
        textField->setPasswordStyleText("*");
2.9.4 
        TextField* textField = TextField::create("input words here","fonts/Marker Felt.ttf",30);
        textField->ignoreContentAdaptWithSize(false);
        textField->setSize(Size(240, 160));
        textField->setTextHorizontalAlignment(TextHAlignment::CENTER);
        textField->setTextVerticalAlignment(TextVAlignment::CENTER);
2.10.UILayout
2.10.1
       // Create the layout
        Layout* layout = Layout::create();
        layout->setSize(Size(280, 150));
        Size backgroundSize = background->getSize();
        layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - layout->getSize().width) / 2.0f,
                                  (widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - layout->getSize().height) / 2.0f));
        _uiLayer->addChild(layout);//将Layout添加到场景
2.10.2在Layout中添加组件
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPosition(Point(button->getSize().width / 2.0f,
                                  layout->getSize().height - button->getSize().height / 2.0f));
        layout->addChild(button);
        
        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f));
        layout->addChild(titleButton);
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2.0f,
                                         button_scale9->getSize().height / 2.0f));
        
        layout->addChild(button_scale9);
2.10.3 
        layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);
        layout->setBackGroundColor(Color3B(128, 128, 128));
        layout->setSize(Size(280, 150));
2.10.4 
        layout->setBackGroundColorType(LAYOUT_COLOR_GRADIENT);
        layout->setBackGroundColor(Color3B(64, 64, 64), Color3B(192, 192, 192));
2.10.5
        layout->setClippingEnabled(true);
        layout->setBackGroundImage("cocosui/Hello.png");
2.10.6
        layout->setBackGroundImageScale9Enabled(true);
        layout->setBackGroundImage("cocosui/green_edit.png");
2.10.7 
// Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LAYOUT_LINEAR_VERTICAL);
        layout->setSize(Size(280, 150));        
        Size backgroundSize = background->getSize();
        layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - layout->getSize().width) / 2.0f,
                                  (widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - layout->getSize().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(LINEAR_GRAVITY_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(LINEAR_GRAVITY_CENTER_HORIZONTAL);
        lp2->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));
        
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        layout->addChild(button_scale9);
        
        LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
        button_scale9->setLayoutParameter(lp3);
        lp3->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
        lp3->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f)); 
2.10.8
    // Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LAYOUT_LINEAR_HORIZONTAL);
        layout->setClippingEnabled(true);
        layout->setSize(Size(280, 150));        
        Size backgroundSize = background->getSize();
        layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - layout->getSize().width) / 2.0f,
                                  (widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - layout->getSize().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(LINEAR_GRAVITY_CENTER_VERTICAL);
        lp1->setMargin(Margin(0.0f, 10.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(LINEAR_GRAVITY_CENTER_VERTICAL);
        lp2->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));
        
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        layout->addChild(button_scale9);
        
        LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
        button_scale9->setLayoutParameter(lp3);
        lp3->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL);
        lp3->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));
2.10.9
     // Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LAYOUT_RELATIVE);
        layout->setSize(Size(280, 150));
        layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);
        layout->setBackGroundColor(Color3B::GREEN);
        Size backgroundSize = background->getSize();
        layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                (backgroundSize.width - layout->getSize().width) / 2.0f,
                                (widgetSize.height - backgroundSize.height) / 2.0f +
                                (backgroundSize.height - layout->getSize().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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_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(RELATIVE_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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_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(RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM);
        button_RightBottom->setLayoutParameter(rp_RightBottom);
        
 2.10.10
  // Create the layout
        Layout* layout = Layout::create();
        layout->setLayoutType(LAYOUT_RELATIVE);
        layout->setSize(Size(280, 150));
        Size backgroundSize = background->getSize();
        layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                (backgroundSize.width - layout->getSize().width) / 2.0f,
                                (widgetSize.height - backgroundSize.height) / 2.0f +
                                (backgroundSize.height - layout->getSize().height) / 2.0f));
        _uiLayer->addChild(layout);
        
        // center
        ImageView* imageView_Center = ImageView::create("cocosui/scrollviewbg.png");
        layout->addChild(imageView_Center);
        
        RelativeLayoutParameter* rp_Center = RelativeLayoutParameter::create();
        rp_Center->setRelativeName("rp_Center");
        rp_Center->setAlign(RELATIVE_CENTER_IN_PARENT);
        imageView_Center->setLayoutParameter(rp_Center);
        
        
        // above center
        ImageView* imageView_AboveCenter = ImageView::create("cocosui/switch-mask.png");
        layout->addChild(imageView_AboveCenter);
        
        RelativeLayoutParameter* rp_AboveCenter = RelativeLayoutParameter::create();
        rp_AboveCenter->setRelativeToWidgetName("rp_Center");
        rp_AboveCenter->setAlign(RELATIVE_LOCATION_ABOVE_CENTER);
        imageView_AboveCenter->setLayoutParameter(rp_AboveCenter);
        
        
        // below center
        ImageView* imageView_BelowCenter = ImageView::create("cocosui/switch-mask.png");
        layout->addChild(imageView_BelowCenter);
        
        RelativeLayoutParameter* rp_BelowCenter = RelativeLayoutParameter::create();
        rp_BelowCenter->setRelativeToWidgetName("rp_Center");
        rp_BelowCenter->setAlign(RELATIVE_LOCATION_BELOW_CENTER);
        imageView_BelowCenter->setLayoutParameter(rp_BelowCenter);
        
        
        // left center
        ImageView* imageView_LeftCenter = ImageView::create("cocosui/switch-mask.png");
        layout->addChild(imageView_LeftCenter);
        
        RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();
        rp_LeftCenter->setRelativeToWidgetName("rp_Center");
        rp_LeftCenter->setAlign(RELATIVE_LOCATION_LEFT_OF_CENTER);
        imageView_LeftCenter->setLayoutParameter(rp_LeftCenter);
        // right center
        ImageView* imageView_RightCenter = ImageView::create("cocosui/switch-mask.png");
        layout->addChild(imageView_RightCenter);      
        RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();
        rp_RightCenter->setRelativeToWidgetName("rp_Center");
        rp_RightCenter->setAlign(RELATIVE_LOCATION_RIGHT_OF_CENTER);
        imageView_RightCenter->setLayoutParameter(rp_RightCenter);     
2.11.UIScrollView
 2.11.1 创建垂直滚动UI
 // Create the scrollview by vertical
        ui::ScrollView* scrollView = ui::ScrollView::create();
        scrollView->setSize(Size(280.0f, 150.0f));        
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                               (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                               (widgetSize.height - backgroundSize.height) / 2.0f +
                               (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        _uiLayer->addChild(scrollView);
        
        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
        
        float innerWidth = scrollView->getSize().width;
        float innerHeight = scrollView->getSize().height + imageView->getSize().height;
        
        scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));                
        
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPosition(Point(innerWidth / 2.0f, scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
        scrollView->addChild(button);
        
        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Point(innerWidth / 2.0f, button->getBottomInParent() - button->getSize().height));
        scrollView->addChild(titleButton);
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Point(innerWidth / 2.0f, titleButton->getBottomInParent() - titleButton->getSize().height));
        scrollView->addChild(button_scale9);
        
        imageView->setPosition(Point(innerWidth / 2.0f, imageView->getSize().height / 2.0f));
        scrollView->addChild(imageView);            
2.11.2
  // Create the scrollview by horizontal
        ui::ScrollView* scrollView = ui::ScrollView::create();
        scrollView->setBounceEnabled(true);
        scrollView->setDirection(SCROLLVIEW_DIR_HORIZONTAL);
        scrollView->setSize(Size(280.0f, 150.0f));
        scrollView->setInnerContainerSize(scrollView->getSize());
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                    (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                                    (widgetSize.height - backgroundSize.height) / 2.0f +
                                    (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        _uiLayer->addChild(scrollView);
        
        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
        
        float innerWidth = scrollView->getSize().width + imageView->getSize().width;
        float innerHeight = scrollView->getSize().height;
        
        scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));
        
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPosition(Point(button->getSize().width / 2.0f,
                                scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
        scrollView->addChild(button);
        
        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Point(button->getRightInParent() + button->getSize().width / 2.0f,
                                    button->getBottomInParent() - button->getSize().height / 2.0f));
        scrollView->addChild(titleButton);
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Point(titleButton->getRightInParent() + titleButton->getSize().width / 2.0f,
                                       titleButton->getBottomInParent() - titleButton->getSize().height / 2.0f));
        scrollView->addChild(button_scale9);                
                
        imageView->setPosition(Point(innerWidth - imageView->getSize().width / 2.0f,
                                   button_scale9->getBottomInParent() - button_scale9->getSize().height / 2.0f));
        scrollView->addChild(imageView);  
2.11.3
       // Create the dragpanel
        ui::ScrollView* scrollView = ui::ScrollView::create();
        scrollView->setDirection(SCROLLVIEW_DIR_BOTH);
        scrollView->setTouchEnabled(true);
        scrollView->setBounceEnabled(true);//反弹
        scrollView->setBackGroundImageScale9Enabled(true);
        scrollView->setBackGroundImage("cocosui/green_edit.png");
        scrollView->setSize(Size(210, 122.5));
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                    (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                                    (widgetSize.height - backgroundSize.height) / 2.0f +
                                    (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        ImageView* imageView = ImageView::create("Hello.png");
        scrollView->addChild(imageView);
        
        scrollView->setInnerContainerSize(imageView->getContentSize());
        Size innerSize = scrollView->getInnerContainerSize();
        imageView->setPosition(Point(innerSize.width / 2.0f, innerSize.height / 2.0f));
        
        _uiLayer->addChild(scrollView);
2.11.4
    ui::ScrollView* sc = ui::ScrollView::create();
        sc->setBackGroundColor(Color3B::GREEN);
        sc->setBackGroundColorType(LAYOUT_COLOR_SOLID);
        sc->setDirection(SCROLLVIEW_DIR_BOTH);
        sc->setInnerContainerSize(Size(480, 320));
        sc->setSize(Size(100,100));
        Size backgroundSize = background->getContentSize();
        sc->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                              (backgroundSize.width - sc->getSize().width) / 2.0f,
                              (widgetSize.height - backgroundSize.height) / 2.0f +
                              (backgroundSize.height - sc->getSize().height) / 2.0f));
                                                          //减速
        sc->scrollToPercentBothDirection(Point(50, 50), 1, true);
        ImageView* iv = ImageView::create("cocosui/Hello.png");
        iv->setPosition(Point(240, 160));
        sc->addChild(iv);
        _uiLayer->addChild(sc);
2.12.UIPageView
 // Create the page view
        PageView* pageView = PageView::create();
        pageView->setSize(Size(240.0f, 130.0f));
        Size backgroundSize = background->getContentSize();
        pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                  (backgroundSize.width - pageView->getSize().width) / 2.0f,
                                  (widgetSize.height - backgroundSize.height) / 2.0f +
                                  (backgroundSize.height - pageView->getSize().height) / 2.0f));
        
        for (int i = 0; i < 3; ++i)
        {
            Layout* layout = Layout::create();
            layout->setSize(Size(240.0f, 130.0f));
            
            ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png");
            imageView->setScale9Enabled(true);
            imageView->setSize(Size(240, 130));
            imageView->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().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(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f));
            layout->addChild(label);
            
            pageView->addPage(layout);
        }
        pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));
        
        _uiLayer->addChild(pageView);
  2.12.2
  void UIPageViewTest::pageViewEvent(Ref *pSender, PageViewEventType type)
{
    switch (type)
    {
        case PAGEVIEW_EVENT_TURNING:
        {
            PageView* pageView = dynamic_cast(pSender);
            
            _displayValueLabel->setText(CCString::createWithFormat("page = %ld", pageView->getCurPageIndex() + 1)->getCString());
        }
            break;
            
        default:
            break;
    }
}      
     
2.13.UIListView
2.13.1 
 // create list view ex data
        _array = Array::create();
        CC_SAFE_RETAIN(_array);
        for (int i = 0; i < 20; ++i)
        {
            __String* ccstr = __String::createWithFormat("listview_item_%d", i);
            _array->addObject(ccstr);
        }
        
        
        // Create the list view ex
        ListView* listView = ListView::create();
        // set list view ex direction
        listView->setDirection(SCROLLVIEW_DIR_VERTICAL);
        listView->setTouchEnabled(true);
        listView->setBounceEnabled(true);
        listView->setBackGroundImage("cocosui/green_edit.png");
        listView->setBackGroundImageScale9Enabled(true);
        listView->setSize(Size(240, 130));
        listView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
                                    (backgroundSize.width - listView->getSize().width) / 2.0f,
                                    (widgetSize.height - backgroundSize.height) / 2.0f +
                                    (backgroundSize.height - listView->getSize().height) / 2.0f));
        listView->addEventListenerListView(this, listvieweventselector(UIListViewTest_Vertical::selectedItemEvent));
        _uiLayer->addChild(listView);
        
        
        // create model
        Button* default_button = Button::create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png");
        default_button->setName("Title Button");
        
        Layout* default_item = Layout::create();
        default_item->setTouchEnabled(true);
        default_item->setSize(default_button->getSize());
        default_button->setPosition(Point(default_item->getSize().width / 2.0f,
                                          default_item->getSize().height / 2.0f));
        default_item->addChild(default_button);
        
        // set model
        listView->setItemModel(default_item);
        
        // add default item
        ssize_t count = _array->count();
        for (int i = 0; i < count / 4; ++i)
        {
            listView->pushBackDefaultItem();
        }
        // insert default item
        for (int i = 0; i < count / 4; ++i)
        {
            listView->insertDefaultItem(0);
        }
        
        // add custom item
        for (int i = 0; i < count / 4; ++i)
        {
            Button* custom_button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
            custom_button->setName("Title Button");
            custom_button->setScale9Enabled(true);
            custom_button->setSize(default_button->getSize());
            
            Layout *custom_item = Layout::create();
            custom_item->setSize(custom_button->getSize());
            custom_button->setPosition(Point(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
            custom_item->addChild(custom_button);
            
            listView->pushBackCustomItem(custom_item);
        }
        // insert custom item
        Vector& items = listView->getItems();
        ssize_t items_count = items.size();
        for (int i = 0; i < count / 4; ++i)
        {
            Button* custom_button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
            custom_button->setName("Title Button");
            custom_button->setScale9Enabled(true);
            custom_button->setSize(default_button->getSize());
            
            Layout *custom_item = Layout::create();
            custom_item->setSize(custom_button->getSize());
            custom_button->setPosition(Point(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f));
            custom_item->addChild(custom_button);
            
            listView->insertCustomItem(custom_item, items_count);
        }
        
        // set item data
        items_count = items.size();
        for (int i = 0; i < items_count; ++i)
        {
            Widget* item = listView->getItem(i);
            Button* button = static_cast(item->getChildByName("Title Button"));
            ssize_t index = listView->getIndex(item);
            button->setTitleText(static_cast<__String*>(_array->getObjectAtIndex(index))->getCString());
        }
        
        // remove last item
        listView->removeLastItem();
        
        // remove item by index
        items_count = items.size();
        listView->removeItem(items_count - 1);
        
        // set all items layout gravity
        listView->setGravity(LISTVIEW_GRAVITY_CENTER_VERTICAL);
        
        // set items margin
        listView->setItemsMargin(2.0f);
   2.13.2 
   void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender, ListViewEventType type)
{
    switch (type)
    {
        case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_START:
        {
            ListView* listView = static_cast(pSender);
            CC_UNUSED_PARAM(listView);
            CCLOG("select child start index = %ld", listView->getCurSelectedIndex());
            break;
        }
        case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END:
        {
            ListView* listView = static_cast(pSender);
            CC_UNUSED_PARAM(listView);
            CCLOG("select child end index = %ld", listView->getCurSelectedIndex());
            break;
        }
        default:
            break;
    }
}
2.13.3  
        // Create the list view ex
        ListView* listView = ListView::create();
        // set list view ex direction
        listView->setDirection(SCROLLVIEW_DIR_HORIZONTAL);
        listView->setTouchEnabled(true);
        listView->setBounceEnabled(true);
        listView->setBackGroundImage("cocosui/green_edit.png");
        listView->setBackGroundImageScale9Enabled(true);
        listView->setSize(Size(240, 130));


2.14.UIRichText
 _richText = RichText::create();
        _richText->ignoreContentAdaptWithSize(false);
        _richText->setSize(Size(100, 100));
        
        RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, "This color is white. ", "Helvetica", 10);
        RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, "And this is yellow. ", "Helvetica", 10);
        RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, 255, "This one is blue. ", "Helvetica", 10);
        RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, 255, "And green. ", "Helvetica", 10);
        RichElementText* re5 = RichElementText::create(5, Color3B::RED, 255, "Last one is red ", "Helvetica", 10);
        
        RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, 255, "cocosui/sliderballnormal.png");
        
        cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosui/100/100.ExportJson");
        cocostudio::Armature *pAr = cocostudio::Armature::create("100");
        pAr->getAnimation()->play("Animation1");
        
        RichElementCustomNode* recustom = RichElementCustomNode::create(1, Color3B::WHITE, 255, pAr);
        RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 255, "Have fun!! ", "Helvetica", 10);
        _richText->pushBackElement(re1);
        _richText->insertElement(re2, 1);
        _richText->pushBackElement(re3);
        _richText->pushBackElement(re4);
        _richText->pushBackElement(re5);
        _richText->insertElement(reimg, 2);
        _richText->pushBackElement(recustom);
        _richText->pushBackElement(re6);
        
        _richText->setPosition(Point(widgetSize.width / 2, widgetSize.height / 2));
        _richText->setLocalZOrder(10);  
        _widget->addChild(_richText);
三、在CocosStudio的UI编辑器中获取组件对象
3.1使用UI编辑器
3.2导出UI文件
3.3在Cocos2d-x中加载UI文件
3.4获取UI层中的子对象


四、UI组件详解
4.1使用UIButton
4.1.1 载入UIButton文件
bool UIButtonTest_Editor::init()
{
    if (UIScene_Editor::init())
    {
        _layout = static_cast(cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosui/UIEditorTest/UIButton_Editor/UIButton_Editor_1.json"));
        _touchGroup->addChild(_layout);
        Size screenSize = CCDirector::getInstance()->getWinSize();
        Size rootSize = _layout->getSize();
        _touchGroup->setPosition(Point((screenSize.width - rootSize.width) / 2,
                                       (screenSize.height - rootSize.height) / 2));
        
        Layout* root = static_cast(_layout->getChildByName("root_Panel"));


        Text* back_label = static_cast(Helper::seekWidgetByName(root, "back"));
        back_label->addTouchEventListener(this, toucheventselector(UIScene_Editor::toGUIEditorTestScene));
        
        _sceneTitle = static_cast(Helper::seekWidgetByName(root, "UItest"));
        
        Button* button = static_cast(Helper::seekWidgetByName(root, "Button_123"));
        button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
        
        Button* title_button = static_cast(Helper::seekWidgetByName(root, "Button_126"));
        title_button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
        
        Button* scale9_button = static_cast(Helper::seekWidgetByName(root, "Button_129"));
        scale9_button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
        
        _displayValueLabel = Text::create();
        _displayValueLabel->setFontName("fonts/Marker Felt.ttf");
        _displayValueLabel->setFontSize(30);
        _displayValueLabel->setText("No event");
        _displayValueLabel->setPosition(Point(_layout->getSize().width / 2,
                                              _layout->getSize().height - _displayValueLabel->getSize().height * 1.75f));
        _touchGroup->addChild(_displayValueLabel);
        
        return true;
    }
    
    return false;
}


void UIButtonTest_Editor::touchEvent(Ref *pSender, TouchEventType type)
{
    switch (type)
    {
        case TOUCH_EVENT_BEGAN:
            _displayValueLabel->setText("Touch Down");
            break;
            
        case TOUCH_EVENT_MOVED:
            _displayValueLabel->setText("Touch Moved");
            break;
            
        case TOUCH_EVENT_ENDED:
            _displayValueLabel->setText("Touch Ended");
            break;
            
        case TOUCH_EVENT_CANCELED:
            _displayValueLabel->setText("Touch Canceled");
            break;
            
        default:
            break;
    }
}