Cocos2d-X 学习笔记 12 CCTableView使用

CCTableView的功能基本与iOS的UITableView类似，在学习如何使用CCTableView之前，我们需要先来了解一下CCTableView的一些特点。

CCTableView继承于CCScrollView，所以它具备了能够触摸滑动的功能，CCTabelView就像是一个大容器，内部由若干个CCTableViewCell组成,就好像ListView控件内部也是由若干个item组成一样，但tableView与ListView最大的不同之处在于，tableView中的cell是可以重用的，而ListView中的item在初始化时就需要创建所有item。

举个例子来说，比如我们需要在一个tableView中创建20个cell，在ListView中创建20个item，但是我们的tableview与listview的大小，也就是我们的可视区域只能够显示5个cell或item，这个时候，我们在对cell和item初始化的时候，就体现出了talbieview与listview的不同，在Listview中，初始化时会将20个item对象全部创建，并将他们全部加载，而在tableview中，初始化只会创建5个cell对象，也就是只做了5次 cell=new CCTableviewCell()，这是因为在talbieview中存在一个重用队列，在开始的时候，这个重用队列中是没有任何东西的，每当你滑动tableview直到一个cell被滑到了不可见的区域，这个cell就会被加入到重用队列中，然后当有一个新的cell需要被显示出来时，我们就会使用table->dequeueCell()方法，在重用队列中获取一个cell，这样的话就避免了创建一个新的cell并为它开辟内存空间。但是需要注意的是，虽然cell被读取了出来，但是这个cell上面的元素我们仍然需要重新去设置，否则我们就会遇到tableview中cell的位置错乱的问题。下面我们通过代码来学习这一过程。

新建一个项目，笔者直接在HelloWorld中添加代码：

HelloWorld.h文件

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::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table,unsigned int idx);
//生成列表每一项的内容
virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table,unsigned int idx);
//一共多少项，返回列表的子项的个数
virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);
/*---可选择实现的方法-------*/
/*可以再该方法中添加点击cell时的高亮图片 利用cell->getChildByTag()*/
virtual void tableCellHighlight(CCTableView* table,CCTableViewCell* cell);
/*该方法中设置抬起手后取消cell的高亮图片*/
virtual void tableCellUnhighlight(CCTableView* table,CCTableViewCell* cell);
/*回收一个cell*/
//virtual void tableCellWillRecycle(CCTableView* table,CCTableViewCell* cell){};

.cpp文件

bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !CCLayer::init() ) { return false; } /*创建一个talbleview 将datasource设置为当前的类的对象 tableview的显示区域大小为 300 * 80*/ CCTableView* tableView = CCTableView::create(this,CCSizeMake(400,400)); /*设置tableview为水平方向 kCCScrollViewDirectionVertical为垂直*/ tableView->setDirection(kCCScrollViewDirectionVertical); tableView->setPosition(ccp(0,0));//设置位置 tableView->setDelegate(this);//设置代理对象 addChild(tableView); //添加tableview tableView->reloadData();//加载tableview return true; } void HelloWorld::tableCellTouched(CCTableView* table,CCTableViewCell* cell) { CCLOG("cell touched at index:%i",cell->getIdx()); } CCSize HelloWorld::tableCellSizeForIndex(CCTableView *table,unsigned int idx) { return CCSizeMake(100,100); } CCTableViewCell *HelloWorld::tableCellAtIndex(CCTableView *table,unsigned int idx) { CCString *string = CCString::createWithFormat("%d",idx); /*在重用队列中获取一个cell 然后判断cell是否为空 不为空则创建一个新的*/ CCTableViewCell *cell = table->dequeueCell(); if (!cell) { cell = new CCTableViewCell();//创建一个新的cell cell->autorelease();//加入到自动释放池中 CCSprite *sprite = CCSprite::create("Icon-72.png");//创建一个精灵 sprite->setAnchorPoint(CCPointZero);//设置精灵锚点为左下角 sprite->setPosition(ccp(0,0));//设置精灵位置 相当于在cell中的相对位置 cell->addChild(sprite);//将精灵加入到cell中 CCLabelTTF *label = CCLabelTTF::create(string->getCString(),"Helvetica",20.0);//创建一个标签 label->setPosition(CCPointZero);//设置标签相对cell的位置 label->setAnchorPoint(CCPointZero);//设置标签锚点为左下角 label->setTag(123);//为标签做一个标记,以便于在cell在重用队列中被取出来时，能够获取的该label并重置label信息 cell->addChild(label);//将标签加入到cell中 } else { /*如果cell不为空,则根据tag获取到之前cell中存放的元素,并将元素信息重置*/ CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123); //获取当前cell中的label label->setString(string->getCString());//重置label的相关信息 } return cell; } unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table) { return 5; } void HelloWorld::scrollViewDidScroll(cocos2d::extension::CCScrollView* view) { } void HelloWorld::scrollViewDidZoom(cocos2d::extension::CCScrollView* view) { } void HelloWorld::tableCellHighlight(CCTableView* table,CCTableViewCell* cell) { printf("此方法在点击某个cell时调用，可以在此方法中设置该cell点击状态下的高亮图片"); } void HelloWorld::tableCellUnhighlight(CCTableView* table,CCTableViewCell* cell) { printf("与上面方法对应，在点击后调用，可以再该方法中做取消cell的高亮图片处理"); }