UnityのuGUIでListViewを作る方法

Unityには、GUIの作成をサポートする通称『uGUI』と呼ばれる機能があります。

ここ最近でずいぶん使いやすくなってきましたが、まだ最初から用意しておいて欲しいUI部品がなかったりします。

あるアプリを開発している時に『ListView』が欲しくなったのですが、uGUIには元から用意されていません。

そこで、AssetStoreを見てみたらいくつか売られていましたが、

頑張ったら作れるんじゃないの？

と調子に乗ってみたところ、なんとかListViewを自作できました。

ここでは、僕なりのListViewの作り方を解説してみます。

ScrollViewを追加する

今回作るListViewですが、基本となるのはScrollViewです。

簡単に言うと、ScrollViewにスクリプトを設定して、ListViewっぽくするだけです。

というわけで、まずは２Dプロジェクトを作成して、[Create - UI - Scroll View] でScrollViewを追加します。

すると、Canvasがない場合は自動的にCanvasが追加され、その下にScrollViewが追加されます。

最初は表示がよくわからないと思うので、まずはCanvasの設定を変更しておきます。
Canvasを選択して、Inspectorの[Render Mode] を[ Screen Space - Camera] に変更し、「Render Camera」を「Main Camera」に設定しておきます。こうしておくと、このCanvasが指定したカメラに対してOverlay表示されるのでみやすくなります。
（実際は、自分の作成するアプリに合わせて変更してください）


こうすると以下のような画面になります。


ちなみにInspectorはこんな感じ。サイズは適当に決めてください。


作成するListViewにもよりますが、今回は縦スクロールのみとするので、「Scrollbar Horizontal」をHierarchyから削除してしまいます。


そして、「Scroll View」を選択して「Scroll Rect (Script)」の「Horizontal」のチェックも外してしまいましょう。

これで、縦スクロールのみのScroll Viewになったので、ListViewの元ができました。
名前も「List View」に変えてしまっておきます。

ListViewnのアイテムを作成

次は、ListViewの１行に表示する項目を集めたアイテムを作成します。
Hierarchy から [Scroll View - Viewport - Content] と開き、Contentの下に空のGameObjectを追加します。



追加した Game Object を選択して、Anchorを変更します。


Pivotを(1, 1)に変更し、Left, Pos Y, Right, Heightをお好みに合わせて設定しておきます。今回は以下のようにしました。


そうしたら、ここで追加したGameObject を ListViewItem 等の名前に変更しておきます。

次に、作成したListViewItemに表示したい項目を入れていきます。今回は、背景色とテキストのみとします。

まずは背景色を追加します。先ほどのListViewItemを選択して、右クリック[UI - Image] で画像を追加して、名前はBackgroundにしておきましょう。
Backgroundを選択して、InspectorのImageコンポーネントのColorを好きな色に設定します。RectTransformは以下の画像を参考に設定してみてください。Pivotは(1,1)にしておくと良いと思います。



次に、右クリック[UI - Text]でテキストを追加しておきます。Textの設定も以下の画像を参考にしてください。



そうするとこんな感じになります。


ちなみにHierarchyはこんな感じ。


ここまでできたら、ListViewItemをProjectウィンドウにドラッグ＆ドロップして、Prefab化しておきます。Prefab化できたら、HierarchyのListItemViewは削除しておきましょう。

これで下準備は完了です。ここからスクリプトを書いていきます。

スクリプトを作成する

ProjectウィンドウでC#スクリプトを作成します。名前は「ListViewController」にしておきましょう。

ファイルを開いたら、まず、「Content」の変数を用意します。そして、あとでListViewに項目を追加していくので、先ほど作成したListViewItemのPrefabも変数にして持っておきましょう。

using UnityEngine;
using System.Collections;

public class ListViewController : MonoBehaviour {
    public RectTransform content_;
    public GameObject item_prefab_;

    // Use this for initialization
    void Start () {
    }
 
    // Update is called once per frame
    void Update () {
    }
}

