CocoStudioのUIEditorで作ったListViewを使う（v2.2.6版)

今回はUI Editorで作ったUIのListViewの実装サンプルCocos2d-x v2.2.6版です。

kyokomiさんの記事を参考にしました。ありがとうございます。

cocos2d-x - CocosStudioのUIEditorで作ったListViewを使う - Qiita
http://qiita.com/kyokomi/items/46ee2f7c92cf1d3342b8

これができれば、面倒なスクロール制御のUIも素早く作れるようになるでしょう！

まずはUiEditorのほうでListViewコンテナを設置します。
以下では黄色い帯の中に設置しています。
特別な設定はありませんが、倍率を上げるのではなく、サイズを変更で位置を調整しないと
実装のときに表示がおかしくなります。

次に、ListViewの中の表示するパーツを作ります。
キャンパスリストを右クリックで追加します。
この時前に作ったキャンパスとサイズが同じになってしまいますが、
左上のキャンパスサイズの設定で調整します。

できたら両方共エクスポートし、プロジェクトのResourceフォルダに突っ込みます。

コードは以下のようになります。
ListViewに入れる複数のテキストと画像を変更する操作をしているところがキモです。

まずはUI全体を表示。

    // UI設置
    gui::TouchGroup* ul = gui::TouchGroup::create();
    ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("CollectionView/CollectionView_1.json"));
    this->addChild(ul);

ほかのパーツは前回説明したので、はしょってListViewの設定にいきます。

v2.2.6ではCocoStudioで作ったパーツは「ウィジェット」という名前で扱われます。

配置したListViewは、名前指定で捕捉します。

    // ListView設定
    UIListView *pList = (UIListView*)ul->getWidgetByName("ListView_1");

次に、ListViewに入れるパーツを設定します。
Jsonを読み込んでパーツをインスタンス化し、さらにパーツの中のパーツを設定していきます。
設定時に、CocoStudioでつけたパーツの名前を使います。

最後に、pushBackCustomItem でListViewにパーツを突っ込みます。

    for (int i=0; i<10; i++) {
            UIWidget *listObj = GUIReader::shareReader()->widgetFromJsonFile("listObject/listObject.json");

            ((UILabel*)listObj->getChildByName("Label_1"))->setText("hogehoge");
            ((UIImageView*)listObj->getChildByName("Image_3"))->loadTexture("hogehoge.png");

            pList->pushBackCustomItem(listObj);
    }

実行でこんな感じになります。
（実際のゲーム用にちょっといじってあるので、表示は少し違います）

このようなスクロール処理を手づけて作ったことがあるのですが、３日以上かかってました。
複雑なコーディング、設置の場所調整など、そうとう面倒です。

今回は３０分かかっていません。
CocoStudioで作ると非常に効率的です。

参考まで。
Good luck!