Cocos2d-x Ver 3.x TableViewの作成

参考にしたページ：「Cocos2dx 3.0 TableViewを使ってみる」を更に実用的に改造してみました。セルのレイアウトも簡単で、これだと十分に使えると思います。
いいサンプルを使わせていただきました。

Cocos2dx 3.x C++言語

Overview.hを次のように変更してみてください。

#ifndef __TableView__Overview__

#define __TableView__Overview__

#include <iostream>

#include "cocos2d.h"

#include <extensions/cocos-ext.h>

USING_NS_CC;

using namespace extension;

class Overview : public Layer,

public TableViewDataSource,

public TableViewDelegate

{

    Size window_size;

public:

    static cocos2d::Scene* createScene();

    virtual bool init();

    //TableViewDataSourceの抽象メソッド

    virtual Size cellSizeForTable(TableView* table);

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

    virtual ssize_t numberOfCellsInTableView(TableView* table);

    //TableViewDelegateの抽象メソッド

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

    //TableViewDelegateが継承しているScrollViewの抽象メソッド

    virtual void scrollViewDidScroll(ScrollView* view){};

    virtual void scrollViewDidZoom(ScrollView* view){};

    CREATE_FUNC(Overview);

};

#endif /* defined(__TableView__Overview__) */

Overview.cppを次のように変更してみてください。

#include "Overview.h"

Scene* Overview::createScene()

{

    auto scene = Scene::create();

    auto layer = Overview::create();

    scene->addChild(layer);

    return scene;

}

// on "init" you need to initialize your instance

bool Overview::init()

{

    //初期化

    if ( !Layer::init() ) return false;

    //画面サイズサイズを取得

    window_size = Director::getInstance()->getWinSize();

    // バックグランドカラー

    auto background = LayerColor::create(Color4B::WHITE,

                                         window_size.width,

                                         window_size.height);

    // バックグランドカラー 第2引数は表示順

    this->addChild(background, 0);

    // テーブル一覧ラベルを生成

    auto label1 = Label::createWithSystemFont("テーブル一覧", "Arial", 60);

    label1->setColor(Color3B::BLACK);

    // ラベルの設置

    label1->setPosition(Vec2(window_size.width / 2 ,window_size.height - 80));

    // ラベルタイトルを追加

    this->addChild(label1,1);

    // テーブルのヘッダー空間

    TableView* tableView = TableView::create

                           (this,Size(window_size.width,window_size.height*9/10));

    // テーブル全体表示

    //TableView* tableView = TableView::create(this, window_size);

    //展開方向

    tableView->setDirection(TableView::Direction::VERTICAL);

    //表示順序上からしたへ

    tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);

    //追加

    tableView->setDelegate(this);

    addChild(tableView);

    tableView->reloadData();

    return true;

}

// セルの大きさを設定する

Size Overview::cellSizeForTable(TableView *table){

    return Size(window_size.width, 100);

}

// 1セルに表示させるValueをセット

TableViewCell* Overview::tableCellAtIndex(TableView *table, ssize_t idx){

    // 行番号

    std::string id = StringUtils::format("%zd", idx);

    // 行テキスト

    std::string text = StringUtils::format("行目");

    // セル

    TableViewCell *cell = table->dequeueCell();

    cell = new TableViewCell();

    cell->autorelease();

    // セルの背景は交互に色を変更する

    auto background_color = Color3B::GREEN;

    if (idx%2) {

        background_color = Color3B::BLUE;

    }

    // Background

    Sprite* bg = Sprite::create();

    bg->setAnchorPoint(Point(0, 0));

    bg->setTextureRect(Rect(0, 0, window_size.width, 90));

    bg->setColor(background_color);

    bg->setTag(100);

    cell->addChild(bg);

    // ボーダーライン

    Sprite* line = Sprite::create();

    line->setAnchorPoint(Point(0, 0));

    line->setTextureRect(Rect(0, 0, window_size.width, 1));

    line->setColor(Color3B::WHITE);

    cell->addChild(line);

    // 画像

    Sprite* imge_1 = Sprite::create("imge80.png");

    imge_1->setAnchorPoint(Point(0, 0));

    imge_1->setPosition(Point(10, 0));

    cell->addChild(imge_1);

    // IDテキスト部分

    auto *label_1 = LabelTTF::create(id.c_str(), "Arial", 80);

    label_1->setAnchorPoint(Point(0, 0));

    label_1->setPosition(Point(110, 0));

    label_1->setColor(Color3B::WHITE);

    cell->addChild(label_1);

    // テキスト部分

    auto *label_2 = LabelTTF::create(text.c_str(), "Arial", 80);

    label_2->setAnchorPoint(Point(0, 0));

    label_2->setPosition(Point(210, 0));

    label_2->setColor(Color3B::WHITE);

    cell->addChild(label_2);

    return cell;

}

// セル数

ssize_t Overview::numberOfCellsInTableView(TableView *table){

    return 60;

}

// セルがタッチされた時のcallback

void Overview::tableCellTouched(TableView* table, TableViewCell* cell){

    CCLOG("%ziのセルがタッチされました", cell->getIdx());

}

TableView::Direction（テーブルの方向）
TableView::Direction::VERTICAL->縦方向
TableView::Direction::HORIZONTAL->横方向
TableView::Direction::BOTH->縦横両方
TableView::Direction::NONE->縦横両方(バウンスなし)

TableView::VerticalFillOrder(セルの表示順)
TableView::VerticalFillOrder::TOP_DOWN->上から下
TableView::VerticalFillOrder::BOTTOM_UP->下から上

GitHub TableView_Cocos2d-X

目　次