Cocos2d-x CCTableView實現列表

在ios程序設計中，會大量使用到tableview視圖（UITableView），那麼在cocos2d-x中，如果需要類似的列表，該如何實現呢？在引擎中參照ios中的UITableView實現了一個叫做CCTableView的類，用於創建列表，對於熟悉ios程序設計的人來說，這個內容應該是很好理解的。

下面這篇博客就介紹一下是如何使用這個CCTableView的吧！

這個文件是在extensions這個文件夾中的：

下面通過一個demo詳細介紹一下。

1、使用的時候要注意要引入擴展庫文件： #include"cocos-ext.h"

並且最好要添加： USING_NS_CC_EXT; 這樣就不用老是加前綴cocos2d::extension

[cpp]view plain copy print ?

#define USING_NS_CC_EXT using namespace cocos2d::extension

#define USING_NS_CC_EXT                     using namespace cocos2d::extension

2、要繼承CCTableView的兩個代理 CCTableViewDelegate 和 CCTableViewDataSource

所以首先要繼承這裏兩個代理：

[cpp]view plain copy print ?

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

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

其中至少要實現以下的代理方法：

[cpp]view plain copy print ?

//觸摸到某個cell的事件
virtualvoid tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);
//定製每個cell的size
virtual cocos2d::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
//定製每個cell的內容
virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
//確定這個tableview的cell行數
virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);

//觸摸到某個cell的事件
    virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);
    
    //定製每個cell的size
    virtual cocos2d::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
    
    //定製每個cell的內容
    virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);
    
    //確定這個tableview的cell行數
    virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);

可以選擇實現：

[cpp]view plain copy print ?

//設置單元格高亮的狀態
virtualvoid tableCellHighlight(CCTableView* table, CCTableViewCell* cell);
//設置單元格非高亮的狀態
virtualvoid tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);

 //設置單元格高亮的狀態
    virtual void tableCellHighlight(CCTableView* table, CCTableViewCell* cell);
    //設置單元格非高亮的狀態
    virtual void tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);

3、有於CCTableView是繼承 CCScrollView ，所以必須要繼承這兩個方法，但是什麼都不做，只是空實現而已。

[cpp]view plain copy print ?

//由於CCTableView是繼承CCScrollView，所以要繼承這兩個方法
virtualvoid scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}
virtualvoid scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {}

//由於CCTableView是繼承CCScrollView，所以要繼承這兩個方法
    virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}
    virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {}

4、按照需要實現代理方法。

首先看看我定製的tableview吧！

其中每一個cell包含的內容：一個背景sprite（藍色），左邊一個label，中間一個menu。

（1）觸摸到某個cell的事件處理：

[cpp]view plain copy print ?

void HelloWorld::tableCellTouched(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
CCLOG("you touch cell index = %u",cell->getIdx());
}

void HelloWorld::tableCellTouched(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
    CCLOG("you touch cell index = %u",cell->getIdx());
}

（2）定製每一個cell的size

[cpp]view plain copy print ?

CCSize HelloWorld::tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx)
{
return CCSizeMake(337, 55);
}

CCSize HelloWorld::tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx)
{
    return CCSizeMake(337, 55);
}

（3）定製一個tableview的cell的個數

[cpp]view plain copy print ?

unsigned int HelloWorld::numberOfCellsInTableView(cocos2d::extension::CCTableView *table)
{
return 10;
}

unsigned int HelloWorld::numberOfCellsInTableView(cocos2d::extension::CCTableView *table)
{
    return 10;
}

（4）定製每一個cell的內容

[cpp]view plain copy print ?

