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都删掉。而后运行游戏。

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