概要

今回はアセットの「New UI Widget」を使ってテーブルのUIを作成します。
目標としては以下のようなGUIの再現を目指します。

開発環境

Unity:2020.3.42f(LTS)
IDE:Rider
NewUIWidget:1.15.10f1

手順

スクリプト。

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

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を選択

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

ボタンクリック後以下ファイルが作成されます。

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

ヘッダーの横幅を調整

現状だと幅が広いので狭くするよう横幅を変更

子側の設定

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

ヘッダー側の設定

子側と同じ設定
違う点はLayoutElementのMinWidthをオンにしている。（表示がおかしくなるぐらい）
以下ageの場合

ヘッダー名を日本語化する

変数のままになっているので、日本語に修正します。
以下年齢を変更した場合

データを追加する。

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

Data追加スクリプトを作成

テーブルに追加するデータを追加するために、GeneralDataスクリプトを作成します。

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オブジェクトにアタッチします。

サンプルシーンとの比較

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

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

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

概要

開発環境

手順

スクリプト。

New Widgetを作成する