Cocos2d-x学习笔记（八）-------->TableView控件

最新推荐文章于 2022-08-09 23:37:57 发布

梁航斌

最新推荐文章于 2022-08-09 23:37:57 发布

阅读量536

点赞数

本文链接：https://blog.youkuaiyun.com/liang3472/article/details/40478193

版权

本文介绍了Cocos2d-x中的TableView控件，包括其功能、使用方法和实现细节。通过创建和设置TableView，展示了如何确定单元格大小、内容和数量，以及处理单元格触摸事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TableView控件

TableView控件：表框控件，TableView控件可以提供一个列表，列表是由多个单元组成，这些单元称为Cell，成水平或垂直方向对齐。每个单元中可以放置任意类型的对象，比如：字体标签，精灵图片，按钮等等。

使用：

注：本例结合Extension\TableViewTest子项目。

生成一个空的TableView，指定其工作的方向是水平还是垂直方向，然后设定位置。

CCTableView* tableView = CCTableView::create(this, CCSizeMake(250, 60));
tableView->setDirection(kCCScrollViewDirectionHorizontal);
tableView->setPosition(ccp(20,winSize.height/2-30));

第一个参数类型是 CCTableViewDataSource，它是 CCTableView控件的数据源类，这个数据源类会提供三个方法，用于控制单元的数量和大小，提供数据单元的内容。

● CCSize cellSizeForTable(CCTableView *table)：确定每个单元的大小范围。

● CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx)：确定每个单元的内容。

● unsigned int numberOfCellsInTableView(CCTableView *table)：确定列表一共有多少个 Cell单元。

片段：

CCSize TableViewTestLayer::tableCellSizeForIndex(CCTableView *table, unsigned int idx)
{
    if (idx == 2) {
        return CCSizeMake(100, 100);
    }
    return CCSizeMake(60, 60);
}

CCTableViewCell* TableViewTestLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
    CCString *string = CCString::createWithFormat("%d", idx);
    CCTableViewCell *cell = table->dequeueCell();
    if (!cell) {
        cell = new CustomTableViewCell();
        cell->autorelease();
        CCSprite *sprite = CCSprite::create("Images/Icon.png");
        sprite->setAnchorPoint(CCPointZero);
        sprite->setPosition(ccp(0, 0));
        cell->addChild(sprite);

        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);
        label->setPosition(CCPointZero);
		label->setAnchorPoint(CCPointZero);
        label->setTag(123);
        cell->addChild(label);
    }
    else
    {
        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);
        label->setString(string->getCString());
    }


    return cell;
}

unsigned int TableViewTestLayer::numberOfCellsInTableView(CCTableView *table)
{
    return 20;
}

用于展示 CCTableView控件的当前类 TableViewTestLayer定义时继承于 CCTableViewDataSource,，所以当前类中会定义并实现以上三个函数的具体内容。通过实现 CCTableViewDataSource类的三个函数，列表中的每个 Cell的大小被确定为60*60像素大小；列表中一共有20个 Cell；每个 Cell提供的内容是一个图片精灵和当前 Cell的编号 ID。

片段：

void TableViewTestLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell)
{
    CCLOG("cell touched at index: %i", cell->getIdx());
}

在生成好的 CCTableView对象之后，还要指定它的委托对象，委托对象就是一个能够帮 CCTableView控件处理事件的对象，这个对象必须是 CCTableViewDelegate类型或者是其子 CCTableViewDelegate的子类，在 TableViewTest实例项目中，我们将当前类 CCTableViewTestLayer同时也定义成了 CCTableViewDelegate的子类，让其定义并实现处理 CCTableView控件的 tableCellTouched(CCTableView* table, CCTableViewCell* cell)回调函数，这个函数会在某个 Cell被点击后被调用，这里可以实现某个 Cell被选中后的处理过程，比如：一个玩家成绩列表，当某个成绩所在的 Cell被选中时，可以详细显示本次成绩的具体时间、分数等内容。

tableView->setDelegate(this);
this->addChild(tableView);
tableView->reloadData();

为CCTableView设置委托对象，然后添加到场景。

效果：

重要的两个函数：

CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx)：函数在第一次初始化列表控件时会被每个Cell单元调用一次，以至于每个Cell单元都会被填充好内容，当列表在使用过程中，比如拖拽列表，导致列表中之前没有显示的Cell会被显示出来，对应的Cell单元回调用此函数，这时可以根据当前单元的索引ID，更新其要显示的内容。

CCTableViewCell* TableViewTestLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
    CCString *string = CCString::createWithFormat("%d", idx);
    CCTableViewCell *cell = table->dequeueCell();
    if (!cell) {
        cell = new CustomTableViewCell();
        cell->autorelease();
        CCSprite *sprite = CCSprite::create("Images/Icon.png");
        sprite->setAnchorPoint(CCPointZero);
        sprite->setPosition(ccp(0, 0));
        cell->addChild(sprite);

        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);
        label->setPosition(CCPointZero);
		label->setAnchorPoint(CCPointZero);
        label->setTag(123);
        cell->addChild(label);
    }
    else
    {
        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);
        label->setString(string->getCString());
    }


    return cell;
}

void tableCellTouched(CCTableView* table, CCTableViewCell* cell)：当 Cell单元被点击时调用的回调函数，函数第二个参数是 CCTableViewCell，也就是被点击到的Cell单元对象，在函数中我们可以获得 Cell单元的索引 ID，这样我们就可以知道当前是第几个 Cell单元被击中，并作出相应处理。

void TableViewTestLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell)
{
    CCLOG("cell touched at index: %i", cell->getIdx());
}