cocos2d-x高级UI控件详细介绍

对应官网的CCControlExtention。可以通过TestCpp的EntentionTest查看效果。

http://cocos2d-x.org/projects/cocos2d-x/wiki/CCControlExtension

以下内容使用了扩展库，因此要添加库路径和命名空间

#include "cocos-ext.h" 
USING_NS_CC_EXT;

并在属性中配置extension路径，加入libextensions.lib库

CCScale9Sprite——九宫格Sprite

按照九宫格的方式缩放图片的工具，和android的9patch一样作用。可以使得按钮变得漂亮起来。但不能处理点击事件。

            例子：

                CCSize  screenSize = CCDirector::sharedDirector()->getWinSize();

		CCRect rect = CCRectMake(0,0,15,32);         //从原始图片中读取的范围，参数分别为坐标x,y和宽度，高度
		CCRect rect_inside = CCRectMake(4,4,7,24);   //原始图片中，可变的部分，即用来放大的。参数解释同上（x,y,width,height）。
		CCSize rect_9Size = CCSizeMake(screenSize.width/2,screenSize.height/2);
		CCScale9Sprite* button = cocos2d::extension::CCScale9Sprite::create("button.png", rect,rect_inside);
		 //button->setContentSize(CCSizeMake(screenSize.width, 57));
		 button->setPreferredSize(rect_9Size);      //希望得到的最终按钮大小
		 button->setPosition(ccp(screenSize.width/2, screenSize.height/ 2.0f));
		 addChild(button);

   

注意CCScale9Sprite::Create，如果没有输入rect，实际是是把图片按九宫格等比划分为9份。底调用了的层代码如下。没有输入rect，就默认rect为CCRectZero

看看定义const CCRect CCRectZero = CCRectMake(0,0,0,0);   即，0大小的Rect。可以参照CCControlButton的例子，它是直接调用create(char* file)的。

bool CCScale9Sprite::initWithFile(const char* file, CCRect rect,  CCRect capInsets)
{
    CCAssert(file != NULL, "Invalid file for sprite");
    
    CCSpriteBatchNode *batchnode = CCSpriteBatchNode::create(file, 9);
    bool pReturn = this->initWithBatchNode(batchnode, rect, capInsets);
    return pReturn;
}

bool CCScale9Sprite::initWithBatchNode(CCSpriteBatchNode* batchnode, CCRect rect, bool rotated, CCRect capInsets)
{
    if(batchnode)
    {
        this->updateWithBatchNode(batchnode, rect, rotated, capInsets);
        this->setAnchorPoint(ccp(0.5f, 0.5f));
    }
    this->m_positionsAreDirty = true;
    
    return true;
}

这就是button.png，可以在cocos2d-x的项目中搜到，是一个渐变图。放大后效果

CCControlButton——事件按钮

与CCScale9Sprite不同，Button控件可以处理事件，且该控件需要传入CCScale9Sprite作为参数。

控制事件CCControlEvent,可以处理很多动作细节。

CCControl.h中定义如下

/** Number of kinds of control event. */
#define kControlEventTotalNumber 9


/** Kinds of possible events for the control objects. */
enum 
{
    CCControlEventTouchDown           = 1 << 0,    // A touch-down event in the control.
    CCControlEventTouchDragInside     = 1 << 1,    // An event where a finger is dragged inside the bounds of the control.
    CCControlEventTouchDragOutside    = 1 << 2,    // An event where a finger is dragged just outside the bounds of the control. 
    CCControlEventTouchDragEnter      = 1 << 3,    // An event where a finger is dragged into the bounds of the control.
    CCControlEventTouchDragExit       = 1 << 4,    // An event where a finger is dragged from within a control to outside its bounds.
    CCControlEventTouchUpInside       = 1 << 5,    // A touch-up event in the control where the finger is inside the bounds of the control. 
    CCControlEventTouchUpOutside      = 1 << 6,    // A touch-up event in the control where the finger is outside the bounds of the control.
    CCControlEventTouchCancel         = 1 << 7,    // A system event canceling the current touches for the control.
    CCControlEventValueChanged        = 1 << 8      // A touch dragging or otherwise manipulating a control, causing it to emit a series of different values.
};
typedef unsigned int CCControlEvent;


/** The possible state for a control.  */
enum 
{
    CCControlStateNormal       = 1 << 0, // The normal, or default state of a control—that is, enabled but neither selected nor highlighted.
    CCControlStateHighlighted  = 1 << 1, // Highlighted state of a control. A control enters this state when a touch down, drag inside or drag enter is performed. You can retrieve and set this value through the highlighted property.
    CCControlStateDisabled     = 1 << 2, // Disabled state of a control. This state indicates that the control is currently disabled. You can retrieve and set this value through the enabled property.
    CCControlStateSelected     = 1 << 3  // Selected state of a control. This state indicates that the control is currently selected. You can retrieve and set this value through the selected property.
};
typedef unsigned int CCControlState;

/** Number of kinds of control event. */
#define kControlEventTotalNumber 9

