【Cocos2dx游戏开发】CCTableView实现滑动列表

在游戏中，经常需要用到列表展示，例如我现在做的卡牌游戏中就有卡牌列表和好友列表需要用到CCTableView，下面简单介绍一下使用方法。

CCTableView位于扩展库文件cocos-ext.h中，它是CCScrollView的子类。引擎已经帮我们封装好了，而我们要实现列表展示只需要重写下面4个函数：

	// 处理触摸事件，可以计算点击的是哪个子项
	virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell);
	// 定制单元格cell的尺寸
	virtual CCSize cellSizeForTable(CCTableView *table);
	// 生成列表的每一项内容
	virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);
	// cell的数量
	virtual unsigned int numberOfCellsInTableView(CCTableView *table);

由于CCTableView继承自CCScrollView，所以要实现这两个方法，但是什么都不做。

	virtual void scrollViewDidScroll(CCScrollView* view);
	virtual void scrollViewDidZoom(CCScrollView* view);

下面我们来写一个好友列表展示：

FriendListLayer.h

#ifndef __FRIENDLISTLAYER_H__
#define __FRIENDLISTLAYER_H__

#include "cocos2d.h"
#include "cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

class FriendListLayer : public CCLayer, public CCTableViewDataSource, public CCTableViewDelegate
{
public:
	virtual bool init();

	// CCTableViewDelegate继承自CCScrollViewDelegate
	virtual void scrollViewDidScroll(CCScrollView* view);
	virtual void scrollViewDidZoom(CCScrollView* view);

	// 处理触摸事件，可以计算点击的是哪个子项
	virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell);

	// 定制单元格的尺寸
	virtual CCSize cellSizeForTable(CCTableView *table);

	// 生成列表的每一项内容
	virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);

	// cell的数量
	virtual unsigned int numberOfCellsInTableView(CCTableView *table);

        // 返回按钮回调函数
	void menuCallback(CCObject* pSender);

	CREATE_FUNC(FriendListLayer);
};

#endif

FriendListLayer.cpp

#include "FriendListLayer.h"

USING_NS_CC;
USING_NS_CC_EXT;


bool FriendListLayer::init()
{
	if (!CCLayer::init())
	{
		return false;
	}

	CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

	// CCTableView使用
	CCTableView* tableView = CCTableView::create(this, CCSizeMake(visibleSize.width-200, visibleSize.height-100));
	tableView->setDirection(kCCScrollViewDirectionVertical); // 设置方向
	tableView->setPosition(ccp(40, 30));
	//tableView->setAnchorPoint(CCPointZero);
	tableView->setDelegate(this);
	tableView->setVerticalFillOrder(kCCTableViewFillTopDown);
	this->addChild(tableView);
	tableView->reloadData();

	// "好友列表"标题
	CCSprite* title = CCSprite::create("title.png");
	title->setPosition(ccp(40, visibleSize.height - title->getContentSize().height - 10));
	title->setAnchorPoint(CCPointZero);
	this->addChild(title);

	// 返回按钮
	CCMenuItemImage *pBackItem = CCMenuItemImage::create(
		"button1.png",
		"button1.png",
		this,
		menu_selector(FriendListLayer::menuCallback));   
	pBackItem->setPosition(visibleSize.width - pBackItem->getContentSize().width - 20, visibleSize.height - 100);
	CCMenu* pMenu = CCMenu::create(pBackItem, NULL);
	pMenu->setPosition(CCPointZero);
	this->addChild(pMenu, 1);

	return true;
}


// 响应触摸事件
void FriendListLayer::tableCellTouched( CCTableView* table, CCTableViewCell* cell )
{
	CCLOG("Cell touched at index: %i", cell->getIdx()+1);
}


// 设置cell的size
CCSize FriendListLayer::cellSizeForTable( CCTableView *table )
{
	CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
	return CCSizeMake(visibleSize.width, 64);
}


// 具体实现每个cell
CCTableViewCell* FriendListLayer::tableCellAtIndex( CCTableView *table, unsigned int idx )
{
	CCString* name = CCString::createWithFormat("Name: friend_%d", idx+1);
	CCString* attack = CCString::createWithFormat("Money: %d", (idx+1)*((rand()%100)+900));

	CCTableViewCell* cell = table->dequeueCell();

	// 头像icon路径
	std::string imagePath[10] = {"icon0.png","icon1.png","icon2.png","icon3.png","icon4.png","icon5.png","icon6.png","icon7.png","icon8.png","icon9.png"};

	if (!cell)
	{
		cell = new CCTableViewCell();
		cell->autorelease();  // 加入自动释放池
	}
	cell->removeAllChildrenWithCleanup(true);

	// 背景
	CCSprite* bgSprite = CCSprite::create("cell_background.png");
	bgSprite->setAnchorPoint(CCPointZero); // 设置锚点
	bgSprite->setPosition(CCPointZero);  // 设置位置
	bgSprite->setTag(12);
	cell->addChild(bgSprite);   // 加入cell

	// 头像icon
	CCSprite* iconSprite = CCSprite::create(imagePath[idx].c_str());
	iconSprite->setScale(0.9);
	iconSprite->setAnchorPoint(CCPointZero);
	iconSprite->setPosition(ccp(25,5));
	iconSprite->setTag(34);
	cell->addChild(iconSprite);

	// 文字
	CCLabelTTF* pLabel = CCLabelTTF::create(name->getCString(), "Arial", 15);
	pLabel->setAnchorPoint(CCPointZero);
	pLabel->setPosition(ccp(100, 35));
	pLabel->setTag(56);
	cell->addChild(pLabel);

	CCLabelTTF* pLabel1 = CCLabelTTF::create(attack->getCString(), "Arial", 15);
	pLabel1->setAnchorPoint(CCPointZero);
	pLabel1->setPosition(ccp(100, 10));
	pLabel1->setTag(78);
	cell->addChild(pLabel1);

	return cell;
}


// cell的数量
unsigned int FriendListLayer::numberOfCellsInTableView( CCTableView *table )
{
	return 10;
}


// CCTableView继承自CCScrollView，所以要实现这两个方法，但是什么都不做
void FriendListLayer::scrollViewDidScroll( CCScrollView* view ){}
void FriendListLayer::scrollViewDidZoom( CCScrollView* view ){}


// menu回调函数
void FriendListLayer::menuCallback( CCObject* pSender )
{
}

另外还可以重写这两个函数实现cell的点击和释放时的响应效果：

// 按下
void FriendListLayer::tableCellHighlight(CCTableView *table, CCTableViewCell *cell)  
{  
	CCTexture2D *aTexture=CCTextureCache::sharedTextureCache()->addImage("cell_selected.png");  
	CCSprite *pSprite=(CCSprite *)cell->getChildByTag(12);  
	pSprite->setTexture(aTexture);  
}  
// 释放
void FriendListLayer::tableCellUnhighlight(CCTableView *table, CCTableViewCell *cell)  
{   
	CCTexture2D *aTexture=CCTextureCache::sharedTextureCache()->addImage("cell_background.png");  
	CCSprite *pSprite=(CCSprite *)cell->getChildByTag(12);  
	pSprite->setTexture(aTexture);  
}

效果图：