cocos2dx 控件学习EditBox TableView ControlSlider ScrollView

{
    EditBox 输入框
    TableView 滑动格子控件 
    ControlSlider  进度条
    ScrollView     滑动 
    ControlStepper 加减
    ControlSwitch  开关
    ControlColourPicker 提取颜色
    ControlButton   按键
    ControlPotentiometer    旋钮 （旋转开关）

}

本人用这些类，有遇到问题的，本人下面都有注释，不对的地方，可以指出，有任何疑问，也可以留言。

{//EditBox 输入框
    #include "extensions/cocos-ext.h" //头文件
    using namespace cocos2d::extension;//空间

     cocos2d::extension::EditBoxDelegate  //代理 类
     virtual void editBoxReturn(EditBox* editBox) = 0; //实现这个虚函数

    EditBox * _editName = EditBox::create(editBoxSize, Scale9Sprite::create("extensions/green_edit.png"));
    _editName->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height*3/4));
    _editName->setFontName("Paint Boy");
    _editName->setFontSize(25);
    _editName->setFontColor(Color3B::RED);
    _editName->setPlaceHolder("Name:");//默认显示的文字
    _editName->setPlaceholderFontColor(Color3B::WHITE); //字体颜色
    _editName->setMaxLength(8);// 设置字符串长度
    _editName->setInputFlag(EditBox::InputFlag::PASSWORD);//输入文字的标记 例 密码类型
    _editName->setReturnType(EditBox::KeyboardReturnType::DONE);//键盘右下角显示什么键值 
    _editName->setInputMode(EditBox::InputMode::EMAIL_ADDRESS);//输入的类型 例 邮箱  url 任何文本 数字
    _editName->setDelegate(this);//设置代理
    addChild(_editName);
   

  第一个是键盘问题
    //横竖屏键盘 问题 在 ios 上有这样的问题 android 上没有这样的问题
    //屏幕什么方向输入的键盘就什么方向，这是正确的认识，ios 设置了方向但是不管用 ，
    //必须在Info.plist 文件中修改 Supported interface orientations ->Landscape (right home button),Landscape (left home button) 把这个配置文件修改一下就可以了
    //在ios中你不修改这个文件，即使你设置了屏幕的方向，但在ios中这个还是你配置Info.plist文件的方向，你可以在销毁这个应用时看这个是什么方向，横的就是横的，竖的就是竖的
     第二个是显示问题
    //在ios 中这个输入框 能看的下去，可在android 上那就是 独立出一个额外的框，用得时考虑一下在说吧

 第三个是显示问题

  不能换货，一行输入到底。字符，符号，多文本，返回键，都可以设置。
}

{// TableView 滑动格子控件 
    #include "extensions/cocos-ext.h" //头文件
    using namespace cocos2d::extension;//空间

    public cocos2d::extension::TableViewDataSource, public cocos2d::extension::TableViewDelegate //代理  类

    //添加虚函数
    virtual void tableCellTouched(cocos2d::extension::TableView* table, cocos2d::extension::TableViewCell* cell); //必须实现    点击表格后回调这个函数
    virtual cocos2d::Size tableCellSizeForIndex(cocos2d::extension::TableView *table, ssize_t idx);//设置表格的大小
    virtual cocos2d::extension::TableViewCell* tableCellAtIndex(cocos2d::extension::TableView *table, ssize_t idx);//必须实现   加载表格
    virtual ssize_t numberOfCellsInTableView(cocos2d::extension::TableView *table);//必须实现   滑动最大有几个表格，不是当前显示的最大数。


    TableView* tableView = TableView::create(this, Size(250, 60));//实现代理的类，显示框大小
    tableView->setDirection(ScrollView::Direction::HORIZONTAL);//方向
    tableView->setPosition(Vec2(20,winSize.height/2-30));//位置
    tableView->setDelegate(this);//设置代理
    this->addChild(tableView);
    tableView->reloadData();//重新装数据 类似于刷新数据

   //虚函数实现
    //点击表格后回调这个函数
    void TableViewTestLayer::tableCellTouched(TableView* table, TableViewCell* cell)
    {
        CCLOG("cell touched at index: %ld", cell->getIdx());
    }
    //设置表格的大小
    Size TableViewTestLayer::tableCellSizeForIndex(TableView *table, ssize_t idx)
    {
        if (idx == 2) {//也可以单设置
            return Size(100, 100);
        }
        return Size(60, 60);
    }
    //加载表格
    TableViewCell* TableViewTestLayer::tableCellAtIndex(TableView *table, ssize_t idx)
    {
        TableViewCell *cell = table->dequeueCell();//获取的表格是无须的 3.2版本还是这样，没有修改这问题，你自己修改，下面有注释
        if (!cell) {
            cell = new TableViewCell();
            cell->autorelease();
            auto sprite = Sprite::create("Icon-50.png");
            sprite->setAnchorPoint(Vec2::ZERO);
            sprite->setPosition(Vec2(0, 0));
            cell->addChild(sprite);
            
            auto string = String::createWithFormat("%ld", idx);
           
            auto label = Label::createWithSystemFont(string->getCString(), "Helvetica", 20.0);
            label->setPosition(Vec2::ZERO);
            label->setAnchorPoint(Vec2::ZERO);
            label->setTag(123);
            cell->addChild(label);
        }

        return cell;
    }
    //必须实现   滑动最大有几个表格，不是当前显示的最大数。
    ssize_t TableViewTestLayer::numberOfCellsInTableView(TableView *table)
    {
        return 20;
    }
    // 数据对不上的事，dequeueCell()函数中 修改  if (/*_cellsFreed.empty()*/ true) 就可以了。
}