使用例子：（记得在头文件声明时引入头文件、命名控件，配置CCControl.h的路径，因为用到了CCControlEvent进行声明）

cocos2d::extension::CCScale9Sprite *backgroundButton = cocos2d::extension::CCScale9Sprite::create("button.png");
cocos2d::extension::CCScale9Sprite *backgroundHighlightedButton = cocos2d::extension::CCScale9Sprite::create("buttonHighlighted.png");
// Creates a button with this string as title
CCLabelTTF *titleButton = CCLabelTTF::create("hello", "Marker Felt", 30);    
titleButton->setColor(ccc3(159, 168, 176));
cocos2d::extension::CCControlButton *newbutton = cocos2d::extension::CCControlButton::create(titleButton, backgroundButton);
newbutton->setBackgroundSpriteForState(backgroundHighlightedButton, cocos2d::extension::CCControlStateHighlighted);
newbutton->setTitleColorForState(ccWHITE, cocos2d::extension::CCControlStateHighlighted);
newbutton->setPosition(ccp (screenSize.width / 2, screenSize.height / 2));	

		 newbutton->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::touchDown),CCControlEventTouchDown);
	 	 //注意，addTargetWithActionForControlEvents是public的，addTargetWithActionForControlEvent是protected的，不要少了s，否则会报错:无法访问 protected 成员
		 // addTargetWithActionForControlEvents循环调用了addTargetWithActionForControlEvent
		 
		 addChild(newbutton);

可参考以下代码 

void CCControl::addTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents)
{
    // For each control events
    for (int i = 0; i < kControlEventTotalNumber; i++)
    {
        // If the given controlEvents bitmask contains the curent event
        if ((controlEvents & (1 << i)))
        {
            this->addTargetWithActionForControlEvent(target, action, 1<<i);            
        }
    }
}

CCControlSlider——拖动条

CCControlColorPicker——颜色选择器

CCControlSwitch——开关控件

CCControlPotentionmeter——压力计

CCControlStepper——分段控件

CCScrollView——滚动视图

CCTabelView——列表视图

一个列表可能有很多cell看不到，假如只能看到5个cell，则整个表只会生成6个cell的内容，然后在准备显示新的一个cell时候，把看不见的那一个cell清空给新的cell。

所以看到TestCpp例子时，会先查找有没有可用的Cell，如果没有则生成一个新的；如果有则循环利用,只需要更新label，如下代码

CCTableViewCell* TableViewTestLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
    CCString *string = CCString::createWithFormat("%d", idx);
    CCTableViewCell *cell = table->dequeueCell();
    if (!cell) {
        cell = new CustomTableViewCell();
        cell->autorelease();
        CCSprite *sprite = CCSprite::create("Images/Icon.png");
        sprite->setAnchorPoint(CCPointZero);
        sprite->setPosition(ccp(0, 0));
        cell->addChild(sprite);


        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);
        label->setPosition(CCPointZero);
		label->setAnchorPoint(CCPointZero);
        label->setTag(123);        //设置tag
        cell->addChild(label);
    }
    else
    {
        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);   //根据tag获取已经初始化的cell
        label->setString(string->getCString());     
    }




    return cell;
}

要使用tableVIew要记得继承接口

class TableViewTestLayer : public cocos2d::CCLayer, public cocos2d::extension::CCTableViewDataSource, public cocos2d::extension::CCTableViewDelegate

CCTableViewDataSource的初始化函数

    static CCTableView* create(CCTableViewDataSource* dataSource, CCSize size, CCNode *container);

从数据源 public cocos2d::extension::CCTableViewDataSource里面继承了以下函数。

    virtual cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *table);
    virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
    virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);

而CCTableViewDelegate 和又是继承ScrollView的 

class CCTableViewDelegate : public CCScrollViewDelegate。要实现以下两个接口（如果没有事件处理，可以不写方法到{}里）

    virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {};
    virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {}

CCTableViewDelegate 可以调用以下函数，反馈点击的Cell

void TableViewTestLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell)
{
    CCLOG("cell touched at index: %i", cell->getIdx());
}

点击事件结束时候，判断哪个cell被点击（可以借鉴这种方法去定义其它控件）

void CCTableView::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{
    if (!this->isVisible()) {
        return;
    }
    if (m_pTouches->count() == 1 && !this->isTouchMoved()) {
        unsigned int        index;
        CCTableViewCell   *cell;
        CCPoint           point;
        
        point = this->getContainer()->convertTouchToNodeSpace(pTouch);
        if (m_eVordering == kCCTableViewFillTopDown) {
            CCSize cellSize = m_pDataSource->cellSizeForTable(this);
            point.y -= cellSize.height;
        }
        index = this->_indexFromOffset(point);
        cell  = this->_cellWithIndex(index);
        
        if (cell) {
            m_pTableViewDelegate->tableCellTouched(this, cell);   //注意在这里调用tableCellTouched
        }
    }
    CCScrollView::ccTouchEnded(pTouch, pEvent);
}