Unity中的GridLayoutGroup结构

由于作者是做iOS的，所以喜欢用iOS中的控件做类比。
GridLayoutGroup类似于类似于iOS中的UICollectionView，是一种对于大量item（cell）的排版控件。在这个讲解里，我要做一个非全屏、无滚动条并且只可以竖排拖动的Grid。

一个完整的GridLayoutCroup控件由四个部分组成：
1.背景
2.cell显示区域
3.cell承载区域
4.cell及其子控件

为了方便观看，我们首先给项目加一个总的背景颜色：

为了让整个案例具有普适性，我们并不打算做一个全屏的Grid，所以用蓝色来突出总的背景。

接下来开始Grid的构建。首先我们创建Grid的背景（注意区别于上面蓝色的背景），它是一个ScrollView控件，因为我们希望在格子不能被一次显示的时候可以上下拖动它。为了显眼，Grid的背景我们用粉色来表示。

注意ScrollView的子控件，其中Viewport就是cell显示区域，如果没有这个那你多余的cell将会显示到背景外面去，所以一定要加。而Scrollbar Horizontal和Scrollbar Vertical就是边上那两个滚动条，如果不需要就可以删掉，这里我选择删掉，删掉后是这个样子：

在这里就会看到Viewpoint没有铺满整个背景，这是因为它留了原来两个滚动条的距离，所以我在这里还要把它拉成背景的大小。然后我们打开Viewport，他的子控件Content就是cell的承载区域。cell的排版就在这里设置。

我们点击Content下Inspector最下面的Add Component按钮，添加GridLayoutGroup控件。

其内容无非就是各种尺寸、间距和排列方式。我这里就都采用默认了。
不过还要注意这个Content作为cell承载区域，由于cell的数量不固定，所以它的大小也是不固定的。所以我们要给它加一个Content Size Fitter。

接下来我们就要开始做一个cell了。现在我们做个简单的包含一个Text的Cell。所以我在Content下创建一个Text并复制15个，那么我们当时就可以看到Cell排列的效果

不过表格通常都是随数据动态生成的，我们这种暴力的复制应付少量静态数据可以，显然不能应付大量动态数据。所以就要做出一个标准Cell。我们把第一个Text设为标准Cell，先对他随便进行一些改动。

然后用鼠标把它拖到你的Assets文件夹里，它就会自动转换成一个预制件（Prefab）。

我们把预制件命名为TextCell并双击，进入预制件的编辑模式。给他添加一个脚本取名为TextCell。TextCell的代码如下：

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

public class TextCell : MonoBehaviour
{
    public void InitCell(int index)
    {
        GetComponent<Text>().text = "index:" + index.ToString();
    }
}

代码作用非常简单，就是让text显示按钮index。接下来我们创建一个控制Cell的管理器，首先在Scene下建一个Empty Object。命名为UIController。（个人习惯，也可以直接挂载在比如Scroll View等地方）然后创建一个同名脚本，脚本代码为：

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

public class UIController : MonoBehaviour
{

    [SerializeField] Transform Content;
    [SerializeField] GameObject prefeb;

    void Start()
    {
        for (int i = 0; i < 20; i++)//制作20个Cell
        {
            GameObject cell = Instantiate(prefeb);//实例化预制体
            cell.GetComponent<TextCell>().InitCell(i);//实现按钮数据的初始化方法
            cell.transform.parent = Content;//指定预制体父控件（把Cell放到）表格里
        }
    }
}

然后返回Unity编辑器，将控件拖进脚本里。

再将Content里的Cell都删掉。然后运行游戏。

好啦，这样一个动态生成的表格就完成了！