UI Nodes 사용하기 TableView

cocos2d-x v3계의 TableView를 시험했으므로, 메모.
이번에는 표시할 내용을 Vector로 가지기로 했습니다.

완성 이미지


아래에 시험 코드를 기재

HelloWorldScene.h

#include "cocos2d.h"
#include "extensions/cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

class HelloWorld : public Layer,
                   public TableViewDataSource,
                   public TableViewDelegate {
private:
    std::vector<std::string> _contents;

public:
    static cocos2d::Scene* createScene();
    virtual bool init();

    // TableView Delegate
    virtual Size cellSizeForTable(TableView* table);
    virtual TableViewCell* tableCellAtIndex(TableView* table, ssize_t idx);
    virtual ssize_t numberOfCellsInTableView(TableView* table);
    virtual void tableCellTouched(TableView* table, TableViewCell* cell);

    CREATE_FUNC(HelloWorld);
};

본래라면, header 파일로 USING_NS_xxx;를 지정하는 것은 그만두는 편이 좋네요.

HelloWorldScene.cpp

bool HelloWorld::init()
{
    if (!Layer::init()) {
        return false;
    }

    Size visibleSize = Director::getInstance()->getVisibleSize();

    // Data
    _contents = {
        "つば九郎",
        "つばみ",
        "トルクーヤ",
    };

    // TableView
    TableView* tableView = TableView::create(this, Size(visibleSize.width, visibleSize.height));
    tableView->setDirection(TableView::Direction::VERTICAL);
    tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);
    tableView->setAnchorPoint(Vec2::ZERO);
    tableView->setPosition(Vec2::ZERO);
    tableView->setDelegate(this);
    this->addChild(tableView);
    tableView->reloadData();

    return true;
}

//---------------------------------------------------------------
#pragma mark - Table View Delegate
//---------------------------------------------------------------

ssize_t HelloWorld::numberOfCellsInTableView(TableView* table)
{
    return _contents.size();
}

Size HelloWorld::cellSizeForTable(TableView* table)
{
    return Size(table->getContentSize().width, 100);
}

void HelloWorld::tableCellTouched(TableView* table, TableViewCell* cell)
{
    // log("cellがタップされました");
}

TableViewCell* HelloWorld::tableCellAtIndex(TableView* table, ssize_t idx)
{
    TableViewCell* cell = table->dequeueCell();
    cell = new TableViewCell();
    cell->autorelease();

    // セルの背景
    auto bg = Sprite::create();
    bg->setAnchorPoint(Vec2(0, 0));
    bg->setTextureRect(Rect(0, 0, table->getContentSize().width, 99));
    bg->setColor(Color3B(230, 230, 230));
    cell->addChild(bg);

    // テキスト
    auto text = StringUtils::format("%ld : %s", idx, _contents[idx].c_str());
    auto label = Label::createWithSystemFont(text.c_str(), "fonts/Marker Felt.ttf", 30);
    label->setAnchorPoint(Vec2::ZERO);
    label->setPosition(Vec2(50, 30));
    label->setColor(Color3B(100, 100, 100));
    cell->addChild(label);

    return cell;
}

특별한 경우가 아니라면 TableViewCell의 width는 TableView의 width에 맞춰도 좋을까 생각합니다.

주요 테이블 설정

setDirection : 테이블의 방향 지정

enum class Direction
{
    NONE = -1,      // 縦横両方向 （ バウンスが効かない ) 
    HORIZONTAL = 0, // 横方向
    VERTICAL,       // 縦方向
    BOTH            // 縦横両方向
};

setVerticalFillOrder : 셀의 표시 순서 지정

enum class VerticalFillOrder
{
    TOP_DOWN, // 上から下
    BOTTOM_UP // 下から上
};

소감

모리모리인 Cell을 준비한다면, TableViewCell의 서브 클래스를 준비하는 편이 좋네요.
조금 동작감이 치프입니다만, 실장도 간단하므로 만족? 입니다.

참고 : h tp // w w. 여기 s2dx. rg/레후오렌세/나치ゔぇc゜p/V3. HTML