CCTableViewCell* HelloWorld::tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx)
{
CCString *string = CCString::createWithFormat("index = %d",idx);
CCTableViewCell *cell = table->dequeueCell();
if (!cell) {
cell = new CustomTableCell();
cell->autorelease();
//添加背景圖片
CCSprite *sprite = CCSprite::create("22.png");
sprite->setAnchorPoint(CCPointZero);
sprite->setPosition(ccp(0, 0));
cell->addChild(sprite,1);
//添加label
CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Arial", 15);
label->setAnchorPoint(CCPointZero);
label->setTag(123);
label->cocos2d::CCNode::setPosition(5, 5);
cell->addChild(label,2);
//添加menu
CCMenuItemImage *itemImage = CCMenuItemImage::create("23.png", "24.png", cell, menu_selector(HelloWorld::menuCallBack));
CCMenu *menu = CCMenu::create(itemImage,NULL);
//注意CCMenu是無法修改錨點的，其默認位置是在其幾何中心
menu->setPosition(ccp(180,26));
//可以通過修改CCMenuItemImage的錨點的位置
// itemImage->setAnchorPoint(CCPointZero);
// menu->setPosition(ccp(180,6));
cell->addChild(menu, 2);
}
else
{
//由於每一個cell的label都是不同的，所以我們通過tag值獲取到label來對label進行修改
CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);
label->setString(string->getCString());
}
return cell;
}
void HelloWorld::menuCallBack(cocos2d::CCObject *pSender)
{
CCTableViewCell *cell = (CCTableViewCell*)(((CCMenuItemImage*)pSender)->getParent()->getParent());
CCLog("menu click cell index : %d",cell->getIdx());
}

CCTableViewCell* HelloWorld::tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx)
{
    CCString *string = CCString::createWithFormat("index = %d",idx);
    CCTableViewCell *cell = table->dequeueCell();
    if (!cell) {
        cell = new CustomTableCell();
        cell->autorelease();
        
        //添加背景圖片
        CCSprite *sprite = CCSprite::create("22.png");
        sprite->setAnchorPoint(CCPointZero);
        sprite->setPosition(ccp(0, 0));
        cell->addChild(sprite,1);
        
        //添加label
        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Arial", 15);
        label->setAnchorPoint(CCPointZero);
        label->setTag(123);
        label->cocos2d::CCNode::setPosition(5, 5);
        cell->addChild(label,2);
        
        //添加menu
        CCMenuItemImage *itemImage = CCMenuItemImage::create("23.png", "24.png", cell, menu_selector(HelloWorld::menuCallBack));
        CCMenu *menu = CCMenu::create(itemImage,NULL);
        
        //注意CCMenu是無法修改錨點的，其默認位置是在其幾何中心
        menu->setPosition(ccp(180,26));
        
    //可以通過修改CCMenuItemImage的錨點的位置
    //        itemImage->setAnchorPoint(CCPointZero);
    //        menu->setPosition(ccp(180,6));
        
        cell->addChild(menu, 2);
    }
    
    else
    {
        //由於每一個cell的label都是不同的，所以我們通過tag值獲取到label來對label進行修改
        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);
        label->setString(string->getCString());
    }

    return cell;
}

void HelloWorld::menuCallBack(cocos2d::CCObject *pSender)
{
    CCTableViewCell *cell = (CCTableViewCell*)(((CCMenuItemImage*)pSender)->getParent()->getParent());
    CCLog("menu click cell index : %d",cell->getIdx());
}

這一部分是最重要的部分，稍微解說一下吧！

①這裏tableview也是用到了ios中cell的重用機制：CCTableViewCell *cell = table->dequeueCell(); 當然這也導致了下面的一些問題：每一個cell 的 label 中的內容都是不一樣的，所以要對label進行一些處理。

②添加menu，我們可能要在menu點擊的時候獲取所在cell的一些消息，這裏也要注意是如何處理的：是通過兩次getParent獲取到cell。

③還有在添加menu的時候意外發現一個問題：

CCMenu是無法修改錨點值的，其錨點值是在其幾何位置的中心。但是我們可以修改其子項的錨點值。

④由於Menu的觸摸響應優先級是最高的，所以點擊menu的時候是不會觸發 cell 的 touch 事件的。

⑤在向cell添加內容的時候要注意zOrder，否則有可能被其他元素覆蓋了。

⑥其中的tableview cell是可以定製的，代碼中用到的 CustomTableCell 內容如下：

[cpp]view plain copy print ?

