Help us understand the problem. What is going on with this article?

CocosStudioのUIEditorで作ったListViewを使う

More than 5 years have passed since last update.

ui::ListViewui::ScrollViewを継承して作られています。
ui::Widget単位でリストにいい感じで並べてくれるので、かなり使いやすいです。

Cocos2d-x2.x時代に使っていたTableViewに比べるとやることがほとんどなくて、とても楽でした。

CocosStudio側の作業

ListViewを配置したベースのLayoutとListViewに表示するパーツを用意します。

UIEditorを使います。

ListViewを配置したベースとなるLayoutを作成

変数名とか雑になってますが、単純にリストコンテナを配置するだけです。

6c56a4c5e9bf0ee152e3012b6a9c6f3c.png

細かい設定でよく使いそうなのは以下で行えます。

  • 縦リストにする場合: スライド方向Verticalを指定する
  • 横リストにする場合: スライド方向Horizontalを指定する
  • スクロールの最後でバウンドさせる場合: リバウンドオープンのチェックボスをONにする

横リスト

b5efe63a1cd68e44037a635ff76f6dc5.gif

縦リスト

1eb4a11b159e7e3541b8bb817a55a52a.gif

縦リストのリバウンドON

2678ef0daf332e81ee90074cd0dadcd3.gif

ListViewに表示するパーツの作成

キャンバスサイズを250x50に調整して、LabelとButtonを配置しました。

168b5e7c9b2bcbb22a8ebd64e922784d.png

特別な設定は特に無いです。

Cocos2d-x側の作業

CocosStudioでExportしたファイルの取り込みと、ソースコード上でListViewへWidgetを配置します。

ファイルの取り込み

詳しくは、以前書いた記事「CocoStudioのAnimationEditorを使って簡単なアニメーションを実装する」に書いているのでそちらを御覧ください。

スクリーンショット 2014-10-27 18.08.03.png

ListViewにパーツを配置する

HelloWorldScene.cpp
bool HelloWorld::init()
{
    // 〜省略〜

    // CocosStudioのLayout読み込み
    auto layout = GUIReader::getInstance()->widgetFromJsonFile("ListScene/ListScene.json");
    // Listを取得
    auto listView = layout->getChildByName<ui::ListView*>("ListView_2");
    // Listの中身をセット
    for (int i = 0; i < 10; i++) {
        auto listParts = GUIReader::getInstance()->widgetFromJsonFile("ListParts/ListParts.json");
        auto text = StringUtils::format("Label Text %d", i);
        listParts->getChildByName<ui::Text*>("Label_2")->setString(text);
        listView->pushBackCustomItem(listParts);
    }
    this->addChild(layout);

    return true;
}

ソースコードはこちらに公開していますので、興味があればご覧ください。


追記:

上記の配置したリストの選択行を取得する方法については、「ui::ListViewのリスト内で選択した行を取得する」をご覧ください。

kyokomi
VRでGo書いてます。最近はUnityも少々。 脱、エターナルしたい。
http://kyokomi.hatenablog.com/
cluster-inc
clusterは、誰でも手軽にバーチャルイベントに参加したり、開催したりすることができるサービスを運営するスタートアップです。利用用途はあなた次第。音楽ライブやミーティングなど、様々な「集まるシチュエーション」に活用可能です。
https://cluster.mu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした