cocos2dx tableview的实际应用

tableview作为一种UI是非常实用的，它可以显示多列元素，并且可以通过滑动来即时加载元素，常用的就是游戏中的物品栏，物品栏在各类游戏中都占有很重要的地位，卡牌游戏中卡牌的整理，RPG中的物品栏等，这些都需要滑动换页，元素点击的要素，而tableview在功能上能够完美的实现这个，接下来以实际的卡牌的整理界面来介绍tableview

一，要使用tableview首先需要继承cocos2dx中tableviewdatasource和TableViewDelegate两个类，并重载其中的四个方法

virtual TableViewCell* tableCellAtIndex(TableView *table,ssize_t idx);

//返回单元格个数，指的是行数，不是指行内总元素的个数

virtual ssize_t numberOfCellsInTableView(TableView *table);

//根据index设置单元格大小，同样指每行的size

virtual Size tableCellSizeForIndex(TableView *tabe,ssize_t idx);

//cell中的元素显示，即每行中要显示的元素都是在这个函数中完成载入的

virtual void tableCellTouched(TableView *table ,TableViewCell *cell);

//cell的点击事件，即每行的点击事件

四个方法的重载如下：

//这里需要使用dequeuecell来获得cell，如果直接在内部创建cell会导致cell被重复创建，元素的显示会变异常，需要注意仅在获得的cell为空的前提下才创建cell，否则只需改变
原有cell中的元素即可，
TableViewCell* CardSelectScene::tableCellAtIndex(TableView *table,ssize_t idx){
TableViewCell *cell=table->dequeueCell();
auto barray=Array::create();
int index=idx*3;
int indexfor=0;
int length=0;
if(table->getTag()==0){
barray=array;
}else if(table->getTag()==1){
barray=sarray;
}
if(barray!=NULL){
if(barray->count()-index<3){
length=barray->count()-index;
}else{
length=3;
}
if(!cell){
cell=new TableViewCell();
cell->autorelease();
}else{
cell->removeAllChildren();
}
for(int m=0;m<length;m++){
Dictionary* str=((Dictionary*)array->objectAtIndex(index+m));
custombutton *item=custombutton::createLayer(str);
if(item!=NULL){
item->setAnchorPoint(Point::ZERO);
//item->setScale(0.6);
indexfor=index+m;
item->setTag(index+m);
item->setPosition(Point(150*m,0));
item->setTouchEnabled(true);
item->setTouchMode(Touch::DispatchMode::ONE_BY_ONE);
cell->addChild(item);
}
}
}

return cell;
//idx为行号

}

//返回单元格个数
ssize_t CardSelectScene::numberOfCellsInTableView(TableView *table){
if(table->getTag()==0){
if(array->count()!=0){
if(array->count()<=3){
return 1;
}else{
return 1+array->count()/3;
}

}else{
return 2;

}
}else if(table->getTag()==1){
if(sarray==NULL){
return 0;
}else{
if(sarray->count()!=0){
if(sarray->count()<=3){
return 1;
}else{
return 1+sarray->count()/3;
}

}else{
return 2;

}

}

}
}
//根据index设置单元格大小
Size CardSelectScene::tableCellSizeForIndex(TableView *table,ssize_t  idx){
return Size(434,260);
}
void CardSelectScene::tableCellTouched(TableView *table ,TableViewCell *cell){
CCLOG("cell touched at index: %ld", cell->getIdx());

}

三，元素在cell中的点击

如果在cell中添加的元素含有menu类的控件时，会发现tableview会无法进行拖动，这是因为响应优先级的问题，这个问题会在之后详细介绍，今天要介绍的是元素的点击，因为实际点击时通过touch指针获取的点击位置是世界坐标，并不是cell内部的相对坐标，而通过调试会发现，cell内部的坐标全是相对于该cell的相对坐标，再加上cocos2dx中通过dispatcher下发各种消息时会将消息均等的发送给所有此时在tableview界面上的元素，这样实际用getBoundingBox()来判断是否在元素范围内是很蛋疼的，所以这里采用一个折中的方案，先获得点击的是哪个cell，不是这个cell就不管，是在该cell中再继续判断，获取点击cell的位置如下，因为对于tableview来说其cell的offset也是相对的，并且很蛋疼的是它还是个负值，以260为高度，个数为15个的tableview来说，最上面的0号cell，它的位置其实是(0,-3900)~(0,-3640)之间，所以才需要采用下面的方式来获取点击位置

auto locationworld =touch->getLocation();
auto offset=table->getContentOffset();
auto distance=locationworld.y-offset.y;//获得相对坐标，垂直显示时的获取方法
auto index=maxsize-(int)(distance/260)-1;//获取点击的cell的index，这里260是每行cell的高度，maxsize就是tableview总的cell个数，

获得点击行数后就是内部判断了

//判断如果点击位置是在上部时
if(cell->getIdx()%2==0){
if(locationworld.y>260){
Point location=Point(locationworld.x,locationworld.y-260);
if(this->getBoundingBox().containsPoint(location)){
log("m_power is %d",this->m_power);
return true;
}else{
return false;
}
}else{
Point location=Point(locationworld.x,locationworld.y);
if(this->getBoundingBox().containsPoint(location)){
log("m_power is %d",this->m_power);
return true;
}else{
return false;
}
}
//判断是在下部时
}else if(cell->getIdx()%2==1){
Point location=Point(locationworld.x,locationworld.y);
if(this->getBoundingBox().containsPoint(location)){
log("m_power is %d",this->m_power);
return true;
}else{
return false;
}
}

效果图如下，效果还算不错