{// ControlSlider  进度条
    #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;

        // A进度条背景图片  B滑动图片 C显示滑动在什么位置
        ControlSlider *slider = ControlSlider::create("extensions/sliderTrack.png","extensions/sliderProgress.png" ,"extensions/sliderThumb.png");
        slider->setAnchorPoint(Vec2(0.5f, 1.0f));
        slider->setMinimumValue(0.0f); // 最小值
        slider->setMaximumValue(5.0f); // 最大值
        slider->setEnabled(true);//是否可触摸 默认是可以触摸
        slider->setPosition(Vec2(screenSize.width / 2.0f, screenSize.height / 2.0f + 16));
        slider->setTag(1);


        // When the value of the slider will change, the given selector will be call
        slider->addTargetWithActionForControlEvents(this, cccontrol_selector(ControlSliderTest::valueChanged), Control::EventType::VALUE_CHANGED);//滑动回调  最后的个类型 我也不知道
        addChild(slider);

        void valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);
        void ControlSliderTest::valueChanged(Ref *sender, Control::EventType controlEvent)
        {
            ControlSlider* pSlider = (ControlSlider*)sender;
             
            float vf= pSlider->getValue();
            CCLOG("-->%f",vf);
        }
}


{// ScrollView 滑动 
    #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;
    ,public cocos2d::extension::ScrollViewDelegate

     virtual void scrollViewDidScroll(cocos2d::extension::ScrollView* view);
    virtual void scrollViewDidZoom(cocos2d::extension::ScrollView* view);

    ScrollView *pScroll=ScrollView::create();
    pScroll->setViewSize(Size(600,200));//设置滚动试图的试图大小
    pScroll->setPosition(visibleSize.width / 2.0f, visibleSize.height / 2.0f);//设置位置  新的层默认左下角为原点
    pScroll->setDirection(ScrollView::Direction::HORIZONTAL);//设置滑动方向
    pScroll->setDelegate(this);//注册
    pScroll->setContainer(continerLayer);
    addChild(pScroll);

    void HelloWorld::scrollViewDidScroll(cocos2d::extension::ScrollView* view) {}
    void HelloWorld::scrollViewDidZoom(cocos2d::extension::ScrollView* view){}
}


