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();