#ifndef __TableView__CustonTabelCell__
#define __TableView__CustonTabelCell__
#include <iostream>
#include "cocos-ext.h"
#include "cocos2d.h"
USING_NS_CC;
USING_NS_CC_EXT;
class CustomTableCell:public cocos2d::extension::CCTableViewCell
{
public:
void draw();
};
#endif /* defined(__TableView__CustonTabelCell__) */

#ifndef __TableView__CustonTabelCell__
#define __TableView__CustonTabelCell__

#include <iostream>
#include "cocos-ext.h"
#include "cocos2d.h"

USING_NS_CC;
USING_NS_CC_EXT;

class CustomTableCell:public cocos2d::extension::CCTableViewCell
{
public:
    void draw();
};

#endif /* defined(__TableView__CustonTabelCell__) */

[cpp]view plain copy print ?

#include "CustonTabelCell.h"
void CustomTableCell::draw()
{
CCTableViewCell::draw();
}

#include "CustonTabelCell.h"

void CustomTableCell::draw()
{
    CCTableViewCell::draw();
}

其中是沒有添加定製實現的。

5、設置cell被點擊時高亮和非高亮。

[cpp]view plain copy print ?

void HelloWorld::tableCellHighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
CCLog("High light");
CCSprite *sprite1 = CCSprite::create("21.png");
sprite1->setTag(21);
sprite1->setOpacity(125); //設置透明度
sprite1->setAnchorPoint(CCPointZero);
sprite1->setPosition(ccp(0, 0));
cell->addChild(sprite1,3);
}
void HelloWorld::tableCellUnhighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
CCLog("Unhigh light");
cell->removeChildByTag(21);
}

void HelloWorld::tableCellHighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
    CCLog("High light");
    CCSprite *sprite1 = CCSprite::create("21.png");
    sprite1->setTag(21);
    sprite1->setOpacity(125); //設置透明度
    sprite1->setAnchorPoint(CCPointZero);
    sprite1->setPosition(ccp(0, 0));
    cell->addChild(sprite1,3);

}
void HelloWorld::tableCellUnhighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)
{
    CCLog("Unhigh light");
    cell->removeChildByTag(21);
}

6、下面就是如何創建tablview了，在init方法中：

[cpp]view plain copy print ?

bool HelloWorld::init()
{
//////////////////////////////
// 1. super init first
if ( !CCLayer::init() )
{
returnfalse;
}
CCTableView *tableview = CCTableView::create(this, CCSizeMake(436, 300));
tableview->setDirection(kCCScrollViewDirectionVertical); //設置tableview的方向是豎直方向，當然也有水平方向
tableview->setDelegate(this);
tableview->setVerticalFillOrder(kCCTableViewFillTopDown);// 設置tableview cell的index排列，這裏設置是從上到下變大，當然也可以從下到上變大。
tableview->setPosition(ccp(20,20));
this->addChild(tableview);
// tableview->reloadData();
returntrue;
}

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    
    
    CCTableView *tableview = CCTableView::create(this, CCSizeMake(436, 300));
    tableview->setDirection(kCCScrollViewDirectionVertical); //設置tableview的方向是豎直方向，當然也有水平方向
    tableview->setDelegate(this);
    tableview->setVerticalFillOrder(kCCTableViewFillTopDown);// 設置tableview cell的index排列，這裏設置是從上到下變大，當然也可以從下到上變大。
    tableview->setPosition(ccp(20,20));
    this->addChild(tableview);
    
//    tableview->reloadData();

    return true;
}

好啦，大概tableview常用的一些操作就是這些了，當然CCTabelView中還有一些其他方法，這些都是和ios中的差不多的，需要的時候查看就可以了。

轉載自：http://blog.csdn.net/crayondeng/article/details/11649977

Cocos2d-x CCTableView實現列表

SQL優化-20231016

Cocos2d-x 彈出對話框的設計與實現

Cocos2d-x CCTableView實現列表

cocos2dx中文顯示

我的友情鏈接

WideCharToMultiByte的CP_ACP和CP_OEMCP

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結