{ //ControlStepper 加减
     #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;

    void valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);

    auto minusSprite       = Sprite::create("stepper-minus.png");
    auto plusSprite        = Sprite::create("stepper-plus.png");
    ControlStepper *stepper   =ControlStepper::create(minusSprite, plusSprite);
    stepper->setPosition(Vec2(visibleSize.width / 2.0f, visibleSize.height / 2.0f));
    stepper->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);
    addChild(stepper);

    void HelloWorld::valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent)
    {
        ControlStepper* pControl = (ControlStepper*)sender;
        // Change value of label.
     
        float vf= pControl->getValue();
        CCLOG("-->%f",vf);
    }

}
{// ControlSwitch  开关
    #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;
    void valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);

    /**
    * create 
    * maskSprite, 开关背景
    * onSprite  开背景
    * offSprite 关背景
    * thumbSprite   开关按钮图片
    * onLabel   开文字
    * offLabel  关文字
    */
    static ControlSwitch* create(Sprite *maskSprite, Sprite * onSprite, Sprite * offSprite, Sprite * thumbSprite, Label* onLabel, Label* offLabel);
    
    /**
    * create 
    * maskSprite, 开关背景
    * onSprite  开背景
    * offSprite 关背景
    * thumbSprite   开关按钮图片
    */
    static ControlSwitch* create(Sprite *maskSprite, Sprite * onSprite, Sprite * offSprite, Sprite * thumbSprite);

    ControlSwitch *switchControl = ControlSwitch::create
    (
        Sprite::create("switch-mask.png"),//开关背景
        Sprite::create("switch-on.png"),//开背景
        Sprite::create("switch-off.png"),//关背景
        Sprite::create("switch-thumb.png"),//开关按钮图片
        Label::createWithSystemFont("On", "Arial-BoldMT", 16),//开文字
        Label::createWithSystemFont("Off", "Arial-BoldMT", 16)//关文字
     );
    switchControl->setPosition(Vec2(visibleSize.width / 2.0f, visibleSize.height / 2.0f));
    switchControl->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);
    addChild(switchControl);

    void HelloWorld::valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent)
    {
        ControlSwitch* pSwitch = (ControlSwitch*)sender;
        if (pSwitch->isOn())
        {
              CCLOG("-->%s","On");
        }
        else
        {
             CCLOG("-->%s","Off");
        }
    }
}


{// ControlColourPicker 提取颜色
     #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;
    void valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);

    ControlColourPicker *colourPicker = ControlColourPicker::create();
    colourPicker->setColor(Color3B(37, 46, 252));
    colourPicker->setPosition(Vec2 (visibleSize.width / 2.0f, visibleSize.height / 2.0f));
    
    colourPicker->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);
    addChild(colourPicker);

    void HelloWorld::valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent)
    {
        static int Number=0;
        ControlColourPicker* pPicker = (ControlColourPicker*)sender;
        ++Number;
        CCLOG("%d",Number);
        CCLOG("-r->%02X",pPicker->getColor().r);  //打印出来的是16精制数据
        CCLOG("-g->%02X",pPicker->getColor().g);
        CCLOG("-b->%02X",pPicker->getColor().b);
    }
    //注意 用这个时 把 extensions->CCControlColourPickerSpriteSheet.plist,CCControlColourPickerSpriteSheet.png 复制上 否则 会报错 他这个控件就帮你添加了那几张图片。
}


{//ControlButton   按键
      #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;
    void touchDownAction(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);

    auto backgroundButton = Scale9Sprite::create("button.png");
    auto backgroundHighlightedButton = Scale9Sprite::create("buttonHighlighted.png");
    
    auto titleButton = Label::createWithTTF("ABC", "Marker Felt.ttf", 30);
    titleButton->setColor(Color3B(159, 168, 176));
    ControlButton *button = ControlButton::create(titleButton, backgroundButton);
    button->setBackgroundSpriteForState(backgroundHighlightedButton, Control::State::HIGH_LIGHTED);
    button->setTitleColorForState(Color3B::WHITE, Control::State::HIGH_LIGHTED);
    button->setPosition(Vec2(visibleSize.width / 2.0f, visibleSize.height / 2.0f));


    button->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDownAction), Control::EventType::TOUCH_DOWN);
    addChild(button);

    void HelloWorld::touchDownAction(Ref *senderz, Control::EventType controlEvent)
    {
        CCLOG("%s",String::createWithFormat("Touch Down (%d)", controlEvent)->getCString());
    }
}


{//ControlPotentiometer    旋钮 （旋转开关）
     #include "extensions/cocos-ext.h"
    using namespace cocos2d::extension;
    void valueChanged(cocos2d::Ref *sender, cocos2d::extension::Control::EventType controlEvent);

    ControlPotentiometer *potentiometer = ControlPotentiometer::create("potentiometerTrack.png" //旋钮 背景
                                                                       ,"potentiometerProgress.png"//进度条 背景
                                                                       ,"potentiometerButton.png");//按下去 旋转的钮 
    potentiometer->setPosition(Vec2(visibleSize.width / 2.0f, visibleSize.height / 2.0f));
    
    // When the value of the slider will change, the given selector will be call
    potentiometer->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);
    
    addChild(potentiometer);


    void HelloWorld::valueChanged(Ref *sender, Control::EventType controlEvent)
    {
        ControlPotentiometer* pControl = (ControlPotentiometer*)sender;
        // Change value of label.
        CCLOG("%s",String::createWithFormat("%.02f", pControl->getValue())->getCString());
    }
}