UGUI Super ScrollViewで簡単に要素の多いリストを作ってみる

#<a herf="https://www.assetstore.unity3d.com/jp/?stay#!/content/86572" target="_blank">UGUI Super ScrollView</a>
<a herf="https://www.assetstore.unity3d.com/jp/?stay#!/content/86572" target="_blank"><img width="500" alt="スクリーンショット 2018-05-12 12.52.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/90262119-61b9-ef59-8e93-f9f6466c2846.png"></a>
今回はこのアセットでちょっとループするスクロールビューを作ってみる

##何ができるか
Scrollviewのprefabを使い回すやつです。
詳細はAssetの説明のところに動画があるので観てみるとわかるかと思います。

デモを動かしたところ
!<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/a9aba8c6-9f80-7bf9-fcd9-66bc84993cf6.gif" width="500">

##早速作ります
まずはからのシーンにCanvasを配置して普通にScrollViewと
中身用のPrefabを作成

まぁこんな感じで。シンプルに画像とテキストだけ配置
<img width="200" alt="スクリーンショット 2018-05-12 13.43.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/83c0d558-8610-05aa-2ed2-a3bf8d5a4203.png"><img width="200" alt="スクリーンショット 2018-05-12 13.08.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/22dad39f-5542-c2cd-3007-f646ca6fbcae.png">

上基準で高さを変えようと思うのでPrefabのpivotはこんな感じにしています
<img width="422" alt="スクリーンショット 2018-05-12 13.06.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/41a60660-31ee-1510-db9b-33b6b2eb8e79.png">

これがprefabにアタッチしたscript

```c#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ScrollItem : MonoBehaviour
{
    public Text title;
    public Image img;

    public void SetData(string titleStr, Sprite sprite)
    {
        title.text = titleStr;
        img.sprite = sprite;
    }
}

```

ScrollViewのScroll RectがアタッチされているところにLoop List View2のスクリプトをアタッチします
そしてLoop List View2のscriptのItemPrefabListにprefabをアタッチ
<img width="600" alt="スクリーンショット 2018-05-12 13.21.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/772dfdab-8956-53f1-edf1-79aca5b41661.png">


そしてScrollを管理するところのスクリプト

```c#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using SuperScrollView;

public sealed class ScrollUI : MonoBehaviour
{
    public LoopListView2 listView = null;

    public Sprite[] imgList;
    private List<ItemData> _list;

    public class ItemData
    {
        public string title;
        public int imgNo;

        public ItemData(string title, int imgNo)
        {
            this.title = title;
            this.imgNo = imgNo;
        }
    }

    private void Start()
    {
        _list = new List<ItemData>();
        ItemData itemData = null;
        for (int i = 0; i < 100; i++)
        {
            itemData = new ItemData("Item" + i, i);
            _list.Add(itemData);
        }

        Debug.LogError(_list.Count);
        listView.InitListView(_list.Count, OnUpdate);
    }

    private LoopListViewItem2 OnUpdate(LoopListView2 view, int index)
    {
        if (index < 0 || _list.Count <= index)
            return null;

        var data = _list[index];
        var itemObj = view.NewListViewItem("Item"); // prefabの名前を設定
        var itemUI = itemObj.GetComponent<ScrollItem>();

        itemUI.SetData(data.title, imgList[data.imgNo]);

        return itemObj;
    }
}
```

あとはこのスクリプトをどこかシーン上に配置して、
画像とLoopListView2をスクリプトにアタッチ
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/4c8da9e2-cfd8-3b3c-c84f-d3047aac368e.gif" width="500">
これだけでもうできた

OnUpdateでindexが取れるので、交互に色を変えたり、高さが変わったってこの通り！
<img src="https://qiita-image-store.s3.amazonaws.com/0/46444/adeec01a-13ab-f414-2bad-774af83a7cc2.gif" width="250">

これで項目が多くても軽いスクロールビューが簡単に作れる！

要素の数が変わった時はSetListItemCountメソッドを呼ぶだけ。
Destroyなどこちらで呼ぶ必要一切なし。
第二引数はスクロールをリセットするかです。

```c#
listView.SetListItemCount(_list.Count, true);
```