Cocos2d-x CCTableView实现列表

原文出自:http://blog.csdn.net/crayondeng/article/details/11649977


在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
  1. #define USING_NS_CC_EXT                     using namespace cocos2d::extension  


2、要继承CCTableView的两个代理 CCTableViewDelegate  和  CCTableViewDataSource

所以首先要继承这里两个代理:

[cpp]  view plain copy
  1. class HelloWorld : public cocos2d::CCLayer,public cocos2d::extension::CCTableViewDelegate,public cocos2d::extension::CCTableViewDataSource  


其中至少要实现以下的代理方法:

[cpp]  view plain copy
  1. //触摸到某个cell的事件  
  2.     virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);  
  3.       
  4.     //定制每个cell的size  
  5.     virtual cocos2d::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx);  
  6.       
  7.     //定制每个cell的内容  
  8.     virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);  
  9.       
  10.     //确定这个tableview的cell行数  
  11.     virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);  

可以选择实现:

[cpp]  view plain copy
  1. //设置单元格高亮的状态  
  2.    virtual void tableCellHighlight(CCTableView* table, CCTableViewCell* cell);  
  3.    //设置单元格非高亮的状态  
  4.    virtual void tableCellUnhighlight(CCTableView* table, CCTableViewCell* cell);  

3、有于CCTableView是继承 CCScrollView ,所以必须要继承这两个方法,但是什么都不做,只是空实现而已。

[cpp]  view plain copy
  1. //由于CCTableView是继承CCScrollView,所以要继承这两个方法  
  2.     virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view) {}  
  3.     virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view) {}  

4、按照需要实现代理方法。

首先看看我定制的tableview吧!


其中每一个cell包含的内容:一个背景sprite(蓝色),左边一个label,中间一个menu。


(1)触摸到某个cell的事件处理:

[cpp]  view plain copy
  1. void HelloWorld::tableCellTouched(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)  
  2. {  
  3.     CCLOG("you touch cell index = %u",cell->getIdx());  
  4. }  

(2)定制每一个cell的size

[cpp]  view plain copy
  1. CCSize HelloWorld::tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx)  
  2. {  
  3.     return CCSizeMake(337, 55);  
  4. }  

(3)定制一个tableview的cell的个数

[cpp]  view plain copy
  1. unsigned int HelloWorld::numberOfCellsInTableView(cocos2d::extension::CCTableView *table)  
  2. {  
  3.     return 10;  
  4. }  

(4)定制每一个cell的内容

[cpp]  view plain copy
  1. CCTableViewCell* HelloWorld::tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx)  
  2. {  
  3.     CCString *string = CCString::createWithFormat("index = %d",idx);  
  4.     CCTableViewCell *cell = table->dequeueCell();  
  5.     if (!cell) {  
  6.         cell = new CustomTableCell();  
  7.         cell->autorelease();  
  8.           
  9.         //添加背景图片  
  10.         CCSprite *sprite = CCSprite::create("22.png");  
  11.         sprite->setAnchorPoint(CCPointZero);  
  12.         sprite->setPosition(ccp(0, 0));  
  13.         cell->addChild(sprite,1);  
  14.           
  15.         //添加label  
  16.         CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Arial", 15);  
  17.         label->setAnchorPoint(CCPointZero);  
  18.         label->setTag(123);  
  19.         label->cocos2d::CCNode::setPosition(5, 5);  
  20.         cell->addChild(label,2);  
  21.           
  22.         //添加menu  
  23.         CCMenuItemImage *itemImage = CCMenuItemImage::create("23.png""24.png", cell, menu_selector(HelloWorld::menuCallBack));  
  24.         CCMenu *menu = CCMenu::create(itemImage,NULL);  
  25.           
  26.         //注意CCMenu是无法修改锚点的,其默认位置是在其几何中心  
  27.         menu->setPosition(ccp(180,26));  
  28.           
  29.     //可以通过修改CCMenuItemImage的锚点的位置  
  30.     //        itemImage->setAnchorPoint(CCPointZero);  
  31.     //        menu->setPosition(ccp(180,6));  
  32.           
  33.         cell->addChild(menu, 2);  
  34.     }  
  35.       
  36.     else  
  37.     {  
  38.         //由于每一个cell的label都是不同的,所以我们通过tag值获取到label来对label进行修改  
  39.         CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);  
  40.         label->setString(string->getCString());  
  41.     }  
  42.   
  43.     return cell;  
  44. }  
  45.   
  46. void HelloWorld::menuCallBack(cocos2d::CCObject *pSender)  
  47. {  
  48.     CCTableViewCell *cell = (CCTableViewCell*)(((CCMenuItemImage*)pSender)->getParent()->getParent());  
  49.     CCLog("menu click cell index : %d",cell->getIdx());  
  50. }  

