cocos2dx3.x的TableView使用

1.TableView

TableView直译为表视图（感觉则拗口），一般用于展示信息或者商城商品等。可以直接理解为一个信息展示的框。

2.效果展示

这里我做了一个3x3的TablelView表视图，展示了几张英雄的图片（其实就一个）。

3.代码

#ifndef TABLEVIEW_TEST_H_
#define TABLEVIEW_TEST_H_
#include"cocos2d.h"
#include"cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;
class TableViewTest:public Layer,public TableViewDataSource,public TableViewDelegate
{
public:bool init()override;static Scene* createScene();Size tableCellSizeForIndex(TableView* table,ssize_t idx)override;TableViewCell* tableCellAtIndex(TableView* table,ssize_t idx)override;ssize_t numberOfCellsInTableView(TableView* table)override;void tableCellTouched(TableView* table,TableViewCell* cell)override;void tableCellHighlight(TableView* table, TableViewCell* cell)override;void tableCellUnhighlight(TableView* table, TableViewCell* cell)override;CREATE_FUNC(TableViewTest);};
#endif // !TABLEVIEW_TEST_H_

#include "TableViewTest.h"bool TableViewTest::init()
{if (!Layer::init()){return false;}//const auto size = Director::getInstance()->getWinSize();//const auto layer = LayerColor::create(Color4B::RED);this->addChild(layer);//auto tableView = TableView::create(this,Size(270,270));tableView->setDelegate(this);tableView->setPosition(size/2);tableView->reloadData();tableView->setDirection(ScrollView::Direction::VERTICAL);tableView->setVerticalFillOrder(TableView::VerticalFillOrder::BOTTOM_UP);//tableView->setContentOffset(Vec2(45,45),true);this->addChild(tableView);return true;
}Scene* TableViewTest::createScene()
{auto scene = Scene::create();auto layer = TableViewTest::create();scene->addChild(layer);return scene;
}Size TableViewTest::tableCellSizeForIndex(TableView* table, ssize_t idx)
{return Size(270,90);
}TableViewCell* TableViewTest::tableCellAtIndex(TableView* table, ssize_t idx)
{auto tablecell = table->dequeueCell();if (!tablecell){tablecell = TableViewCell::create();auto cellSprite1 = Sprite::create("header1001.png");cellSprite1->setPosition(Vec2(45,45));tablecell->addChild(cellSprite1);auto cellSprite2 = Sprite::create("header1001.png");cellSprite2->setPosition(Vec2(135, 45));tablecell->addChild(cellSprite2);auto cellSprite3 = Sprite::create("header1001.png");cellSprite3->setPosition(Vec2(225, 45));tablecell->addChild(cellSprite3);}return tablecell;
}ssize_t TableViewTest::numberOfCellsInTableView(TableView* table)
{return ssize_t(10);
}void TableViewTest::tableCellTouched(TableView* table, TableViewCell* cell)
{log("%d", cell->getIdx());
}void TableViewTest::tableCellHighlight(TableView* table, TableViewCell* cell)
{log("Click Cell %d",cell->getIdx());
}void TableViewTest::tableCellUnhighlight(TableView* table, TableViewCell* cell)
{log("Release Cell %d", cell->getIdx());
}

4.细节说明

1.尽管返回TableCell的大小的方法并非纯虚函数，但是经过我测试发现，不返回其大小会导致无法绘制的情况出现，所以需要实现。

Size tableCellSizeForIndex(TableView* table,ssize_t idx)override;

2.再为TabelCell添加子节点即需要显示的内容时，需要设置坐标，默认为0坐标，而图片精灵的锚点一般为0.5，所以不设置坐标会导致只会显示1/4的图片。

3.经过测试可以发现3个触摸函数的执行顺序为tableCellHightlight()->tableCellUnhightlight()->tableCellTouched();

cocos2dx3.x的TableView使用相关推荐

知识点回顾-简单的TableView单组数据展示/多组数据展示
1 拖入TableView到UIView中,连线DataSource 2 3 1.实现数据源方法 4 - (NSInteger)tableView:(UITableView *)tableView n ...
((ios开发学习笔记九)) Simple TableView 实现（附实例源码）
实现效果: 实现过程: Step One 创建单个窗体项目 Step Two 创建control 接口 Step Three 创建窗体和关联关系 Step four 实现table view 的接口 ...
xcode 4.3.2 use storyboard创建TableView
xcode 4.3.2 use storyboard 使用TableView,显示一个颜色列表,表格包括一张图片,一个文本,一行副文本. TableView 呈现列表格式的数据,每一行是一个UITab ...
取消tableView多余的横线
- (void)setExtraCellLineHidden: (UITableView *)tableView{ UIView *view = [UIView new]; view. ...
优雅地分离tableview回调
你是否遇到过这样的需求,在tableview中显示一列数据,点击某一个cell时,在此cell下显示相应的附加信息.如下图: 你是不是觉得需求很容易实现,只要使用tableview的insertRow ...
iOS下拉tableView实现上面的图片放大效果
#import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScr ...
点击TableView任一行跳转详情页面会跳转两次的解决办法
在做TableView跳转的时候,发现实际上生成了两个detail view.我 navigate back 的时候,也是先看到一次detail view,然后才回到tableView的. 这是因为: ...
IOS tableView删除数据
NSMutableArray *_allshops; NSMutableArray *_deleteshops; -(IBAction)remove{ 1. //记录删除的行号 //创建动态数组存放行 ...