【Unity3D】表格

游戏里面表格元素也是很关键的一环来的，比如背包、排行榜什么的实际上也是一个表格。

Unity3D谈到表格，网上就会推荐各种插件什么的完成，其实用原生的UGUI则能了事。主要是用到布局，而且这个表格还能动态生成，如果配合C#莫说从xml还是excel读数据，从数据库读数据也行。关键是便于维护，那些插件如果他一换规则就呵呵了。

下面举一个例子，完成如下的表格，说明如何利用原生的UGUI完成表格：

一、场景布置

1、如同《【Unity3D】公告栏与开始界面的布置》（点击打开链接）一样，配合滚动条Scroll Bar整一个带滚动的Plane。如图所示。这些都是可以通过GameObject->UI轻松创建的插件。设置Panel的大小为600x200，你也可以设置为其它大小，但下文部分大小设置也做出相应的调整。

2、之后在Plane下创建一个空物体，命名为Table，如上图所示，将Panel的Scoll Rect组件中的内容设置为这个Table。之后，将锚点设置到中上，Anchors中的Pivot，X=0，Y=1，便于对齐，锚点的作用可以参考《【Unity3D】UGUI自适应屏幕与锚点》（点击打开链接）。同时加上Layout->Vertical Layout Group这个垂直布局的插件，Spacing设置为10，以后在Table下的子物体会一个一个地自动往下摆放的。同时加上Layout->Content Size Fitter自适应内容调节大小这个组件。这里就像《【Android】关于百分比布局多个LinearLayout嵌套时出现的问题与解决方案》（点击打开链接）中的LinearLayout布局的思想。

3、然后我们在这个Table中再摆一个空物体，命名为1，作为表头，赋予Layout->Grid Layout Group网格布局。这里的Cell Size由于Panel是600x200的，我们就赋予一个X=200,Y=100的大小一个网格，间隔Spacing X Y都为0。这样一个滚屏就能放200/100=2行，表格刚好有600/200=3列。

之后在这个空物体1，下面创建3个Text，分别命名为Cell0-Cell2，由于老爸空物体1有Grid Layout Group的存在，这些Text儿子会自动一个一个地形成网格。将字体弄成36号，分别改上上图的中文形成表格。新建一个预设，命名为Row，将空物体1赋予这个预设。Unity3D预设在《【Unity3D】利用预设、实例化Instantiate和协程完成生成器》（点击打开链接）已经详细论述了，这里不再赘述。

二、脚本编写

在于Main Camera同级的游戏场景最顶处，创建一个空物体GameObject赋予脚本TableCreate.cs如下：

using UnityEngine;using UnityEngine.UI;using System.Collections;public class TableCreate : MonoBehaviour{    public GameObject Row_Prefab;//表头预设    void Start()    {        for (int i = 0; i < 10; i++)//添加并修改预设的过程，将创建10行        {            //在Table下创建新的预设实例            GameObject table = GameObject.Find("Canvas/Panel/Table");            GameObject row = GameObject.Instantiate(Row_Prefab, table.transform.position, table.transform.rotation) as GameObject;            row.name = "row" + (i + 1);            row.transform.SetParent(table.transform);            row.transform.localScale = Vector3.one;//设置缩放比例1,1,1，不然默认的比例非常大            //设置预设实例中的各个子物体的文本内容            row.transform.FindChild("Cell0").GetComponent<Text>().text = (i + 1) + "";            row.transform.FindChild("Cell1").GetComponent<Text>().text = "name" + (i + 1);            row.transform.FindChild("Cell2").GetComponent<Text>().text = "class" + (i + 1);        }    }}

并且在GameObject中指明这个Row_Prefab就是预设Row。

这样就大功告成。

由于Table已经设置了垂直布局+自动根据内容设置大小，Panel也设置了滚动，因此可以不停往里面加预设Row，他们就会工工整整地排列起来，形成表格。唯一注意的是，需要在生成脚本TableCreate.cs固定生成的预设实例都挂在Tabel之下，同时缩放Scale必须为1，不然默认地生成会漫无边际的。需要在脚本设置预设实例，必须对于GameObject.Instantiate()的返回值从Object变成GameObject则可以操作了，否则会出现Setting the parent of a transform which resides in a prefab is disabled to prevent data corruption的报错。同时应该用setParent方法，设置预设实例的父物体，而不是.transform.parent=xx，否则生成一个，出一次警告。