作成したスクリプトを Hierarchy の List View にドラッグ＆ドロップして、先ほど作成した変数に Inspector から「_content」にはViewport の 「Content」を、「item_prefab_」には「ListViewItem」をそれぞれセットしておきます。

ListViewの項目を作っていく

ここからListViewに表示する項目を作っていきます。
先ほど作成した、ListViewItemは文字列を表示する箇所があったので、表示する文字列を指定できるようにしましょう。
まずはスクリプトに、表示する文字列を設定する配列を変数として追加します。ここでは「itemList_」としておきましょう。

public class ListViewController : MonoBehaviour {
    public RectTransform content_;
    public GameObject  item_prefab_;
    public string[]   itemList_;
      :
      :

そうしたら、今度はUnityのListViewのInspectorビューで「itemList_」に値を設定します。ここではサイズが10、item0〜item9の文字を表示することにしましょう。


ListViewにこれらの項目が設定されたListViewItemを追加していくわけですが、ここでVertical Layout Group を使用します。

Vertical Layout Group は、Layout Group の中の１つですが、これは子要素を縦方向に自動的にレイアウトしてくれるコンポーネントです。

このコンポーネントをListViewの Content に設定します。


あとは、作成しておいたListViewItem Prefab をスクリプトからこのContentにスクリプトに追加していくのですが、Contentの高さをListViewItemの高さと追加する数に合わせて調整したいので、Start()のときにListViewItemの高さを取得しておきます。

itemの高さを保持しておく変数を作成し、起動時にStart()で一度ListViewItemのPrefabのインスタンスを作成し、高さを取得しておきます。
ここでは、このItemは使用しないのでDestroyしてしまいます。

private float itemHight_;

// Use this for initialization
void Start () {
    GameObject item = GameObject.Instantiate(item_prefab_) as GameObject;
    RectTransform rect = item.GetComponent();
    itemHight_ = rect.rect.height;
    GameObject.Destroy(item);
}

これで、Item１つあたりの高さが取得できたので、実際にListViewの項目を作っていきましょう。やることとしては以下の２つです。

1. ListViewItemの個数に合わせてContentの高さを調整する
2. Contentの子要素としてListViewItemのインスタンスを設定していく

ListViewの項目を更新する関数を作成します。

private void UpdateListView() {
    // item数に合わせてContentの高さを変更する.
    int setting_count = itemList_.Length;
    float newHeight = setting_count * itemHight_;
    content_.sizeDelta = new Vector2(content_.sizeDelta.x, newHeight); // 高さを変更する.

    // Contentの子要素にListViewItemを追加していく.
    foreach (string itemStr in itemList_) {
        GameObject item = GameObject.Instantiate(item_prefab_) as GameObject; // ListViewItem のインスタンス作成.
        Text itemText = item.GetComponentInChildren<Text>(); // Textコンポーネントを取得.
        itemText.text = itemStr;

        RectTransform itemTransform = (RectTransform)item.transform;
        itemTransform.SetParent( content_, false ); // 作成したItemをContentの子要素に設定.
    }
}

これで、itemList_で指定した文字列がListViewに表示されているはずです。


これでも問題ないのですが、念のためListViewを更新するときに、最初に項目をクリアする処理を入れておきましょう。

private void UpdateListView() {
    RemoveAllListViewItem(); // ListViewの項目を一度削除する.

    // item数に合わせてContentの高さを変更する.
    int setting_count = itemList_.Length;
    float newHeight = setting_count * itemHight_;
    content_.sizeDelta = new Vector2(content_.sizeDelta.x, newHeight); // 高さを変更する.

        :
        :
        :
}

private void RemoveAllListViewItem() {
    foreach (Transform child in content_.transform) {
        GameObject.Destroy(child.gameObject);
    }
}

これでuGUIでのListViewの作成は完了です！

今回はListViewのアイテムはTextだけにしましたが、Prefab化したListViewItemをカスタマイズすることで、好きな項目を表示することができます。

ぜひお好きなListViewにカスタマイズしてみてください！