如何通过脚本在 Unity3D 中动态生成 Gui？答案

【问题标题】：how can i dynamically generate a Gui in Unity3D via scripting?如何通过脚本在 Unity3D 中动态生成 Gui？
【发布时间】：2018-06-14 20:35:10
【问题描述】：

尝试在 Unity3D 中动态生成 Gui 时遇到了一些麻烦。我小时候做了一个带面板的画布。我正在尝试使用 7x4 图像填充此面板。

我收到一个包含 x 个项目的 json 对象。根据物品的数量，我用收到的物品数量填充面板。例如，如果我收到一个包含 28 个项目（7x4）的 Json 对象，我希望 GUI 如下所示：

正如我所说，我在编辑器中制作了一个带有面板的画布。在脚本中，我做了以下内容：

public GameObject canvas; //I use this to set the canvas after applying this script to an empty gameobject
public GameObject panel; // I do the same for the panel

在 Start 方法中，我将画布设置为面板的父级：

panel.transform.SetParent(canvas.transform, false);

现在我将面板设置为画布的子面板，我想生成 7x4 图像。谁能帮我解决这个问题？生成多个 UI/图像并使其如图所示在面板中显示的最佳方法是什么？

刚接触 Unity3D，我想更熟悉脚本。

【问题讨论】：

标签： c# user-interface unity3d

【解决方案1】：

为什么从代码中将画布设置为面板的父级？

因此，如果您需要从代码中动态生成所有图像，您可以执行以下操作：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class GUIBuilder : MonoBehaviour
{
    public GameObject canvas; //I use this to set the canvas after applying this script to an empty gameobject
    public GameObject panel; // I do the same for the panel

    public Vector2 ImageViewCount; // 6 * 4
    public Vector2 ImageViewSize; // 80 * 80
    public Vector2 InitialImageViewPosition; // -300 * 250
    public Vector2 ImageViewPositionOffset; // 125 * 200


    // Use this for initialization
    void Start()
    {
       GenerateImageView();
    }

    void GenerateImageView()
    {
        for (int a = 0; a < ImageViewCount.y; a++)
        {
            for (int b = 0; b < ImageViewCount.x; b++)
            {
                ImageViewBuilder(ImageViewSize, 
                new Vector2(InitialImageViewPosition.x + (ImageViewPositionOffset.x * b), 
                InitialImageViewPosition.y - (ImageViewPositionOffset.x * a)),
                panel.transform);
            }
        }
    }


    void ImageViewBuilder(Vector2 size, Vector2 position, Transform objectToSetImageView)
    {
        GameObject imageView = new GameObject("ImageView", typeof(RectTransform));
        RawImage image = imageView.AddComponent<RawImage>(); 
        //image.texture = Your Image Here
        RectTransform rectTransform = imageView.GetComponent<RectTransform>();
        rectTransform.sizeDelta = size;
        rectTransform.anchoredPosition = position;
        imageView.transform.SetParent(objectToSetImageView, false);
    }

}

【讨论】：

【解决方案2】：

我认为最好的办法是在面板上使用布局网格组，然后将图像设置为面板的子级并强制重建布局

Grid Layout

Force rebuild layout

【讨论】：

【解决方案3】：

设法修复了我的代码。我是怎么做到的： 1.在编辑器中添加一个空的游戏对象 2. 添加一个带有子面板的画布 3. 将以下脚本添加到步骤 1 中的空游戏对象中：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class generateUI : MonoBehaviour
{
    public GameObject canvas;
    public GameObject Panel;
    public GameObject image;
    int size = 40;

    private float scaler = 0.0125f;
    void Start()
    {
        Panel.transform.SetParent(canvas.transform, false);
        GameObject[] tiles = new GameObject[size];
        Vector3 change = new Vector3(20 * scaler, 0, 0);
        for (int i = 0; i < size; i++)
        {
            tiles[i] = GameObject.Instantiate(image, transform.position, transform.rotation);

            tiles[i].transform.position += change;
            tiles[i].transform.SetParent(Panel.transform, false);
        }
    }
}

4：现在将以下脚本添加到画布对象：

using System.Collections
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI

public class DynamicGrid : MonoBehaviour
{
    public int col,row;
    void Start()
    {
        RectTransform parent = gameObject.GetComponent<RectTransform>();
        GridLayoutGroup grid = gameObject.GetComponent<GridLayoutGroup>();
        grid.cellSize = new Vector2(parent.rect.width / col, parent.rect.height / row);
    }
    void Update()
    {

    }
}

5：设置画布宽度为1090，高度为430

6：从图像制作预制件（100 x 100）

7：向面板添加一个网格布局组

8：将 CellSize 设置为 100 x 100，间距设置为 10 x 10

9：将 generateUI 脚本中的大小更改为您希望看到的数字

10：利润。

我现在有了想要的功能。我按照@jour 的建议使用网格布局，我以前在使用 python 的 Kivy 软件创建移动应用程序时使用过它。

【讨论】：