接上回 CCScrollView 繼續，在GUI 裡還有個 CCScrollView 的子類---CCTableView 。 這個名字應該是從 IOS 裡的 UITableView來的，其實是跟WP8的 Listbox 效果一樣，實作
大資料的虛拟化展示， 不管在應用還是遊戲裡都是很常見的控件。 比如下面的 《天天愛消除》 的分數展示
下面我們用 CCTableView 一步步實作上面的效果，
一、建立承載它的容器
我們選用一個Layer,
class ListViewLayer : public cocos2d::CCLayer, public cocos2d::extension::CCTableViewDataSource, public cocos2d::extension::CCTableViewDelegate
{
public:
virtual bool init();
virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view);
virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view);
//處理觸摸事件
virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);
//每一項的寬度和高度
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);
CREATE_FUNC(ListViewLayer);
};
該 Layer 實作了 CCTableViewDataSource 和 CCTableViewDelegate 這兩個接口，
分别為 CCTableView 提供資料源 和 響應事件，後面會作為 CCTableView 的 Delegate 存在
二、 建立并添加 CCTableView 對象
bool ListViewLayer::init()
bool bRet = false;
do
{
CC_BREAK_IF( !CCLayer::init() );
bg = CCTextureCache::sharedTextureCache()->addImage("bg.png");
bg2 = CCTextureCache::sharedTextureCache()->addImage("bg2.png");
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCTableView* pTableView = CCTableView::create(this, CCSizeMake(visibleSize.width, visibleSize.height));
pTableView->setDirection(kCCScrollViewDirectionVertical);
pTableView->setPosition(CCPointZero);
pTableView->setDelegate(this); //将Delegate對象設定為剛才建立的容器.
pTableView->setVerticalFillOrder(kCCTableViewFillTopDown);
this->addChild(pTableView);
pTableView->reloadData();
bRet = true;
}
while(0);
return bRet;
}
三、 為CCTableView提供資料
首先要 通過 numberOfCellsInTableView 指定 TableView 的單元個數，然後在 cellSizeForTable 裡指定具體的單元格的尺寸大小，最後在 tableCellAtIndex 裡控制每個單元格的具體資料。
代碼如下：
unsigned int ListViewLayer::numberOfCellsInTableView(CCTableView *table)
return 999;
CCSize ListViewLayer::cellSizeForTable(CCTableView *table)
return CCSizeMake(CCDirector::sharedDirector()->getVisibleSize().width, 124);
CCTableViewCell* ListViewLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCString *pString = CCString::createWithFormat("%d", idx + 1);
//這裡要注意，因為是單元格是會重用的，是以不一定每次都要建立。
CCTableViewCell *pCell = table->dequeueCell();
if (!pCell)
pCell = new CCTableViewCell();
pCell->autorelease();
//Add background.
CCSprite *pSprite;
if(UserIndex == idx)
{
pSprite = CCSprite::createWithTexture(bg2);
}
else
pSprite = CCSprite::createWithTexture(bg);
pSprite->setAnchorPoint(CCPointZero);
pSprite->setPosition(CCPointZero);
pSprite->setTag(111);
pCell->addChild(pSprite);
//Add Icon.
pSprite = CCSprite::create("Icon.png");
pSprite->setPosition(ccp(180, 60));
//Add Rate.
CCLabelTTF *pLabel = CCLabelTTF::create(pString->getCString(), "Arial", 70.0);
pLabel->setPosition(ccp(70, 60));
pLabel->setTag(123);
pCell->addChild(pLabel);
//Add Name.
pLabel = CCLabelTTF::create("Ghost Person", "Arial", 40.0);
pLabel->setPosition(ccp(250, 60));
pLabel->setAnchorPoint(CCPointZero);
else
CCLabelTTF *pLabel = (CCLabelTTF*)pCell->getChildByTag(123);
pLabel->setString(pString->getCString());
if(UserIndex == idx)//根據ID建立不同的效果.
CCSprite* bg3 = (CCSprite*)pCell->getChildByTag(111);
bg3->setTexture(bg2);
bg3->setTexture(bg);
return pCell; }
就這三步，大功告成了，附上效果圖：
醜是醜了一點啊，不過已經基本成型了。
而且發現在920上滑動的時候隻有30幀左右，不知道其他手機如何，後面具體再測。
歡迎有興趣的童鞋加入Cocos2d-x 開發群 qq: 264152376