【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);
}

效果图：