TableView
一、什么是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.首先要知道头文件 和 命名空间
|
1
2
3
4
5
|
#include cocos2d.h
#include cocos-ext.h
USING_NS_CC;
USING_NS_CC_EXT;
|
还有继承的代理类
|
1
2
3
|
class
HelloWorld :
public
Layer,TableViewDataSource,TableViewDelegate
{
};
|
我直接在这个类显示TableView，所以也继承了Layer
2.必备的函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* 必须实现的函数 */
// 当滑动tableview时触发该方法 参数为当前的tableview对象
virtual
void
scrollViewDidScroll(ScrollView* view) {};
// 当tableview被放大或缩小时触发该方法 参数为当前tableview对象
virtual
void
scrollViewDidZoom(ScrollView* view) {}
// 当cell被点击时调用该方法 参数为当前的tableview对象与被点击的cell对象
virtual
void
tableCellTouched(TableView* table, TableViewCell* cell);
// 设置tableview的Cell大小
virtual Size tableCellSizeForIndex(TableView *table, ssize_t idx);
// 获取编号为idx的cell
virtual TableViewCell* tableCellAtIndex(TableView *table, ssize_t idx);
// 设置tableview中cell的个数
virtual ssize_t numberOfCellsInTableView(TableView *table);
|
在场景的init函数中，创建TableView：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
visibleSize = Director::getInstance()->getVisibleSize();
//创建一个talbleview 将datasource设置为当前的类的对象 tableview的显示区域大小为 300 * 300
TableView* tableView = TableView::create(
this
, CCSizeMake(
300
,
300
));
//设置tableview为水平方向 ScrollView::Direction::VERTICAL 为垂直,ScrollView::Direction::HORIZONTAL 为水平
tableView->setDirection(ScrollView::Direction::VERTICAL);
//设置位置
tableView->setPosition(Vec2(visibleSize.width/
2
,visibleSize.height/
3
));
//设置代理对象
tableView->setDelegate(
this
);
// 填充顺序
tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);
//添加tableview到当前layer
this
->addChild(tableView);
//加载tableview
tableView->reloadData();
|
然后就是其他函数的定义：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
//当cell被点击时调用 cell->getIdx()获取当前点击cell的编号
void
HelloWorld::tableCellTouched(TableView* table, TableViewCell* cell)
{
// 在输出窗口打印出，当前cell的编号
CCLOG(cell touched at index: %i, cell->getIdx());
}
//设置编号为 idx 的cell的大小 此处都为100*100
Size HelloWorld::tableCellSizeForIndex(TableView *table, ssize_t idx)
{
return
CCSizeMake(
100
,
100
);
}
//由于tableview是动态获取数据的，该方法在初始化时会被调用一次，之后在每个隐藏的cell显示出来的时候都会调用
TableViewCell* HelloWorld::tableCellAtIndex(TableView *table, ssize_t idx)
{
CCString *string = CCString::createWithFormat(%d, idx);
// 在重用队列中获取一个cell 然后判断cell是否为空 不为空则创建一个新的
TableViewCell *cell = table->dequeueCell();
if
(!cell) {
//创建一个新的cell
cell =
new
TableViewCell();
//加入到自动释放池中
cell->autorelease();
//创建一个图片精灵
CCSprite *sprite = CCSprite::create(Icon.png);
//设置精灵锚点为左下角
sprite->setAnchorPoint(Vec2::ZERO);
//设置精灵位置 相当于在cell中的相对位置
sprite->setPosition(Vec2(
0
,
0
));
//将精灵加入到cell中
cell->addChild(sprite);
//创建一个标签
LabelTTF *label = LabelTTF::create(string->getCString(), Helvetica,
20.0
);
//设置标签相对cell的位置
label->setPosition(Vec2::ZERO);
//设置标签锚点为左下角
label->setAnchorPoint(Vec2::ZERO);
//为标签做一个标记,以便于在cell在重用队列中被取出来时，能够获取的该label并重置label信息
label->setTag(
123
);
//将标签加入到cell中
cell->addChild(label);
}
else
{
// 如果cell不为空,则根据tag获取到之前cell中存放的元素,并将元素信息重置
//获取当前cell中的label
LabelTTF *label = (LabelTTF*)cell->getChildByTag(
123
);
//重置label的相关信息
label->setString(string->getCString());
}
return
cell;
}
//设置cell的个数 即一个tableview中包含了20个cell
ssize_t HelloWorld::numberOfCellsInTableView(TableView *table)
{
return
20
;
}
|
上面代码注释这么详细，就不再多说他了，
还有一些可以选择设定的函数，这里就不给出啦，可以在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继承
而且，关于什么对项目的添加、引用、包含路径那些都不需要，已经优化了。
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中：
|
1
2
3
4
|
#ifndef __SSIZE_T
#define __SSIZE_T
typedef SSIZE_T ssize_t;
#endif
// __SSIZE_T
|
然后继续往前找，在BASETSD.H中：
|
1
2
3
4
5
6
7
|
//
// SIZE_T used for counts or ranges which need to span the range of
// of a pointer. SSIZE_T is the signed variation.
//
typedef UINT_PTR SIZE_T, *PSIZE_T;
typedef INT_PTR SSIZE_T, *PSSIZE_T;
|
大概意思应该是， SIZE_T通常用来计数或者一个指针需要移动的范围；SSIZE_T是一个有正负的变量。
反正我感觉就是把 size_t 当 unsigned int用，ssize_t 当 int 用。
英语有点捉急，如果翻译错误，请大神给翻译一下
4.关于Direction
|
1
|
tableView->setDirection(ScrollView::Direction::VERTICAL);
|
就是在这里，用到的。
以前版本是
kCCScrollViewDirectionHorizontal 为水平 ， kCCScrollViewDirectionVertical为垂直
已经被淘汰了，现在是用这个了
ScrollView::Direction::VERTICAL 为垂直,ScrollView::Direction::HORIZONTAL 为水平
最后就是关于很多类名的问题，归根究底还是版本的更新导致的，很多类前面的CC去掉了。
今天做项目时碰到两个问题：1.cell的index从2开始而不是从0开始 。2.滚动tableview不刷新
部分代码如下：
function ExaminationRank:initRankPanel()
local function scrollViewDidScroll(_view)
end
local function scrollViewDidZoom(_view)
end
local function tableCellTouched(_table, _cell)
end
local function cellSizeForTable(_table, _idex)
return 61
end
local function tableCellAtIndex(_table, _idex)
local cell = _table:dequeueCell()
if nil == cell then
cell = cc.TableViewCell:new()
local defaultItem = self:getDefaultItem()
defaultItem:setTag(99)
cell:addChild(defaultItem)
end
local item = cell:getChildByTag(99)
self:setItemContent(item, _idex)
return cell
end
local function numberOfCellsInTableView(_table) -- 创建内容数量, ~真实item
return self.itemRowSum
end
if self.tableView then
self.tableView:removeFromParent()
end
self.tableView = cc.TableView:create(self.scrollView:getContentSize())
self.tableView:setPosition(cc.p(self.scrollView:getPosition()))
self.tableView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)
self.tableView:setDelegate()
self.tableView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)
self.scrollView:getParent():addChild(self.tableView)
self.scrollView:setTouchEnabled(false)
self.tableView:registerScriptHandler(scrollViewDidScroll,cc.SCROLLVIEW_SCRIPT_SCROLL)
self.tableView:registerScriptHandler(scrollViewDidZoom,cc.SCROLLVIEW_SCRIPT_ZOOM)
self.tableView:registerScriptHandler(tableCellTouched,cc.TABLECELL_TOUCHED)
self.tableView:registerScriptHandler(cellSizeForTable,cc.TABLECELL_SIZE_FOR_INDEX)
self.tableView:registerScriptHandler(tableCellAtIndex,cc.TABLECELL_SIZE_AT_INDEX)
self.tableView:registerScriptHandler(numberOfCellsInTableView,cc.NUMBER_OF_CELLS_IN_TABLEVIEW)
self.tableView:reloadData()
end
function ExaminationRank:getDefaultItem()
local cell = ccs.GUIReader:getInstance():widgetFromJsonFile("new_ui/paihangbang_cjs.json")
cell:setSwallowTouches(true)
return cell
end
function ExaminationRank:setItemContent(_item, _index)
local rank
local index = _index + 1
if index <= 3 then
rank = ccui.Helper:seekWidgetByName(_item,"Image_"..index)
ccui.Helper:seekWidgetByName(_item,"rankLabel"):setVisible(false)
else
rank = ccui.Helper:seekWidgetByName(_item,"rankLabel")
rank:setString(index)
ccui.Helper:seekWidgetByName(_item,"Image_1"):setVisible(false)
ccui.Helper:seekWidgetByName(_item,"Image_2"):setVisible(false)
ccui.Helper:seekWidgetByName(_item,"Image_3"):setVisible(false)
end
rank:setVisible(true)
local nameLabel = ccui.Helper:seekWidgetByName(_item,"nameLabel")
nameLabel:setString("名字"..index)
local timeLabel = ccui.Helper:seekWidgetByName(_item,"timeLabel")
timeLabel:setString("01:02:03")
local scoreLabel = ccui.Helper:seekWidgetByName(_item,"scoreLabel")
scoreLabel:setString("1234")
end
第一个问题的原因是cellSizeForTable里面return的值设置的不正确（值越大显示的cell数量越少），导致显示的不全。
第二个问题是因为getDefaultItem函数获得的json文件有两层有交互(要把交互的钩去掉)，还有scrollView的交互没有setTouchEnabled(false)
其中第一个还是用vs跟进TableView.cpp去一步步看才找出问题，要重视原码的理解，不能知道怎么用就可以了，还要了解里面的原理。