cocos2d-x tableView

***************************************转载请注明出处:http://blog.csdn.net/lttree********************************************




好久前就想做个这种 ScrollView的东东,在翻cocos2d-x给的那堆模板的时候,发现有这个效果,特意来学习一下,

也翻了一些书,上了N多网站,发现大部分都是2.x版本的东西,

特地整理了下3.x版本



一、什么是TableView?

这个东西啊,很多游戏,结束后的排行榜,比如里面有20个内容,但是由于窗口受限,不能全部展示,所以像滚动条一样可以纵向(当然也可以横向)拉动的东东。

这个也要和ListView和PageView不一样的,

▪ 与ListView相比

ListView以前我也没用过,网上资料查到的也不多,就讲一下最大的不同吧。

ListView中的每个单元称为item,TableView的每个单元称为cell,如果分别创建20个单元,但每次只能显示5个单元。当ListView创建的时候,会直接创建20个item;而TableView只会创建5个cell,然后在队列中反复利用。这样做的优点就不用多说了吧。

▪ 与PageView相比

我认为的差别在于,我们用TableView的时候,每次滑动,并不会滑动固定的距离,就是说滑动的距离难以固定,而且往往伴随着偏移量,比如手往下一划,当你手离开时候,它还会继续往下划一点(就像有惯性一样)。

而PageView就不同了,如果你往下滑动,比如从编号1滑动到编号3的一半,它会自己判断最后定位到滑到3还是4。就像你翻书一样,不可能翻一半,要么不翻动,要么翻过去。




二、TableView的使用

1.首先要知道头文件 和 命名空间

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #include "cocos2d.h"  
  2. #include "cocos-ext.h"  
  3.   
  4. USING_NS_CC;  
  5. USING_NS_CC_EXT;  

还有继承的代理类

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. class HelloWorld : public Layer,TableViewDataSource,TableViewDelegate  
  2. {  
  3. };  


我直接在这个类显示TableView,所以也继承了Layer



2.必备的函数

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. /* 必须实现的函数 */  
  2. // 当滑动tableview时触发该方法 参数为当前的tableview对象  
  3. virtual void scrollViewDidScroll(ScrollView* view) {};  
  4. // 当tableview被放大或缩小时触发该方法  参数为当前tableview对象  
  5. virtual void scrollViewDidZoom(ScrollView* view) {}  
  6. // 当cell被点击时调用该方法 参数为当前的tableview对象与被点击的cell对象  
  7. virtual void tableCellTouched(TableView* table, TableViewCell* cell);  
  8. // 设置tableview的Cell大小  
  9. virtual Size tableCellSizeForIndex(TableView *table, ssize_t idx);  
  10. // 获取编号为idx的cell  
  11. virtual TableViewCell* tableCellAtIndex(TableView *table, ssize_t idx);  
  12. // 设置tableview中cell的个数  
  13. virtual ssize_t numberOfCellsInTableView(TableView *table);  


在场景的init函数中,创建TableView:

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. visibleSize = Director::getInstance()->getVisibleSize();  
  2.   
  3. //创建一个talbleview 将datasource设置为当前的类的对象 tableview的显示区域大小为 300 * 300  
  4. TableView* tableView = TableView::create(this, CCSizeMake(300,300));  
  5. //设置tableview为水平方向  ScrollView::Direction::VERTICAL 为垂直,ScrollView::Direction::HORIZONTAL 为水平  
  6. tableView->setDirection(ScrollView::Direction::VERTICAL);  
  7. //设置位置  
  8. tableView->setPosition(Vec2(visibleSize.width/2,visibleSize.height/3));  
  9. //设置代理对象  
  10. tableView->setDelegate(this);  
  11. // 填充顺序  
  12. tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);  
  13. //添加tableview到当前layer  
  14. this->addChild(tableView);  
  15. //加载tableview  
  16. tableView->reloadData();  


