Unity UI实现表格渲染

前言

最近有在用Unity做前端UI，用到了实现表格数据渲染，也就是后台给的list渲染到表格中，查看了许多资料发现比较少，因此在这里记录一下吧，希望可以帮助到大家哦。

也是第一次使用Unity，先简单介绍一下，Unity是一款经常用来做3d图像的框架，很多游戏都有用到Unity，比如小编最近在玩的“爸爸的面馆”就是有用到这个框架，以后如果有尝试3D的demo再分享给大家吧。

正文

小编尝试了两种方式，但是实际来说，第二种方式更好一些。

方案1：使用scrollview控件结合string形式的数据展示

创建项目
创建UI-scrollview
在scrollview中的content中添加text控件
创建script脚本，将脚本放到scrollview的inspector下，直接拖动过去就好
拖动过去之后，将刚才添加的text控件绑定到scrollview的inspector的script下的text上

代码如下：

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

public class NewBehaviourScript1 : MonoBehaviour
{
	//content下的text控件名称
     public Text tableText;
     //定义要放到表格中的数据
     private string[,] tableData;
  
    // Start is called before the first frame update
    void Start()
    {
          tableData=new string[,]{
          {"intamnet     ","Connected","wifi"},
     	  {"ChenL        ","","wifi"},
     	  {"tatatnet      ","","wifi"},
          {"internet","","wifi"},
          {"ChenL","","wifi"},
          {"internet","","wifi"},
          {"ChenL","","wifi"},
          {"hidtwor","","wifi"},
          {"internet     ","","wifi"},
          {"ChenL        ","","wifi"},
          {"internet     ","","wifi"},
          {"Ch4nL        ","","wifi"},
          {"internet     ","","wifi"},
     	  {"Ch6nL        ","","wifi"}
       };
       UpdatDataText();
    }
    
    void UpdatDataText(){
    	RectTransform contentTransform =GetComponentInChildren<ScrollRect>().content;
    	string dataStr="";
    	for(int i =0;i<tableData.GetLength(0);i++){
    		for(int j =0;j<tableData.GetLength(1);j++){
    			dataStr+=tableData[i,j].PadRight(20);
    		}
    		dataStr+="\n";
    	}
    	tableText.text=dataStr;
    	
    	//当数据超过scrollview的size时可以滑动滚轮显示数据
    	contentTransform.sizeDelta=new Vector2(tableText.preferredWidth,tableText.preferredHeight);
    	tableText.text=dataStr;
    	 
    	
   }
}

这个方案的显示效果：
在这里插入图片描述
这个方案算是就字符串模拟表格的结果，但是有些问题就是每一列的数据如果字符串长度不是一般长，导致数据就不会整齐，因此有了方案2.

方案2：使用scrollview结合grid layout group控件调整布局展示表格数据。

创建GameObject
GameObject下创建panel
panel下创建一个scrollview
scrollview下的content下创建一个gameObject命名为CellPrefab
CellPrefab下创建想要的列，我创建了3列，第一列text，第二列text，第三列image
CellPrefab下，add component-grid layout group
将CellPrefab拖到Assets下，这样CellPrefab就变成了一个预制体
通过代码实现，将数据放到预制体，构成表格

代码如下：

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

public class table1 : MonoBehaviour
{
    public GameObject CellPrefab;
    public Sprite[] icons;

    private List<List<string>> tableData = new List<List<string>>()
    {
       
        new List<string>{"Item 1", "10", "icon1"},
        new List<string>{"Item 2", "20", "icon2"},
        new List<string>{"Item 3", "30", "icon3"},
        new List<string>{"Item 4", "40", "icon4"},
        new List<string>{"Item 5", "50", "icon5"},
        new List<string>{"Item 6", "60", "icon6"},
        new List<string>{"Item 7", "70", "icon7"},
        new List<string>{"Item 8", "80", "icon8"},
    };

    void Start()
    {
        icons = Resources.LoadAll<Sprite>("Icons");
        if (icons == null || icons.Length == 0)
        {
            Debug.LogError("No icons loaded!");
        }
        else
        {
            Debug.Log("Number of icons loaded: " + icons.Length);
        }
        Debug.Log("icons__________"+icons);
        PopulateTable();
    }

    void PopulateTable()
    {
      

        GridLayoutGroup gridLayout = GetComponentInChildren<GridLayoutGroup>();
        foreach (var row in tableData)
        {
            GameObject cell = Instantiate(CellPrefab);
            Text[] cellTexts = cell.GetComponentsInChildren<Text>();

            for (int i = 0; i < 3; i++)
            {
                if (i == 2)
                {
                   Image iconImage = cell.GetComponentInChildren<Image>();
                    //int iconIndex = int.Parse(row[i].Substring(4));


                    //if (iconIndex < 0 || iconIndex >= icons.Length)
                    // {
                    //   Debug.LogError("Icon index out of bounds!");
                    //  return;
                    // }
                   // Debug.Log("iconIndex==="+iconIndex);
                    iconImage.sprite = icons[2];
                }
                else
                {
                    cellTexts[i].text = row[i];
                }
            }
            // Set the new cell as a child of the GridLayoutGroup
            cell.transform.SetParent(gridLayout.transform, false);
        }
    }
}