【独立开发者er Cocos2d-x实战 012】Cocos2dx 2.2.6 CCTableView和CCTableViewCell详解

首先抛出一个问题：TableView一个Cell存在多个数据源（例如：Sprite），那应该如何区分点击的是哪一个精灵。

如果对上述描述还是不明白的朋友，请见详细描述：请点击。

如果大家使用现有的Cocos2dx实现，个人感觉是行不通的，因为Cocos2dx认为一个Cell就是一个点击，但是我们现在需要的是一个Cell存在多数据源，这样就需要我们自定义TableView和TableViewCell。

首先我创建三个自定义的类：

class MyCustomCell: public CCSprite
{
public:
    CREATE_FUNC(MyCustomCell);
    virtual bool init();
    void setPicIndex(int nPicIndex);
    int getPicIndex();
private:

    CCSprite *m_pSprite;/* 每一个Cell中的每一个数据源 */
    int m_nPicIndex;
};

class MyTableView: public CCTableView
{
public:
    static MyTableView * create(CCTableViewDataSource* dataSource, CCSize size);
    static MyTableView* create(CCTableViewDataSource* dataSource, CCSize size, CCNode *container);
    virtual void registerWithTouchDispatcher();
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
    CCPoint &getLastEnd(){return mLastEnd;}
private:
    MyTableView(){}
    CCPoint mLastEnd;
};


///////////////////////////////////////////////////////////////////////////////////////////////


class MyCustomTableViewCell : public cocos2d::extension::CCTableViewCell
{
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  
    
    // implement the "static node()" method manually
    void setPic(int idx);
    CREATE_FUNC(MyCustomTableViewCell);
    MyCustomCell* getTouchCell(const CCPoint& pt);

private:
    MyCustomCell* m_cell[PERROW_4];
};

这样我们的触摸事件就可以在相应的Cell元素中的数据源中进行处理了，而不用根据坐标的换算和上下移动进行计算，使得计算简单化。

同时我们让HelloWorld继承如下：

class HelloWorld : public cocos2d::CCLayer, public CCTableViewDelegate, public CCTableViewDataSource

由于CCTableViewDelegate和CCTableViewDataSource是抽象类，我们继承后需要实现相关的接口：

    //CCTableViewDelegate : public CCScrollViewDelegate
    virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell);
    virtual void tableCellHighlight(CCTableView* table, CCTableViewCell* cell);
    virtual void tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);

    //CCScrollViewDelegate
    virtual void scrollViewDidScroll(CCScrollView* view){};
    virtual void scrollViewDidZoom(CCScrollView* view){};

    //CCTableViewDataSource
    virtual CCSize cellSizeForTable(CCTableView *table);
    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);
    virtual unsigned int numberOfCellsInTableView(CCTableView *table);

    //test table view -- override end -----------------------------------------------

实现如下：

void HelloWorld::tableCellTouched(CCTableView* table, CCTableViewCell* cell)
{
    MyTableView * myTableView = (MyTableView*)table;
    CCPoint lastEnd = myTableView->getLastEnd();
    MyCustomCell * selectedCell = NULL;
    MyCustomTableViewCell* myCell = (MyCustomTableViewCell*)cell;
    selectedCell = myCell->getTouchCell(lastEnd);

    if (NULL != selectedCell)
    {
        CCLOG("CustomCell:%d", selectedCell->getPicIndex());
    }
}

void HelloWorld::tableCellHighlight(CCTableView* table, CCTableViewCell* cell)
{
}
void HelloWorld::tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell)
{
}


CCSize HelloWorld::cellSizeForTable(CCTableView *table)
{
    return CCSizeMake(40*PERROW_4, 40);//返回每一个Cell的尺寸
}

</pre><pre name="code" class="cpp">

/* 用于填充每一个Cell */
CCTableViewCell* HelloWorld::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
   	MyCustomTableViewCell *cell = (MyCustomTableViewCell*)table->dequeueCell();
	if (!cell) 
    {
        cell = MyCustomTableViewCell::create();
	}
	else
	{
	}
    cell->setPic(idx);
	return cell;
}

unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table)
{
    return TOTALROWNUM;/* 返回总共几个Cell */
}

最终结果如下：我们点击哪一个图标就会输出对应的图标名数字：

图片资源如下：请点击。

由于部分实现细节涉及机密，请大家进群讨论（QQ群号：436689827），但是我不会提供源码，只是提供设计思路。

参考博客：

Cocos2dx 2.2.6 CCTableView和CCTableViewCell详解

cocos2d-x中的CCTableView的相关用法