Unity New UI Widgets 3/3 テーブルの要素をクリックすると詳細画面を表示するようにする。

# 概要
今回はテーブルGUIの１項目をクリックしたときに将軍の詳細画面を表示するようにします。
下gif画像参照
![ui_output1122.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8e7fb2ee-9b16-2358-28e4-357f807af2c3.gif)




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


# 手順

## スクリプト

### 一覧
クラス名|説明
--------|------
GeneralSpecificsUI|新規クラス。詳細画面のUIにアタッチする。
ListViewComponentGeneralUI|既存のクラス。(NewWidget由来のクラス)にアタッチされている。OnPointerClickメソッドを加える。
GeneralUI|既存クラス。顔写真用のSpriteを追加
GeneralDetail| 既存クラス。顔写真用のSpriteを追加
GeneralData | 既存クラス。顔写真用のSpriteを追加


#### GeneralSpecificsUI
```diff_c_sharp:GeneralSpecificsUI.cs
using TMPro;
using UnityEngine;
using UnityEngine.UI;

namespace Develop._01GeneralListGUI
{
    public class GeneralSpecificsUI : MonoBehaviour
    {
        [SerializeField] private TextMeshProUGUI nameText = null;
        [SerializeField] private TextMeshProUGUI ageText;
        [SerializeField] private TextMeshProUGUI commandText;
        [SerializeField] private TextMeshProUGUI infantoryText;
        [SerializeField] private TextMeshProUGUI cavalryText;
        [SerializeField] private TextMeshProUGUI cannonText;
        [SerializeField] private TextMeshProUGUI buildingText;
        [SerializeField] private TextMeshProUGUI supplyText;
        [SerializeField] private TextMeshProUGUI politicsText;
        [SerializeField] private TextMeshProUGUI economyText;
        
        [SerializeField] private Image faceImage;

        public void SetInfo(GeneralUI generalUI)
        {
            // nameText.text = "a";
            nameText.text = generalUI.name;
            ageText.text = $"年齢：" + generalUI.age.ToString();
            commandText.text = $"指揮能力：" + generalUI.command.ToString();
            infantoryText.text = $"歩兵能力：" + generalUI.infantry.ToString();
            cavalryText.text = $"騎兵能力：" + generalUI.cavalry.ToString();
            cannonText.text = $"砲兵能力：" + generalUI.canonartillery.ToString();
            buildingText.text = $"建築能力：" + generalUI.building.ToString();
            supplyText.text = $"補給能力：" + generalUI.supply.ToString();
            politicsText.text = $"政治能力：" + generalUI.politics.ToString();
            economyText.text = $"経済能力：" + generalUI.economy.ToString();
            faceImage.sprite = generalUI.faceImage;
        }
    }
}
```

#### ListViewComponentGeneralUI

```diff_c_sharp:ListViewComponentGeneralUI.cs
using Develop._01GeneralListGUI;
using UnityEngine;
using UnityEngine.EventSystems;

namespace UIWidgets.Custom.GeneralUINS
{
	/// <summary>
	/// ListView component for the GeneralUI.
	/// </summary>
	public partial class ListViewComponentGeneralUI : UIWidgets.ListViewItem, UIWidgets.IViewData<GeneralUI>
	{
+		[SerializeField] private GeneralSpecificsUI GeneralSpecificsUI;
		
        // 中略
+		public override void OnPointerClick(PointerEventData eventData)
+		{
+			GeneralSpecificsUI.SetInfo(this.Item);
+			GeneralSpecificsUI.GetComponent<GameObject>().SetActive(true);
+			
+			Debug.Log(this.name);
+		}

        // 中略		
	}
}

```

#### GeneralUI

```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 Sprite faceImage;
+    public GeneralUI(string name, int age, string politics, string economy, string supply, string building, string command, string infantry, string cavalry, string canonartillery,Sprite faceImage)
    {
        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;
+        this.faceImage = faceImage;
    }

    // TestItemGeneralUIで使われているため作成
    public GeneralUI()
    {
    }
}
```

#### 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
    {
        [SerializeField]
        [FormerlySerializedAs("steamSpyView")]
        protected ListViewGeneralUI _listViewGeneralUI;

        [SerializeField]
        SO_GeneralList _soGeneralList;
        
        void Start()
        {
            foreach (var generalDetail in _soGeneralList.generalDetails)
            {
                GeneralUI newItem = new GeneralUI(generalDetail.name, Age(generalDetail.birthYear),
                    ToAbility(generalDetail.politics), ToAbility(generalDetail.economy),
                    ToAbility(generalDetail.supply), ToAbility(generalDetail.building),
                    ToAbility(generalDetail.command), ToAbility(generalDetail.infantry),
+                    ToAbility(generalDetail.cavalry), ToAbility(generalDetail.canonartillery),generalDetail.faceImage);
                _listViewGeneralUI.DataSource.Add(newItem);
            }
        }

        int Age(int birthYear)
        {
            return YearManager.Instance.CurrentYear - birthYear + 1;
        }

        private string ToAbility(int ability)
        {
            if (ability == 1)
            {
                return "D";
            }
            else if (ability == 2)
            {
                return "C";
            }
            else if (ability == 3)
            {
                return "B";
            }
            else if (ability == 4)
            {
                return "A";
            }

            return "error";
        }
    }
}


```


## Unity Editor側での設定

### 顔写真の画像を設定
顔写真の画像を読み込むようScriptabaleObjectを修正します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/59c88fe1-251c-6e74-6fa7-bf112d6a9f30.png)

### UIを作成
詳細画面のUIを作成します。GeneralSpecificsUIスクリプトをアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/40bb0b25-448c-14d9-6e4f-3cccd5702ee7.png)



### 項目を選択したときにUIを表示するようにする
ScrollRect/Viewport/List/DefaultItemのListViewCOmponentGeneralUIコンポーネントの引数にGeneralSpecificsUIを加えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e551d0e1-0890-8e3a-a6e2-dac0f3d46d28.png)





# 参考

## Unity
### 
https://docs.unity3d.com/2019.1/Documentation/ScriptReference/UI.Selectable.OnPointerEnter.html


## NewWidget

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

### OnSelect OnSelectObject 公式で推奨されている方法
公式ドキュメント的に推奨されている方法はOnSelect OnSelectObjectイベントです。
配列の要素が返されるようなので使わなかったです。（直接情報を取得したかった）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/2f524ea9-b379-d047-a4c5-1c9108235b5f.png)




使い方は未だ理解してないです。Calls配列を理解する必要がある？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0e50cc7d-0277-574a-76d1-2921b5ff4a1c.png)



## Githubコミット分(privateなので見れません)

https://github.com/RYA234/unity-hdrp/commit/cf12071e8a04eeea6a407c7a3c24b0180ea68f40#diff-842b00e91f642bbed5ca2c2229fc674b6a0525ba44a3baec7c725c0e476349cb