リストビュー

リストビューを作成してみよう。

プロジェクトの作成

*ListViewLessonというプロジェクトを２Dで作成する。

カメラの設定

*カメラを選択して以下のように背景を設定する。

*ゲームタブを開いて、アスペクトを2:３にする。

Canvasの設置

*プロジェクトビューから新規にCanvasを作成し、以下のように設定する。

リストビューの作成

*Canvasの子要素にPanelを作成し、ListViewとリネームする。

*ListViewのRectTransformを以下のように設定する。

*ListViewがスクロールできるように設定する。AddComponentからUI->MaskとUI->ScrollRectを付与する。
ScrollRectのHorizontalのチェックは外す

*ListViewの子要素としてPanelを作成し、Cellsとリネームする。

*CellsのRectTransformを以下のように設定する。

*CellsにAddComponentからLayout->ContentSizeFitterとLayout->VerticalLayoutGroupを付与し、以下のように調整する。

*ListViewのScrollRectにCellsを登録する。

セルの作成

リストビューの準備ができたので一つ一つのセルを作成する。
*Cellsの子要素としてPanelを作成し、Cellとリネームする。

*CellのRectTransformは以下

*下から２枚の画像をダウンロードして、アセットにD&Dする。


*Cellの子要素としてImageを作成し、IVthumbとリネームする。

*IVthumbのRectTransformを調整し、manの画像を貼り付ける。

*Cellの子要素としてUI->Textを作成し、TVnameとリネームし以下のように設定する。

*同様にCellの子要素としてUI->Textを作成し,TVscoreとリネームし以下のように設定する。

確認

ここまででこんな感じになってればOKだ。

プレファブ化

*作成したCellをプレファブにし、ヒエラルキーからは削除する。

CellsControllerの作成

*CellsController.csを以下のように作成し、Cellsに付与する。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class CellsController : MonoBehaviour {

	public GameObject prefab;
	public Sprite[] sprites;

	void Start () {
		for(int i=0;i<20;i++){
			GameObject cell = Instantiate (prefab);
			cell.transform.SetParent (transform, false);
			Image image = cell.transform.Find("IVthumb").GetComponent<Image> ();
			image.sprite = sprites [i%2];
			Text name = cell.transform.Find("TVname").GetComponent<Text> ();
			name.text="name"+i;
			Text score = cell.transform.Find("TVscore").GetComponent<Text> ();
			score.text = i * 1000 + "";

		}
	}
}




インスペクターからの設定




実行


*実行してみよう。最初の動画のようにスクロールするリストビューができればOKだ。