然后就是其他函数的定义:

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. //当cell被点击时调用  cell->getIdx()获取当前点击cell的编号  
  2. void HelloWorld::tableCellTouched(TableView* table, TableViewCell* cell)  
  3. {  
  4.     // 在输出窗口打印出,当前cell的编号  
  5.     CCLOG("cell touched at index: %i", cell->getIdx());  
  6. }  
  7.   
  8. //设置编号为 idx 的cell的大小  此处都为100*100  
  9. Size HelloWorld::tableCellSizeForIndex(TableView *table, ssize_t idx)  
  10. {  
  11.     return CCSizeMake(100, 100);  
  12. }  
  13.   
  14. //由于tableview是动态获取数据的,该方法在初始化时会被调用一次,之后在每个隐藏的cell显示出来的时候都会调用  
  15. TableViewCell* HelloWorld::tableCellAtIndex(TableView *table, ssize_t idx)  
  16. {  
  17.     CCString *string = CCString::createWithFormat("%d", idx);  
  18.       
  19.     // 在重用队列中获取一个cell 然后判断cell是否为空 不为空则创建一个新的  
  20.     TableViewCell *cell = table->dequeueCell();  
  21.       
  22.     if (!cell) {  
  23.         //创建一个新的cell  
  24.         cell = new TableViewCell();  
  25.         //加入到自动释放池中  
  26.         cell->autorelease();  
  27.         //创建一个图片精灵  
  28.         CCSprite *sprite = CCSprite::create("Icon.png");  
  29.         //设置精灵锚点为左下角  
  30.         sprite->setAnchorPoint(Vec2::ZERO);  
  31.         //设置精灵位置 相当于在cell中的相对位置  
  32.         sprite->setPosition(Vec2(0,0));  
  33.         //将精灵加入到cell中  
  34.         cell->addChild(sprite);  
  35.           
  36.         //创建一个标签  
  37.         LabelTTF *label = LabelTTF::create(string->getCString(), "Helvetica", 20.0);  
  38.         //设置标签相对cell的位置  
  39.         label->setPosition(Vec2::ZERO);  
  40.         //设置标签锚点为左下角  
  41.         label->setAnchorPoint(Vec2::ZERO);  
  42.         //为标签做一个标记,以便于在cell在重用队列中被取出来时,能够获取的该label并重置label信息  
  43.         label->setTag(123);  
  44.         //将标签加入到cell中  
  45.         cell->addChild(label);  
  46.     }  
  47.     else  
  48.     {  
  49.         // 如果cell不为空,则根据tag获取到之前cell中存放的元素,并将元素信息重置  
  50.         //获取当前cell中的label  
  51.         LabelTTF *label = (LabelTTF*)cell->getChildByTag(123);  
  52.         //重置label的相关信息  
  53.         label->setString(string->getCString());  
  54.     }  
  55.     return cell;  
  56. }  
  57.   
  58. //设置cell的个数 即一个tableview中包含了20个cell  
  59. ssize_t HelloWorld::numberOfCellsInTableView(TableView *table)  
  60. {  
  61.     return 20;  
  62. }  


上面代码注释这么详细,就不再多说他了,

还有一些可以选择设定的函数,这里就不给出啦,可以在API中查询尝试

PS:3.4英文版API 离线下载 ->这里




三、一些问题及解决

在测试这个的时候碰到了许多问题,这里说一下,如果大家遇到和我一样的问题,可以解决一下

我这里用的是环境是 cocos2d-x 3.4 + Win7 + VS2012


1.头文件和继承类

测试这个的时候,我看了书和很多资料,但是它们都是2.x版本,所以有挺多差别的

比如头文件,并不是非要 #include "extensions/cocos-ext.h"

现在已经方便了很多,直接 #include "cocos-ext.h" 就行了

命名空间 USING_NS_CC_EXT 不要忘了,

尤其是 继承的两个代理类 TableViewDataSource和TableViewDelegate,均为public继承

而且,关于什么对项目的添加、引用、包含路径那些都不需要,已经优化了。

***********************************补充***********************************************

叙述有误啊,我已经把错误的地方注释掉了,

这里添加的时候还是要加包含路径的(因为当时添加、引用这些东西看了很多,自己也尝试了很多,可能就忘了一些)

重新建立了一个项目,

在添加完 #include "cocos-ext.h"

命名空间 USING_NS_CC_EXT以后

发现还是要添加包含路径的

方法:

①右键点击自己的项目:

比如这里,我的项目tableview,右键点击它


②选择属性,然后就是下图:


③右方小三角,选择编辑,

然后新建一行,输入: $(EngineRoot)


然后就可以继承那两个代理类啦。。。





2.关于坐标 ccp(0,0)

这个也是因为版本问题造成的困扰

如果在 setPosition(坐标点) 出现,还可以通过;但如果在setAnchorPoint(锚点)出现,那就会出现Error了

3.x后都改成Vec了,比如 ccp(0,0) 就是 Vec2(0,0) 

而且如果是锚点,也可以用 Vec2::ZERO


3.关于 ssize_t

看了以前版本的代码,对于unsigned int 都改成了 ssize_t

那么问题来了,ssize_t是何许人也?

追踪了一下出处,在CCstd.h中:

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #ifndef __SSIZE_T  
  2. #define __SSIZE_T  
  3. typedef SSIZE_T ssize_t;  
  4. #endif // __SSIZE_T  


然后继续往前找,在BASETSD.H中:

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. //  
  2. // SIZE_T used for counts or ranges which need to span the range of  
  3. // of a pointer.  SSIZE_T is the signed variation.  
  4. //  
  5.   
  6. typedef UINT_PTR SIZE_T, *PSIZE_T;  
  7. typedef INT_PTR SSIZE_T, *PSSIZE_T;  


大概意思应该是, SIZE_T通常用来计数或者一个指针需要移动的范围;SSIZE_T是一个有正负的变量。

反正我感觉就是把 size_t 当 unsigned int用,ssize_t 当 int 用。

英语有点捉急,如果翻译错误,请大神给翻译一下


4.关于Direction

[cpp]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. tableView->setDirection(ScrollView::Direction::VERTICAL);  

就是在这里,用到的。

以前版本是

 kCCScrollViewDirectionHorizontal 为水平 , kCCScrollViewDirectionVertical为垂直

已经被淘汰了,现在是用这个了

 ScrollView::Direction::VERTICAL 为垂直,ScrollView::Direction::HORIZONTAL 为水平


最后就是关于很多类名的问题,归根究底还是版本的更新导致的,很多类前面的CC去掉了。


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值