ListViewを作る！ その１：Cocos Creator

　以前、Cocos Studio 2を使ってListViewを作成しました。
mmorley.hatenablog.com
　今回は、同じものをCocos Creatorで作成します。
　Cocos CreatorにはListViewコンポーネントがありません。
　ScrollViewコンポーネントをカスタマイズしてListView作成します。

目次

使用環境

　私が使用している環境です。

• Mac OS X El Capitan Version 10.11.4
• Cocos Creator Version 1.0.1
• ブラウザ：Google Chrome Version 50.0.2661.75 (64-bit)

プロジェクトの新規作成

『Hello World』プロジェクトを新規作成します。

1. 『Cocos Creator』を起動
2. 『Dashboard』画面で『New Project』タブをクリック
3. プロジェクトの種類の選択で『HelloWorld』を選択
4. 任意の保存場所とプロジェクト名を入力して『Create』ボタンをクリック

リソースの準備と登録

リソースファイルの準備

　今回使用するリソースファイルを用意しました。

1. 下記のリンク先の『Download』をクリック
   
2. ダウンロードしたresources.zipを解凍
   『resources』フォルダには、下記のファイルが含まれています。

   画像ファイル	panel.png new_0.png〜new_4.png：計５枚
   フォントファイル	fontCaption.fnt fontCaption.png fontStage.fng fontStage.png

リソーフスファイルの登録

　リソースファイルを『assets』に登録します。

1. 『Assets』パネルで『assets』を右クリックし、『Create』-『Folder』をクリック
2. 作成された『New Folder』を右クリックし、『Rename』をクリックして『Font』に名前を変更
3. ４つのフォントファイルを『Font』フォルダにドラッグ＆ドロップ
4. 画像ファイルを『Texture』フォルダにドラッグ＆ドロップ

　すべて追加すると『Assets』パネルは下図のようになります。
　

『Canvas』のサイズを変更

　幅640px、高さ960pxに変更します。

1. 『Assets』パネルで『Scene』フォルダの『helloworld』ファイルをダブルクリックして開く
2. 『Node Tree』パネルで『Canvas』をクリックして選択
3. 『Properties』パネルで『Canvas』-『Design Resolusion』を『640, 960』に変更

『ScrollView』を追加

1. 『Node Tree』パネルで『Canvas』を右クリックし、『Create』-『Create UI Nodes』-『Node With ScrollView』をクリック
2. 『Properties』パネルで、追加した『New ScrollView』の属性値を下図のように変更
   ＊表示していない属性値はそのままです。
   

『scrollBar』の属性値を変更

　『Widget』コンポーネントで、親ノード（ListView）とのサイズ・位置の関係を設定します。
　ここでは上下の端が揃うように設定します。

1. 『Node Tree』パネルで『ListView』のツリーを展開し、『scrollBar』をクリック
2. 『Properties』パネルで『scrollBar』の属性値を下図のように変更
   ＊表示していない属性値はそのままです。
   

『view』の属性値を変更

　『View』はリストの表示範囲を設定しています。

1. 『Node Tree』パネルで『ListView』-『view』をクリック
2. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Widget』をクリック
3. 『Properties』パネルで『view』の属性値を下図のように変更
   ＊表示していない属性値はそのままです。
   

『content』の属性値を変更

　『content』はリストの項目の親になるオブジェクトです。
　『Layout』コンポーネントで、項目の並べ方を設定します。

1. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Layout』をクリック
2. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Widget』をクリック
3. 『Properties』パネルで『content』の『Widget』の属性値を下図のように変更
   ＊この作業は、『content』の上端を『view』と揃えるためにやっています。サイズを手入力するのは面倒なので『Widget』を一度有効にしています（後で無効にします）。
   
4. 『Properties』パネルで『content』の属性値を下図のように変更
   ＊表示していない属性値はそのままです。
   

シーンの保存

1. キーボードの『command + s』を押して、シーンを保存

　
　ここまでで、『ListView』の外枠が出来ました。
　次は、リストの項目を作るのですが、今回はここまでにします。

あとがき

　『Widget』は、親ノードに対する位置とサイズの関係を設定するコンポーネントで、
　『Layout』は、子ノードの並べ方を設定するコンポーネントです。
　『Layout』の『Padding』は上端と下端の余白の幅で、左右は無いみたいです。
　なので『Widget』と組み合わせて上下左右の余白を設定しました。

おすすめの記事

• ListViewを作る！ その２（完）：Cocos Creator - モーリーのメモ