【UI Toolkit】デフォルトにないGridViewを実装する

はじめに

どうも、土鍋です。

UI Toolkitを使っていてuGUIにあったグリッドレイアウトができない！という問題があったので、今回は自力で実装します。

uxmlを書いて解決する記事もあったのですが、UI Builderだけで解決できました。

実装方法

UI Builder

Grid

ScrollViewのunity-content-container配下にGrid用のVisualElementを追加します。
実際の要素はこのGridVisualElement配下に配置します。

次にGridVisualElementを選択し、FlexのDirectionとWrapを画像のように変えます。
またGrowも1にしてください。
これでひとまずグリッドレイアウトっぽくなります。

コンテンツ

グリッドに配置するコンテンツのuxmlを作成します。

もし、すでにGrid以下にコンテンツを作っていたら、右クリックしてCreate Templateでuxmlを生成できます。

コンテンツの中身は画像表示だけですが、サイズを固定したかったので以下のようにしました。

Data Binding

用意されているListViewなどであれば簡単にデータソースやテンプレートを設定できるのですが、今回のものは自作しているので自力でBindしてあげる必要があります。

public class ConstructMenu : MonoBehaviour
{
    [SerializeField] 
    private VisualTreeAsset buildingElement;
    
    [SerializeField] 
    private BuildingList buildingList;
    
    private void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;

        foreach (var building in buildingList.buildings)
        {
            var buildingTemplate = buildingElement.Instantiate();
            Debug.Log(building.name);
            buildingTemplate.dataSource = building;
            root.Q<VisualElement>("Grid").contentContainer.Add(buildingTemplate);
        }
    }
}

コンテンツのuxmlをインスペクターからセットするにはVisualTreeAssetを使う必要があります。

これはあくまでテンプレートなので、Instantiate()で生成してGridに追加しています。

参考

https://discussions.unity.com/t/ui-toolkit-items-scrollable-grid-using-a-scrollview/899308/6

light11.hatenadiary.com