这一部分是最重要的部分,稍微解说一下吧!

①这里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
  1. #ifndef __TableView__CustonTabelCell__  
  2. #define __TableView__CustonTabelCell__  
  3.   
  4. #include   
  5. #include "cocos-ext.h"  
  6. #include "cocos2d.h"  
  7.   
  8. USING_NS_CC;  
  9. USING_NS_CC_EXT;  
  10.   
  11. class CustomTableCell:public cocos2d::extension::CCTableViewCell  
  12. {  
  13. public:  
  14.     void draw();  
  15. };  
  16.   
  17. #endif /* defined(__TableView__CustonTabelCell__) */  

[cpp]  view plain copy
  1. #include "CustonTabelCell.h"  
  2.   
  3. void CustomTableCell::draw()  
  4. {  
  5.     CCTableViewCell::draw();  
  6. }  

其中是没有添加定制实现的。


5、设置cell被点击时高亮和非高亮。

[cpp]  view plain copy
  1. void HelloWorld::tableCellHighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)  
  2. {  
  3.     CCLog("High light");  
  4.     CCSprite *sprite1 = CCSprite::create("21.png");  
  5.     sprite1->setTag(21);  
  6.     sprite1->setOpacity(125); //设置透明度  
  7.     sprite1->setAnchorPoint(CCPointZero);  
  8.     sprite1->setPosition(ccp(0, 0));  
  9.     cell->addChild(sprite1,3);  
  10.   
  11. }  
  12. void HelloWorld::tableCellUnhighlight(cocos2d::extension::CCTableView *table, cocos2d::extension::CCTableViewCell *cell)  
  13. {  
  14.     CCLog("Unhigh light");  
  15.     cell->removeChildByTag(21);  
  16. }  


6、下面就是如何创建tablview了,在init方法中:

[cpp]  view plain copy
  1. bool HelloWorld::init()  
  2. {  
  3.     //////////////////////////////  
  4.     // 1. super init first  
  5.     if ( !CCLayer::init() )  
  6.     {  
  7.         return false;  
  8.     }  
  9.       
  10.       
  11.     CCTableView *tableview = CCTableView::create(this, CCSizeMake(436, 300));  
  12.     tableview->setDirection(kCCScrollViewDirectionVertical); //设置tableview的方向是竖直方向,当然也有水平方向  
  13.     tableview->setDelegate(this);  
  14.     tableview->setVerticalFillOrder(kCCTableViewFillTopDown);// 设置tableview cell的index排列,这里设置是从上到下变大,当然也可以从下到上变大。  
  15.     tableview->setPosition(ccp(20,20));  
  16.     this->addChild(tableview);  
  17.       
  18. //    tableview->reloadData();  
  19.   
  20.     return true;  
  21. }  


好啦,大概tableview常用的一些操作就是这些了,当然CCTabelView中还有一些其他方法,这些都是和ios中的差不多的,需要的时候查看就可以了。

你可能感兴趣的:(cocos2d-x)