Unity New UI Widgets　1/3 テーブルのUIを作る

# 概要
今回はアセットの「New UI Widget」を使ってテーブルのUIを作成します。
目標としては以下のようなGUIの再現を目指します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/707de439-dfb9-e2b7-1c7e-eb87188fe161.png)

# 開発環境
Unity:2020.3.42f(LTS)
IDE:Rider
NewUIWidget:1.15.10f1

# 手順

## スクリプト。
元とするスクリプトを作成します。

```diff_c_sharp:GeneralUI.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

//将軍データクラスです。
// GUI上で表示するためのクラスです。
public class GeneralUI
{
    public string name;
    
    // 年齢　現在の年と生年月日から算出する
    public int age;
    
    // 各能力値 A(最高評価)~D(最低評価)の5段階評価
    public string politics;         // 政治力
    public string economy;          // 経済力
    public string supply;           // 補給力
    public string building;         // 建築力
    public string command;          // 指揮力
    public string infantry;         // 歩兵
    public string cavalry;          // 騎兵
    public string canonartillery;   // 砲兵

    public GeneralUI(string name, int age, string politics, string economy, string supply, string building, string command, string infantry, string cavalry, string canonartillery)
    {
        this.name = name;
        this.age = age;
        this.politics = politics;
        this.economy = economy;
        this.supply = supply;
        this.building = building;
        this.command = command;
        this.infantry = infantry;
        this.cavalry = cavalry;
        this.canonartillery = canonartillery;
    }

    // TestItemGeneralUIで使われているため作成　無いとエラーになる
    public GeneralUI()
    {
    }
}


```

## New Widgetを作成する
上で作成したスクリプトを右クリックし、GenerateWidgetを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/ef315a38-64e6-a8ce-c513-6645e87b9e8c.png)

選択後、Widget Generatorというダイアログが表示されます。
パラメーターがあることを確認し、GenerateWidgetsボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/3af77951-de32-cecd-050a-e1fece3610a2.png)

ボタンクリック後以下ファイルが作成されます。
フォルダ、ファイル名|説明
-----|-----
GeneralUI| シーンファイル データクラスに基づいたUI類が配置されている
Prefabs|各UIのPrefabが入っているフォルダ　今回はTableGeneralプレファブを使う。
Script| スクリプト類が入っているフォルダ　今回は触らない


## ヘッダーの横幅を調整
現状だと幅が広いので狭くするよう横幅を変更

### 子側の設定
DefaultItemオブジェクトの各要素のHorizonal Layout GroupとLayoutElementコンポーネントを変更にする。以下画像はDefaultItem/ageオブジェクトの例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/6cae3f9e-b88a-ecf6-4399-0bc82ccd8b0c.png)


### ヘッダー側の設定
子側と同じ設定
違う点はLayoutElementのMinWidthをオンにしている。（表示がおかしくなるぐらい）
以下ageの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d7a0d972-3526-11df-1bbd-6e2ca6159575.png)



### ヘッダー名を日本語化する
変数のままになっているので、日本語に修正します。
以下年齢を変更した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/93496a14-ae1d-4062-94c0-6cbd07e6ade5.png)

## データを追加する。
現在の状態だとヘッダーのみなので、データを一つ加えます。


### Data追加スクリプトを作成
テーブルに追加するデータを追加するために、GeneralDataスクリプトを作成します。
```diff_c_sharp:GeneralData.cs
using UIWidgets.Custom.GeneralUINS;
using UIWidgets.Examples;
using UnityEngine;
using UnityEngine.Serialization;

namespace Develop._01GeneralListGUI
{
    public class GeneralData : MonoBehaviour
    {
        /// <summary>
        /// SteamSpyView.
        /// </summary>
        [SerializeField]
        [FormerlySerializedAs("steamSpyView")]
        protected ListViewGeneralUI _listViewGeneralUI;

        
        void Start()
        {
            GeneralUI sampleGeneralUI = new GeneralUI("ナポレオン",27,"B","C","B","A","A","A","C","A");
            _listViewGeneralUI.DataSource.Add(sampleGeneralUI);
        }
    }
}

```


### オブジェクトにアタッチ
TableGeneralUIオブジェクトにアタッチします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/040ef72c-c237-6f13-9691-5bc91646616c.png)





# サンプルシーンとの比較
データの追加方法について不明だったのでサンプルシーンについて調べた。
参考にしたシーンファイル: New UI Widgets/Example/Table/SteamSpyView
ヒエラルキー上のCanvas/SteamSpyViewにアタッチされているSteamSpyDataスクリプトでデータの追加が行われている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d060c83c-9f5e-17e8-cd49-0fe75c6c1611.png)


SteamSpyView.DataSource.Add()メソッドでアイテムを追加していることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/dc964a69-abae-83e6-3e75-4d8f45e36d2d.png)




# 参考

## New UI Widget

### Generate Wideget

https://ilih.name/unity-assets/UIWidgets/docs/generator.html#attributes

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/5bcd2a25-db00-1214-dac1-95f69bbfbba3.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9f7e2133-738d-b46c-761e-2263ac6cd2cb.png)


### ListView

https://ilih.name/unity-assets/UIWidgets/docs/widgets/collections-listview.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fc3aed12-4c0e-b018-20ff-84d51e550699.png)






## データ(ランペルール)

http://hima.que.ne.jp/nobu/bushou/lempereur.cgi?up1=0&keys2%2C3=&sort=&print=25


github コミット分（privateなので見れません。）

https://github.com/RYA234/unity-hdrp/commit/d76eb4545eeff1482184889d2de91b34e06e0338